JavaScript 习题及面试题 1

最新推荐文章于 2023-02-12 12:00:00 发布

原创最新推荐文章于 2023-02-12 12:00:00 发布 · 1.6w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #面试

前端开发专栏收录该内容

5 篇文章

订阅专栏

本文精选了多个知名互联网公司的前端笔试题目，涵盖ES6、数组操作、DOM操作、表格样式、求和函数、事件处理、DOM结构生成、注释代码形式、富文本编辑器、邮件验证、颜色编码转换等内容，深入解析JavaScript核心概念与实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 习题及面试题

1.[单选题]

有以下 ES6 代码function * gen() { yield 1;

yield 2;

yield 3;

}

下面选项描述正确的是哪个？

gen()执行后返回 2
gen()执行后返回 undefined
gen()执行后返回一个 Generator 对象
gen()执行后返回 1

----------------------------------------------------------------------------------------------------------------------------

来自：百度 2016 研发工程师笔试真题（三）答案：C

提示：

这是 ES6 的新 feature， function 后面带 * 的叫做generator function。函数运行时，返回一个迭代器。

2.

[不定项选择题]

语句var arr=[a,b,c,d];执行后，数组 arr 中每项都是一个整数，下面得到其中最大整数语句正确的是哪几项？

Math.max(arr)
Math.max(arr[0], arr[1], arr[2], arr[3])
Math.max.call(Math, arr[0], arr[1], arr[2], arr[3]) D.Math.max.apply(Math,arr)

----------------------------------------------------------------------------------------------------------------------------

来自：百度 2016 研发工程师笔试真题（三）答案：B C D

提示：

A 选项错误

因为函数 Math.max(x);的参数是 Number 类型，可以使小数，整数，正数，负数或者是

如果不是上面所述类型就会返回NaN.

3.

[问答题]

写一个 traverse 函数，输出所有页面宽度和高度大于 50 像素的节点。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(二) 参考：

function traverse() { var arr = [];

var elements = []; if (document.all) {

elements = document.all;

} else {

elements = document.getElementsByTagName("*");

}

//console.log(elements.length);

for (var i = 0; i < elements.length; i++) { var ele = elements[i];

//console.log(ele.tagName);

//width 返回的是字符串 offsetWidth 返回的是带边框的Number 型的数字

var width = parseFloat(ele.style.width) || ele.offsetWidth;

//console.log(width);

var height = parseFloat(ele.style.height) || ele.offsetHeight;

//console.log(height);

if (width > 50 && height > 50) { arr.push(elements[i].tagName);

}

return arr;

}

window.onload=function() //注意 onload 的使用方式

{

console.log(traverse()); console.log("a");

console.log('a');

}

</script>

4.

[问答题]

请写一个表格以及对应的 CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

---------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(二) 参考：

</table>

<style>

.table tr:nth-child(odd){ background-color:white;

}

.table tr:nth-child(even){ background-color:gray;

}

.table tr:hover{

background-color:yellow;

}

</style>

5.

[问答题]

写一个求和的函数 sum，达到下面的效果

// Should equal 15 sum(1, 2, 3, 4, 5);

// Should equal 0 sum(5, null, -5);

// Should equal 10

sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1, 'E', 1, 'F', 1, 'G', 1);

// Should equal 0.3, not 0.30000000000000004

sum(0.1, 0.2);

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(二) 参考：

function sum() {

var nResult = 0;

for (var i = 0, l = arguments.length; i < l; i++) {

nResult += window.parseFloat(arguments[i]) || 0;

}

return nResult.toFixed(3) * 1000 / 1000;

}

6.

[填空题]

删除给定数组中的第二项和第三项，并且在得到的新的数组中第二项后面添加一个新的值：

var arr1 = ['a','b','c','d','e'];

var arr2 = arr1. 1 ( 2 , 3 ,'newvalue')

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(二)

答案：splice 1 2

7.

[填空题]

在空白处填入适当的代码使输出结果成立：

function showMoney( ) {

};

var personA = new Object; var personB = new Object; personA.money= "100";

personB.money= "150"; personA.showMoney= showMoney; personB.showMoney= showMoney;

输出结果： personA.showMoney( ); //"100" personB.showMoney( ); //"150"

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(二) 答案：return this.money;

8.

[填空题]

使用 for in 循环数组中的元素会枚举原型链上的所有属性，过滤这些属性的方式是使用 1 函数

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(二) 答案：hasOwnProperty

9.

[问答题]

请实现一个 fibonacci 函数，要求其参数和返回值如下所示：

/**

*@desc: fibonacci

*@param: count {Number}

*@return: result {Number} 第 count 个 fibonacci 值，计数从 0 开始

fibonacci 数列为：[1, 1, 2, 3, 5, 8, 13, 21, 34 „]

则 getNthFibonacci(0)返回值为 1

则 getNthFibonacci(4)返回值为 5

function getNthFibonacci(count) {

}

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一) 参考：

function getNthFibonacci(count) { if (count <= 1) {

return 1;

}

return getNthFibonacci(count - 1) + getNthFibonacci(count - 2);

}

10.

[填空题]

输出对象中值大于 2 的 key 的数组

var data = {a: 1, b: 2, c: 3, d: 4}; Object.keys(data).filter(function(x) { return 1 ;}) 期待输出：[“c”,”d”]

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一)

答案：data[x] > 2

11.

[填空题]

填写内容让下面代码支持 a.name = “name1”; b.name = “name2”; function obj(name){

}

obj. 2 = "name2";

var a = obj("name1"); var b = new obj;

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一)

答案：if (name) { this.name = name; } return this; prototype.name

12.

[填空题]

javascript 语言特性中，有很多方面和我们接触的其他编程语言不太一样，比如说， javascript 语言实现继承机制的核心就是 1 ，而不是 Java 语言那样的类式继承。Javascript 解析引擎在读取一个 Object 的属性的值时，会沿着 2 向上寻找，如果最终没有找到，则该属性值为 3 ；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当 javascript 解析引擎执行“给一个 Object 的某个属性赋值”的时候，如果当前 Object 存在该属性，则改写该属性的值，如果当前的 Object 本身并不存在该属性，则赋值该属性的值。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一)

答案：prototype 原型链 undefined

13.

[单选题]

下面有关 html 的描述，不推荐的是？

1. 在页面顶部添加 doctype 声明；
2. 在 </head> „ <body> 中间插入 HTML 代码；
3. 避免使用 <font> 标签；
4. 使用 <table> 元素展现学生成绩表等数据。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一) 答案：B

14.

[单选题]

下面关于 CSS 布局的描述，不正确的是？

A.块级元素实际占用的宽度与它的 width 属性有关； B.块级元素实际占用的宽度与它的 border 属性有关； C.块级元素实际占用的宽度与它的 padding 属性有关；

D.块级元素实际占用的宽度与它的 background 属性有关。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一) 答案：D

15.

[单选题]

下列事件哪个不是由鼠标触发的事件（）

A.click B.contextmenu C.mouseout D.keydown

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2016 前端开发工程师笔试(一) 答案：D

16.

[问答题]

js 如何获取和设置 cookie？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

// 创建 cookie

function setCookie(name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

if (expires instanceof Date) {

cookieText += '; expires=' + expires;

}

if (path) {

cookieText += '; expires=' + expires;

}

if (domain) {

cookieText += '; domain=' + domain;

}

if (secure) {

cookieText += '; secure';

}

document.cookie = cookieText;

}

// 获取 cookie

function getCookie(name) {

var cookieName = encodeURIComponent(name) + '=';

var cookieStart = document.cookie.indexOf(cookieName); var cookieValue = null;

if (cookieStart > -1) {

var cookieEnd = document.cookie.indexOf(';', cookieStart); if (cookieEnd == -1) {

cookieEnd = document.cookie.length;

}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

}

return cookieValue;

}

// 删除 cookie

function unsetCookie(name) {

document.cookie = name + "= ; expires=" + new Date(0);

}

17.

[问答题]

请说说 cache-control 是怎么回事？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

网页的缓存是由 HTTP 消息头中的“Cache-control”来控制的，常见的取值有 private、no-cache、max-age、must-revalidate 等，默认为 private。

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查（发请求），等同 max-age 的效果。但是如果同时存在，则被 Cache-Control 的 max-age 覆盖。

Expires = "Expires" ":" HTTP-date

例如：

Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是 GMT 格式）如果把它设置为-1，则表示立即过期

Expires 和 max-age 都可以用来指定文档的过期时间，但是二者有一些细微差别

Expires 在 HTTP/1.0 中已经定义，Cache-Control:max-age 在 HTTP/1.1 中才有定义，为了向下兼容，仅使用 max-age 不够。
Expires 指定一个绝对的过期时间(GMT 格式),这么做会导致至少 2 个问题：
1. 客户端和服务器时间不同步导致 Expires 的配置出现问题。
2. 很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象
max-age 指定的是从文档被访问后的存活时间，这个时间是个相对值(比如:3600s)，相对的是文档第一次被请求时服务器记录的 Request_time(请求时间)
Expires 指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime)，而

max-age 相对对的是文档的请求时间(Atime)

如果值为 no-cache,那么每次都会访问服务器。如果值为 max-age，则在过期之前不会重复访问服务器。

18.

[问答题]

你了解 HTTP 状态码吗，请随便介绍一下。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

100 Continue 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息

OK 正常返回信息
Created 请求成功并且服务器创建了新的资源
Accepted 服务器已接受请求，但尚未处理

Moved Permanently 请求的网页已永久移动到新位置
Found 临时性重定向
See Other 临时性重定向，且总是使用 GET 请求新的 URI
Not Modified 自从上次请求后，请求的网页未修改过

Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
Unauthorized 请求未授权

403 Forbidden 禁止访问

404 Not Found 找不到如何与 URI 相匹配的资源

500 Internal Server Error 最常见的服务器端错误

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

19.

[问答题]

js 数组去重。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

有两个地方需要注意：1、返回值是否是当前引用，2、“重复”的判断条件。

Array.prototype.uniq = function () {

// 长度只有 1，直接返回当前的拷贝if (this.length <= 1) {

return this.slice(0);

}

var aResult = [];

for (var i = 0, l = this.length; i < l; i++) { if (!_fExist(aResult, this[i])) {

aResult.push(this[i]);

}

return aResult;

// 判断是否重复

function _fExist(aTmp, o) { if (aTmp.length === 0) {

return false;

}

var tmp;

for (var i = 0, l = aTmp.length; i < l; i++) { tmp = aTmp[i];

if (tmp === o) {

return true;

isNaN(o)) {

}

// NaN 需要特殊处理

if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) &&

return true;

}

return false;

}

20.

[问答题]

如何获取 UA？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

function whatBrowser() { document.Browser.Name.value=navigator.appName; document.Browser.Version.value=navigator.appVersion; document.Browser.Code.value=navigator.appCodeName; document.Browser.Agent.value=navigator.userAgent;

}

21.

[问答题]

说说对网站重构的理解。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变 UI 的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为 DIV + CSS
使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的)
对于移动平台的优化
针对于 SEO 进行优化
深层次的网站重构应该考虑的方面
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的 API
代替旧有的框架、语言(如 VB)
增强用户体验
通常来说对于速度的优化也包含在重构中
压缩 JS、CSS、image 等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用 CDN 来加速资源加载
对于 JS DOM 的优化

HTTP 服务器的文件缓存

22.

[问答题]

js 对象的深度克隆代码实现。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

function clone(Obj) { var buf;

if (Obj instanceof Array) {

buf = []; // 创建一个空的数组

var i = Obj.length; while (i--) {

buf[i] = clone(Obj[i]);

}

return buf;

} else if (Obj instanceof Object){

buf = {}; // 创建一个空对象

for (var k in Obj) { // 为这个对象添加新的属性

buf[k] = clone(Obj[k]);

}

return buf;

}else{

return Obj;

}

23.

[问答题]

Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

AJAX 的全称是异步的 Javascript 和 XML ，是一种创建快速动态的技术，通过在后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的情况下，做到网页的部分刷新；
AJAX 的交互模型（ AJAX 的过程）
1. 用户发出异步请求；

1. 创建 XMLHttpRequest 对象；
2. 告诉 XMLHttpRequest 对象哪个函数会处理 XMLHttpRequest 对象状态的改变，为此要把对象的 onReadyStateChange 属性设置为响应该事件的JavaScript 函数的引用
3. 创建请求，用 open 方法指定是 get 还是 post ，是否异步， url 地址；
4. 发送请求， send 方法
5. 接收结果并分析
6. 实现刷新
同步：脚本会停留并等待服务器发送回复然后再继续异步：脚本允许页面继续其进程并处理可能的回复
跨域问题的解决
1. 使用 document.domain+iframe 解决跨子域问题
2. 使用 window.name
3. 使用 flash
4. 使用 iframe+location.hash
5. 使用 html5 的 postMessage ；
6. 使用 jsonp （创建动态 script ）

24.

[问答题]

事件、IE 与火狐的事件机制有什么区别？如何阻止冒泡？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为
事件处理机制：IE 是事件冒泡、firefox 同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
ev.stopPropagation();

注意旧 ie 的方法：ev.cancelBubble = true;

25.

[问答题]

WEB 应用从服务器主动推送 Data 到客户端有那些方式？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

html5 websoket
WebSocket 通过 Flash

XHR 长时间连接
XHR Multipart Streaming
不可见的 Iframe
<script>标签的长时间连接(可跨域)

26.

[问答题]

怎么重构页面？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

编写 CSS
让页面结构更合理化，提升用户体验
实现良好的页面效果和提升性能

27.

[问答题]

JavaScript 原型，原型链 ? 有什么特点？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

28.

[问答题]

Node.js 的适用场景

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

高并发
聊天
实时消息推送

29.

[问答题]

写一个通用的事件侦听器函数

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

// event(事件)工具集，来源：github.com/markyun markyun.Event = {

// 页面加载完成后

readyEvent : function(fn) { if (fn==null) {

fn=document;

}

var oldonload = window.onload;

if (typeof window.onload != 'function') { window.onload = fn;

} else {

window.onload = function() { oldonload();

fn();

};

}

// 视能力分别使用 dom0||dom2||IE 方式来绑定事件

// 参数：操作的元素,事件名称 ,事件处理程序addEvent : function(element, type, handler) {

if (element.addEventListener) {

//事件类型、需要执行的函数、是否捕捉element.addEventListener(type, handler, false);

} else if (element.attachEvent) { element.attachEvent('on' + type, function() {

handler.call(element);

});

} else {

element['on' + type] = handler;

}

// 移除事件

removeEvent : function(element, type, handler) { if (element.removeEnentListener) {

element.removeEnentListener(type, handler, false);

} else if (element.datachEvent) { element.detachEvent('on' + type, handler);

} else {

element['on' + type] = null;

}

// 阻止事件 (主要是事件冒泡，因为 IE 不支持事件捕获) stopPropagation : function(ev) {

if (ev.stopPropagation) { ev.stopPropagation();

} else {

ev.cancelBubble = true;

}

// 取消事件的默认行为

preventDefault : function(event) { if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

// 获取事件目标

getTarget : function(event) {

return event.target || event.srcElement;

// 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event； getEvent : function(e) {

var ev = e || window.event; if (!ev) {

var c = this.getEvent.caller; while (c) {

ev = c.arguments[0];

if (ev && Event == ev.constructor) { break;

}

c = c.caller;

}

return ev;

}

};

30.

[问答题]

eval 是做什么的，有什么建议？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

它的功能是把对应的字符串解析成 JS 代码并运行
应该避免使用eval，不安全，非常耗性能（2 次，一次解析成 js 语句，一次执行）

31.

[问答题]

哪些地方会出现 css 阻塞，哪些地方会出现 js 阻塞？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

js 的阻塞特性：所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css 文件等）。

由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。

嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了

(在测试观察中，IE6 下 CSS 都是阻塞加载）

当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。

嵌入 JS 应该放在什么位置？

放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
如果嵌入 JS 放在 head 中，请把嵌入 JS 放在 CSS 头部。
使用 defer（只支持 IE）。
不要在嵌入的 JS 中调用运行时间较长的函数，如果一定要用，可以用 setTimeout 来调用。

Javascript 无阻塞加载具体方式：

将脚本放在底部。<link>还是放在 head 中，用以保证在 js 加载前，能加载出正常显

示的页面。<script>标签放在</body>前。

阻塞脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script> 总数也可以改善性能。适用于内联脚本和外部脚本。
非阻塞脚本：等页面完成加载后，再加载 js 代码。也就是，在 window.onload 事件发出后开始下载代码。
defer 属性：支持 IE4 和 fierfox3.5 更高版本浏览器
动态脚本元素：文档对象模型（DOM）允许你使用 js 动态创建 HTML 的几乎全部文档内容。代码如下：

var script=document.createElement("script"); script.type="text/javascript"; script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);

</script>

此技术的重点在于：无论在何处启动下载，文件额下载和运行都不会阻塞其他页面处理过程，即使在head 里（除了用于下载文件的 http 链接）。

32.

[问答题]

GET 和 POST 的区别，何时使用 POST？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在

2000 个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制GET 方式需要使用 Request.QueryString 来取得变量的值

POST 方式通过 Request.Form 来获取变量的值

也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

33.

[问答题]

什么是 "use strict"; ? 使用它的好处和坏处分别是什么？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测

参考：

ECMAscript 5 添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得 Javascript 在更严格的条件下运行。

设立"严格模式"的目的，主要有以下几个：

消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的 Javascript 做好铺垫。

注：经过测试 IE6,7,8,9 均不支持严格模式。缺点：

现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

34.

[问答题]

请解释一下 JavaScript 的同源策略。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

概念：

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制：

我们举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了。

35.

[问答题]

Flash、Ajax 各自的优缺点，在使用中如何取舍？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

Flash：

Flash 适合处理多媒体、矢量图形、访问机器
对 CSS、处理文本上不足，不容易被搜索

Ajax：

Ajax 对 CSS、文本支持很好，支持搜索
多媒体、矢量图形、机器访问不足共同点：

与服务器的无刷新传递消息
可以检测用户离线和在线状态
操作 DOM

36.

[问答题]

什么叫优雅降级和渐进增强？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

优雅降级：Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题，针对不同版本的 IE 的 hack 实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

37.

[问答题]

哪些操作会造成内存泄漏？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

38.

[问答题]

.call() 和 .apply() 的作用？

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师进阶检测参考：

动态改变某个类的某个方法的运行环境

39.

[单选题]

现有如下 html 结构

<ul>

<li>click me</li>

</ul>

运行如下代码：

var elements=document.getElementsByTagName('li'); var length=elements.length;

for(var i=0;i<length;i++){ elements[i].onclick=function(){

alert(i);

}

依次点击 4 个 li 标签，哪一个选项是正确的运行结果（）? A.依次弹出 1，2，3，4

B.依次弹出 0，1，2，3

C.依次弹出 3，3，3，3

D.依次弹出 4，4，4，4

----------------------------------------------------------------------------------------------------------------------------

来自：搜狗 2015 前端工程师笔试题答案：D

40.

[ 单选题 ] function Foo(){

var i=0;

return function(){ document.write(i++);

}

var f1=Foo(), f2=Foo();

f1();

f2();

请问以上程序的输出是（）

A.010 B.012 C.000 D.011

----------------------------------------------------------------------------------------------------------------------------

来自：搜狗 2015 前端工程师笔试题答案：A

这是一个闭包，闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

这里的局部变量 i，对 f1()来说是全局变量，对 f2()来说也是全局变量，但是 f1()的 i 跟f2()的 i 又是相互独立相互不可见的，f1()每执行一次，f1()的 i 就加 1，f2（）每次执行一次， f2()的 i 就加油，但是相互之间不影响，因此结果是 010。

41.

[单选题]

以下 Js 程序的输出是什么（）

var a="undefined"; var b="false";

var c="";

function assert(aVar){ if(aVar)

alert(true);

else

}

alert(false);

assert(a); assert(b); assert(c);

</SCRIPT>

A.true，true，true B.true，true，false C.false，false，true D.false，false，false

----------------------------------------------------------------------------------------------------------------------------

来自：搜狗 2015 前端工程师笔试题答案：B

unedfined 和false 都是 Javascript 的数据类型，但是用双引号引起了就不是本身类型了，这是字符串，空串相当于 false，否则是 true

42.

[单选题]

JavaScript 定义 var a="40",var b=7,则执行 a%b 会得到()。

A.5 B."5"

C.undefined D.null

----------------------------------------------------------------------------------------------------------------------------

来自：搜狗 2015 前端工程师笔试题答案：A

Javascript 是弱类型语言，但是明显字符串“40”不能用于 % 运算符，所以会根据后面的类型进行转化，最后结果是 5。

43.

[问答题]

请实现 javascript 中的 indexOf 功能，判断一个字符串 a 中是否包含另一个字符串 b。a）如果包含，需要返回匹配字符串 b 的位置。

b）如果不包含，需要返回-1。

如：indexOf("hello","el") return 1。

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿网前端工程师笔试题参考：

function indexOf(str,subStr){

var result =str.match(subStr); return result ? result.index : -1;

}

或

function indexOf(a, b){

return a.search(b);

}

44.

[单选题]

var myObject = {

foo: "bar",

func: function() { var self = this;

console.log(this.foo); console.log(self.foo); (function() {

console.log(this.foo); console.log(self.foo);

}());

}

};

myObject.func();

程序的输出是什么？

bar bar bar bar
bar bar bar undefined
bar bar undefined bar D.undefined bar undefined bar

----------------------------------------------------------------------------------------------------------------------------

来自：百度前端工程师笔试题答案：C

理解关键：方法/函数是由谁(对象) 调用的，方法/函数内部的 this 就指向谁(该对象)；注意：被谁调用，不是处于谁的作用域，即使在作用域

1、func 是由 myObject 调用的，this 指向 myObject。

2、self 指向 myObject，相当于 myObject 的 this 的副本。

3、这个立即执行匿名函数表达式（IIFE）是由 window 调用的，this 指向 window 。

4、IIFE 的作用域处于 myObject.func 的作用域中，本作用域找不到 self 变量，沿着作用域链向上查找self 变量，找到了指向 myObject 对象的 self。

45.

[不定项选择题]

下面关于 IE、FF 下面脚本的区别描述错误的是？ A.innerText IE 支持，FIREFOX 不支持B.document.createElement FIREFOX 支持，IE 不支持C.setAttribute('class'，'styleClass') FIREFOX 支持，IE 不支持

D.用 setAttribute 设置事件 FIREFOX 不支持，IE 支持

----------------------------------------------------------------------------------------------------------------------------

来自：百度前端工程师笔试题参考：

A 描述正确，请参考这里 http://w3help.org/zh-cn/causes/SD9017 B 描述错误，请参考这里 http://w3help.org/zh-cn/causes/SD9010 C 描述正确，请参考这里 http://w3help.org/zh-cn/causes/SD9006

D 选项描述不清楚，其实都可以的，只是形式不同，具体参考这里

http://w3help.org/zh-cn/causes/SD9006

可以看到，在 IE8(S) Firefox Chrome Safari Opera 中，结果符合规范。而在 IE6 IE7 IE8(Q) 中，无法通过 setAttribute 方法传入一段代码字符串设置一个元素的内联事件，而必须传入一个 function 类型的对象；获取一个已有的内联事件的属性值也是 function 类型，而不是规范中的字符串类型。

46.

[单选题]

下面有关 JavaScript 中 call 和 apply 的描述，错误的是？

call 与 aplly 都属于 Function.prototype 的一个方法，所以每个 function 实例都有 call、apply 属性
两者传递的参数不同，call 函数第一个参数都是要传入给当前对象的对象，apply 不是
apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
call 传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估答案：B

call（）方法和 apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。（在使用 call

（）方法时，传递给函数的参数必须逐个列举出来。使用 apply（）时，传递给函数的是参数数组）如下代码做出解释：

function add(c, d){

return this.a + this.b + c + d;

}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

47.

[不定项选择题]

下面哪些方法可以用作 javascript 异步模式的编程？

A.回调函数B.事件监听C.发布/订阅

D.Promises 对象

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估答案：abcd

回调函数f1();

f2();

function f1(callback){ setTimeout(function () {

// f1 的任务代码

callback();

}, 1000);

} f1(f2);

事件监听 f1.on('done', f2); function f1(){ setTimeout(function () {

// f1 的任务代码

f1.trigger('done');

}, 1000);

}

发布/订阅jQuery.subscribe("done", f2); function f1(){ setTimeout(function () {

// f1 的任务代码

jQuery.publish("done");

}, 1000);

}

jQuery.unsubscribe("done", f2); 4.Promises 对象

f1().then(f2); function f1(){

var dfd = $.Deferred(); setTimeout(function () {

// f1 的任务代码

dfd.resolve();

}, 500);

return dfd.promise;

}

指定多个回调函数：

f1().then(f2).then(f3);

指定发生错误时的回调函数：

f1().then(f2).fail(f3);

48.

[单选题]

下面有关 javascript 常见事件的触发情况，描述错误的是？

A.onmousedown：某个鼠标按键被按下B.onkeypress：某个键盘的键被按下或按住C.onblur：元素获得焦点

D.onchange：用户改变域的内容

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估答案：c

onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件onchange:当文字值改变时，产生该事件onselect:当文字加亮后，产生该事件onClick：当组件被点击时产生的事件

49.

[不定项选择题]

下面有关 javascript 内部对象的描述，正确的有？ A.History 对象包含用户（在浏览器窗口中）访问过的 URL B.Location 对象包含有关当前 URL 的信息

C.Window 对象表示浏览器中打开的窗口

D.Navigator 对象包含有关浏览器的信息

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯 2015 春招web 前端开发练习卷答案：abcd

Navagator：提供有关浏览器的信息。

Window：Window 对象处于对象层次的最顶层，它提供了处理 Navagator 窗口的方法和属性。

Location：提供了与当前打开的 URL 一起工作的方法和属性，是一个静态的对象。

History：提供了与历史清单有关的信息。

Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用。

50.

[单选题]

下面有关 javascript 系统方法的描述，错误的是？

parseFloat 方法：该方法将一个字符串转换成对应的小数
isNaN 方法：该方法用于检测参数是否为数值型，如果是，返回 true，否则，反回 false。
escape 方法：该方法返回对一个字符串编码后的结果字符串
eval 方法：该方法将某个参数字符串作为一个 JavaScript 执行

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估答案：B

NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。

针对NaN 的特点，ECMAScript 定义了 isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10” 或 Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回 true。

51.

[单选题]

下面符合一个有效的 javascript 变量定义规则的是？

_ 2
with

C.a bc D.2a

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估答案：A

52.

[不定项选择题]

下面属于 javascript 基本数据类型的有？

A.字符串 B.数字C.null D.undefined

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯 2015 春招web 前端开发练习卷答案：abcd

ECMAScript 中有 5 个简单数据类型（也成为基本数据类型）: Undefined、Null、Boolean、 Number 和 String。还有一种复杂数据类型-Object，Object 本质上是由一种无序的名值对组成的。

53.

[单选题]

js 中字符串连接用那个比较高效？

A.a+=b

B.a = a+b C.Array.join() D.Array.push()

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估答案：C

javascript 中字符串连接时用 Array.join()替换 string += "xx"，换来几十倍的速度提升。

54.

[单选题]

请给出这段代码的运行结果（）

var bb = 1; function aa(bb) {

bb = 2; alert(bb);

};

aa(bb); alert(bb);

</SCRIPT>

B.1 2

C.2 1

D.2 2

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师能力评估

答案：C

ECMAScript 中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把一个值从一个变量复制到另外一个变量一样。基本类型的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。

在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用 ECMAScript 的概念来说，就是 arguments 对象中的一个元素）。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。

55.

[单选题]

下面这个 JS 程序的输出是什么：

function Foo() {

var i = 0;

return function() { console.log(i++);

}

var f1 = Foo(),

f2 = Foo();

f1();

f2();

A.0 1 0

B.0 1 2

C.0 0 0

D.0 0 2

----------------------------------------------------------------------------------------------------------------------------

来自：搜狐答案：A

56.

[单选题]

在文件 /home/somebody/workspace/somemodule.js 中第一行引用了一个模块：

require(‘othermodule‘)，请问 required 的查找模块的顺序

/home/somebody/workspace/mode_modules/othermodule/index.js
/home/somebody/workspace/mode_modules/othermodule. Js C.CORE MODULES named othermodule D./home/somebody/mode_modules/othermodule/index.js

A.C D A B

B.C B D A

C.C B A D

D.C D B A

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴答案：C

:首先，Node 在当前目录下查找 package.json(CommonJS 包规范定义的包描述文件)，通过 JSON.parse()解析出包描述对象，从中取出 main 属性指定的文件名进行定位。如果文件缺少扩展名，将会进入扩展名分析的步骤。
:而如果 main 属性制定的文件名错误，或者压根没有 package.json 文件，Node 会将

index 当做默认文件名，然后依次查找 index.js、index.node、index.json.

:如果在目录分析的过程中没有定位成功任何文件，则自定义模块进入下一个模块路径进行查找。如果模块路径数组都被遍历完毕，依然没有查找到目标文件，则会抛出查找失败异常。

按照上面的思路，首先应该查找 package.json 文件，看看里面有没有核心模块，应该是C 最先，othermodule 不是核心模块，那么接着应该进入扩展名分析的步骤，就应该是查找othermodule. js，对应 B，紧接着就是以 index 为默认文件名，也就是A，再接下来就是上一个文件目录D 了，

57.

[不定项选择题]

下面哪些方式可以用于 javascript 延迟加载？

通过 ajax 下载 js 脚本，动态添加script 节点
通过监听 onload 事件，动态添加script 节点
直接将 script 节点放置在之前，这样 js 脚本就会在页面显示出来之后再加载
使用 script 标签的 defer 和 async 属性

----------------------------------------------------------------------------------------------------------------------------

来自：百度答案：ABD

58.

[单选题]

如下代码输出的结果是什么：

console.log(1+ "2"+"2");

console.log(1+ +"2"+"2");

console.log("A"- "B"+"2");

console.log("A"- "B"+2);

A.122 122 NaN NaN

B.122 32 NaN NaN2

C.122 32 NaN2 NaN

D.122 32 NaN2 NaN2

----------------------------------------------------------------------------------------------------------------------------

来自：百度答案：C

console.log(1+ "2"+"2");

做加法时要注意双引号，当使用双引号时，JavaScript 认为是字符串，字符串相加等于字符串合并。

因此，这里相当于字符串的合并，即为

console.log(1+ +"2"+"2");

第一个+"2"中的加号是一元加操作符，+"2"会变成数值 2，因此 1+ +"2"相当于 1+2=3.

然后和后面的字符串“2”相合并，变成了字符串"32". 3.

console.log("A"- "B"+"2");

"A"-"B"的运算中，需要先把"A"和"B"用Number 函数转换为数值，其结果为NaN，在剪发操作中，如果有一个是NaN，则结果是 NaN，因此"A"-"B"结果为 NaN。

然后和"2"进行字符串合并，变成了NaN2. 4.

console.log("A"- "B"+2);

根据上题所述，"A"-"B"结果为 NaN，然后和数值 2 进行加法操作，在加法操作中，如果有一个操作数是NaN，则结果为NaN。

59.

[单选题]

下面有关浏览器中使用 js 跨域获取数据的描述，说法错误的是？

A.域名、端口相同，协议不同，属于相同的域B.js 可以使用 jsonp 进行跨域

通过修改 document.domain 来跨子域
使用 window.name 来进行跨域

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴答案：A

只要协议、域名、端口有任何一个不同, 都被当作是不同的域。

60.

[问答题]

阅读下列程序，写出 x，y，z 最后的值。

var x = 1, y = z = 0; function add(n)

{

return n = n + 1;

}

y = add(x); function add(n)

{

return n = n + 3;

}

z = add(x);

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

x=1 y=4 z=4

js 的预编译会将

function add(n)

{

return n = n + 3;

}

去覆盖前面的 add 方法。

var y = z = 0

这里面 z 变量会变为 window.z=0;这里需要注意的

61.

[不定项选择题]

如何规避 javascript 多人开发函数重名问题。

根据不同的开发人员实现的功能，在函数名加前缀
每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性
以上都不正确

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯 2015 春招答案：AB

A，函数名之前加上开发人员特有的前缀，可以有效避免重名问题B，类的封装是面向对象程序设计语言规避重名问题的有效途径

62.

[单选题]

下列 js 可以让一个 input 的背景颜色变成红色的是？ A.inputElement.style.backgroundColor = 'red'; B.inputElement.backgroundColor = 'red'; C.inputElement.style.backgroundColor = '#0000';

D.inputElement.backgroundColor = '#0000';

----------------------------------------------------------------------------------------------------------------------------

来自：百度答案：A

B 没有 style

C 和 D 是因为红色#0000 应该为#FF0000

63.

[不定项选择题]

下列关于比较 Ajax 与 Flash 的优缺点，相关描述正确的是？

Ajax 的优势在意在于可搜索性，开放性，易用性及易于开发
Flash 的优势在于多媒体处理，可以更容易的调用浏览器以外的外部资源
Ajax 最主要的批评就是它可能破坏浏览器的后退功能
flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间

----------------------------------------------------------------------------------------------------------------------------

来自：百度答案：A B C D

1. Ajax 的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。
2. Flash 的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度
3. Ajax 的劣势：1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中，不过这些都有相关方法解决。
4. Flash 的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 4.性能问题

64.

[不定项选择题]

下面哪些语句可以在 JS 里判断一个对象oStringObject 是否为 String。A.oStringObject instanceof String

B.typeof oStringObject == 'string' C.oStringObject is String

D.以上答案都不正确

----------------------------------------------------------------------------------------------------------------------------

来自：百度答案：A

通常来说判断一个对象的类型使用typeof，但是在new String 的情况下的结果会是object

此时需要通过 instanceof 来判断

65.

[单选题]

flash 和 js 通过什么类如何交互? A.ExtensionContex B.ExternalInterface C.IInterpolator D.FlexContentHolder

----------------------------------------------------------------------------------------------------------------------------

来自：网易答案：B

Flash 提供了 ExternalInterface 接口与 JavaScript 通信，ExternalInterface 有两个方法，call 和 addCallback，call 的作用是让 Flash 调用 js 里的方法，addCallback 是用来注册 flash 函数让js 调用。

66.

[问答题]

Flappy Bird 是风靡一时的手机游戏，玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在 HTML 前端开发这个游戏，为了保证游戏的流畅运行，并长时间运行也不会崩溃，请列举开发要注意的性能问题和解决的方法。

----------------------------------------------------------------------------------------------------------------------------

来自：百度 2015 前端研发笔试卷参考：

长时间运行会崩溃的原因就是‘内存泄漏’。我们在日常的 JS 程序中并不太在意内存泄漏问题，因为 JS 解释器会垃圾回收机制，大部分无效内存会被回收，另一方方面 JS 运行在客户端，即使出现内存泄漏也不是太大的问题，简单的刷新页面即可。但是，如果出现要预防内存泄漏的场景还是要注意一些问题。
针对这个场景来说，即时长期运行出现内存泄漏可能还是很低。第一方面，数据量很少，水管维护一个数组即可，然后每隔一段时间更新数组，来达到水管长度不同的效果。小鸟只要维护一个对象即可。通过移动水管检查碰撞来就可以实现游戏逻辑。因为在浏览器端， JS 程序和页面 UI 渲染共用一条线程，如果计算时间过长会使渲染阻塞，在 HTML5 中利用webworker 已经可以开辟一个新线程专门负责计算解决这个问题了。

背景的卷轴效果优化。背景不能是无限长的图片拼接，必须有回收已移出的场景的方法。将复杂运算从主 UI 线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等，需要在空

闲时间片运算，不能和 UI 动画同时进行。

将比较大的运算分解成不同的时间片，防止阻塞主 UI 线程。最好使用 webworker。注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。

进行预处理。将一些常用的过程进行预处理，

控制好帧率。将 1 秒分解成多个时间片，在固定间隔时间片进行 UI 动画，其他时间片用在后台运算。

通过 GPU 加速和 CSS transition 将小鸟飞行动画和背景动画分离

……

67.

[问答题]

用 javascript 实现用户登录验证的代码。

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯 2015 春招web 前端开发练习卷参考：

<!DOCTYPE html>

<html>

content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

<body>

</form>

function subimtonclick(){

var form1=document.getElementById('form1'); if(form1.text1.value==""){

alert("用户名不能为空"); form1.text1.focus(); return;

}

if(form1.text1.value.length<6 || form1.text1.value.length>10){ alert("用户名不能少于六个字符，不能超过十个字符"); form1.text1.focus();

return;

}

if(form1.pwd.value==""){ alert("密码不能为空"); form1.pwd.focus(); return;

}

if(form1.pwd.value.length<6 || form1.pwd.value.length>10){ alert("密码不能少于六个字符，不能超过十个字符"); form1.pwd.focus();

return;

}

var str="用户名："+form1.text1.value+"<br>"+ "密码："+form1.pwd.value+"<br>";

</script>

</body>

</html>

document.writeln(str);

}

68.

[问答题]

请说明下面各种情况的执行结果，并注明产生对应结果的理由。

function doSomething() { alert(this);

}

① element.onclick = doSomething，点击 element 元素后。

② element.onclick = function() {doSomething()}，点击 element 元素后。

③ 直接执行 doSomething()。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

①弹出 element object，通过函数赋值方式，this 直接指向 element 对象

②弹出 window object，this 是写在 doSomething 这个函数里面的，而这种方式的事件绑定写法并没有将element 对象传递给 this，而在默认情况下 this 指向 window

③弹出 window object，没有绑定对象的情况下 this 默认指向window

69.

[问答题]

请用 JavaScript 语言实现 sort 排序函数，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5,

6, 100]。

如果你有多种解法，请阐述各种解法的思路及优缺点。（仅需用代码实现一种解法，其它解法用文字阐述思路即可）

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

/*快速排序实现方法*/ function quickSort(arr){

//长度少于 1 直接返回

if(arr.length <= 1){ return arr;

}

var less = new Array();

var greater = new Array();

//选择一个值做为基准

var pivotIndex = Math.floor(arr.length / 2); var pivot = arr.splice(pivotIndex, 1) [0];

//遍历数组

for(var i = 0; i<arr.length; i++ ){ if( arr[i] < pivot ){ less.push(arr[i]);

}else{ greater.push(arr[i]);

}

//递归调用返回排序好的数组

return quickSort(greater).concat([pivot], quickSort(less));

}

70.

[问答题]

请根据下面的描述，用 JSON 语法编写一个对象: “小明今年 22 岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年 25 岁，职业是护士。还有一个叫小芳，

今年 23 岁，是一名小学老师。”

var person = ?

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

var person = {

name:"小明",

from:"杭州",

interest:["电影","旅游"], sisters:[

{ name:"小芬", age:25, occupation:"护士"},

{ name:"小芳", age:23, occupation:"小学老师"}

]

}

71.

[问答题]

请给Array 本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯 2015 春招web 前端开发练习卷参考：

Array.prototype.distinct = function() { var ret = [];

for (var i = 0; i < this.length; i++)

{

for (var j = i+1; j < this.length;) { if (this[i] === this[j]) {

ret.push(this.splice(j, 1)[0]);

} else {

j++;

}

return ret;

}

//for test alert(['a','b','c','d','b','a','e'].distinct());

72.

[问答题]

请把以下用于连接字符串的 JavaScript 代码修改为更有效率的方式

var htmlString =

"<div class=”container”>" + "<ul id=”news-list”>"; for (var i = 0; i < NEWS.length; i++) {

htmlString += "<li><a href=”"

+ NEWS[i].LINK + ">"

+ NEWS[i].TITLE + "</a></li>";

}

htmlString += "</ul></div>";

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

JavaScript 赋值效率问题

var htmlString = "<div class=”container”>" + "<ul id=”news-list”>"; for (var i = 0; i < NEWS.length; i++)

{

var newsItem = NEWS[i];

htmlString += "<li><a href=”" + newsItem.LINK + ">"

+ newsItem.TITLE + "</a></li>";

}

htmlString += "</ul></div>";

73.

[问答题]

请编写一个JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：

var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2... ”

var obj = parseQueryString(url); alert(obj.key0) // 输出 0

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2.......... ";

var obj = parseQueryString(url); alert(obj.key2);

function parseQueryString(argu){ var str = argu.split('?')[1];

var result = {};

var temp = str.split('&'); for(var i=0; i<temp.length; i++)

{

var temp2 = temp[i].split('='); result[temp2[0]] = temp2[1];

}

return result;

}

74.

[问答题]

请给JavaScript 的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求

alert(" taobao".trim()); // 输出 "taobao" alert(" taobao ".trim()); // 输出 "taobao"

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

//版本一、速度最快String.prototype.trim=function(){

var str=this;

var whitespace='\n\r\t\f\x0b\xa0\u2001\u2002\u2003\n\u2004\u2005\u2006\u2007\u2008\u

2009\u200a\u200b\u2028\u2029\u3000'; for(var i=0;i<str.length;i++){

if(whitespace.indexOf(str.charAt(i))==-1){ str=str.substring(i);

break;

}

for(i=str.length-1;i>=0;i--){ if(whitespace.indexOf(str.charAt(i))==-1){ str=str.substring(0,i+1);

break;

}

return whitespace.indexOf(str.charAt(0))===-1?str:'';

}

//版本二、速度也很快String.prototype.trim=function(){ var str=this;

str.replace(/^\s+/,'');

for(var i=str.length-1;i>=0;i++){ if(/\S/.test(str.charAt(i))){ str=str.substring(0,i+1);

break;

}

return str;

}

//版本三很通用String.prototype.trim=function(){ var str=this;

return str.replace(/^\s\s*/,'').replace(/\s\s*$/,'');

}

75.

[问答题]

下面是个输入框

当没有获取焦点时，显示灰色的提示信息：

当用户输入时，隐藏提示文字，且恢复为默认色：

当输入框失去焦点，如果输入为空，需还原提示信息：

要求： a) 写出 HTML 和 CSS 代码 b) 用 JavaScript 实现功能

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

}

</style>

<body>

</body>

var input = document.getElementById("content"); input.onfocus = function(){

if(this.value == "请输入内容"){ this.value = "";

this.style.color = "black";

}

input.onblur = function(){ if(this.value == ""){ this.style.color = "grey"; this.value = "请输入内容";

}

</script>

</html>

76.

[问答题]

请编写一个通用的事件注册函数（请看下面的代码）。

function addEvent(element, type, handler)

{

// 在此输入你的代码，实现预定功能

}

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

function addEvent (ele,type,handler) { if ("addEventListener" in window) {

ele.addEventListener(type,handler,false);

} else if("attachEvent" in window){ ele.attachEvent('on' + type,function(){ handler.call(ele);

});

} else{

ele["on" + type] = handler;

};

}

77.

[问答题]

请编写一段 JavaScript 脚本生成下面这段 DOM 结构。要求：使用标准的 DOM 方法或属性。

</div>

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

window.onload = function() {

var div = document.createElement('div'); div.id = "example";

var p = document.createElement('p'); p.className = "slogan"; p.innerHTML = ' 淘！你喜欢 '; div.appendChild(p); document.body.appendChild(div);

}

78.

[问答题]

请分别列出 HTML、JavaScript、CSS、Java、php、python 的注释代码形式。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

// JavaScript 注释

* JavaScript 多行注释

/* CSS 注释 */

// Java 注释

/**

* Java 多行注释

// php 单行注释

# php 单行注释

/**

* php 多行注释

# Python 单行注释

'''

Python 多行注释

'''

79.

[问答题]

实现一个所见即所得编辑器. 需提供以下功能： 1. 字体加粗； 2. 文本左对齐、右对

齐、居中 3. 设置字体； 4. 设置字号； 5. 设置字体颜色； 6. 插入超链接； 7. 插入图片。

----------------------------------------------------------------------------------------------------------------------------

来自：人人网 2011 前端工程师面试题参考：

<!DOCTYPE HTML>

<html>

<head>

<title>富文本编辑器</title>

window.onload = function(){

var editor = document.getElementById("editor").children[0];

function setBtn(id, styleName){

var elm = document.getElementById(id); elm.onclick = function(){

editor.style[styleName] = setting[id] = !setting[id] ? id : "";

}

//setBtn("bold", "fontWeight"); setBtn("left", "textAlign"); setBtn("center", "textAlign"); setBtn("right", "textAlign");

function setMenu(id, styleName){

var elm = document.getElementById(id); function change(){

editor.style[id] = elm.value || elm.children[elm.selectedIndex].innerHTML;

}

change();

elm.onchange = change;

}

setMenu("color"); setMenu("fontSize"); setMenu("fontFamily");

function setChecked(id, styleName){

var elm = document.getElementById(id); function change(){

editor.style[elm.name] = elm.checked ? this.value : "";

}

change();

elm.onchange = elm.onpropertychange = change;

}

setChecked("bold"); setChecked("left"); setChecked("center"); setChecked("right");

var link = document.getElementById("link"), img = document.getElementById("img");

document.getElementById("img").onclick = function(){ var url = prompt("请输入图片 url", "http://"),

img;

if(url){

img = new Image(); img.src = url; editor.appendChild(img)

}

document.getElementById("lnk").onclick = function(){ var url = prompt("请输入链接 url", "http://"),

lnk; if(url){

lnk = document.createElement("a"); lnk.href = url;

lnk.innerHTML = prompt("请输入链接文字或者点击取消", "") || url; editor.appendChild(lnk)

}

};

</script>

padding: 100px;

}

#wrap p {

padding-bottom: 20px; line-height: 30px;

}

#wrap p * {

vertical-align: middle;

}

button {

padding: 0 10px;

}

#editor {

border: 2px inset #ccc; font-family: SimSun; overflow: hidden; cursor: text;

margin: auto;

}

#editor div{

height: 500px;

outline: none; padding: 10px;

}

</style>

</head>

<body>

<p>

对齐方式：

<button id="lnk">插入超链接</button>

<br>

设置字体

</select>

  设置字号

</select>

  设置字体颜色:

<option selected>black

<option>silver</option>

<option>white</option>

<option>maroon</option>

<option>purple</option>

<option>fuchsia</option>

<option>green</option>

<option>olive</option>

<option>yellow</option>

</select>

</p>

</div>

</body>

</html>

（预览效果：http://gucong3000.github.io/renren/editor.html）

80.

[问答题]

请编写一个 JavaScript 函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求： a) 使用正则表达式。 b) 如果有效返回 true ，反之为 false。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

function isEmail(emailstr){

var reg=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i; return reg.test(emailstr);

}

81.

[问答题]

尝试实现注释部分的 Javascript 代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：

var Obj = function(msg){ this.msg = msg; this.shout = function(){

alert(this.msg);

}

this.waitAndShout = function(){

//隔五秒钟后执行上面的 shout 方法

}

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

var Obj = function(msg){ this.msg = msg; this.shout = function(){

alert(this.msg);

}

this.waitAndShout = function(){ var that = this;

setTimeout(that.shout, 5000);

//隔五秒钟后执行上面的 shout 方法

}

return this;

}

Obj("shouting").waitAndShout();

82.

[问答题]

在页面上实现一个二级菜单控件

1. 这个控件可以绑定到页面上的任意一个元素，当点击页面元素出现菜单； 2. 菜单出现的方向根据所在页面的位置自动进行调整，例如：3. 一级菜单中的元素，鼠标划过后，将会在相应的位置出现二级菜单，二级菜单中的元素点击将会有事件响应。

----------------------------------------------------------------------------------------------------------------------------

来自：人人网 2011 前端工程师面试题参考：无

83.

[问答题]

请编写一个 JavaScript 函数 toRGB，它的作用是转换 CSS 中常用的颜色编码。要求：

alert(toRGB("#0000FF")); // 输出 rgb(0, 0, 255)

alert(toRGB("invalid")); // 输出 invalid

alert(toRGB("#G00")); // 输出 #G00

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

function toRGB(color) {

var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/

match = color.match(regex)

return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color

}

84.

[问答题]

实现 input 输入框的自动匹配

1. 对 input 框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input 框的下方； 2. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗； 3. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到 input 框中；

----------------------------------------------------------------------------------------------------------------------------

来自：人人网 2011 前端工程师面试题参考：

<!DOCTYPE HTML>

<html>

<head>

<title>文本框自动补全</title>

function autocomplete(textbox){ var $ = window.gucong;

textbox = document.querySelector(textbox);

var datalist = document.getElementById(textbox.getAttribute("list")); optList = datalist.children;

datalist = document.createElement("ul");

$.each(optList, function(){

var li = document.createElement("li"); li.setAttribute("label" ,this.getAttribute("label")); li.setAttribute("value" ,this.getAttribute("value")); datalist.appendChild(li);

});

textbox.setAttribute("list", "");

$.addClass(datalist, "datalist"); document.documentElement.appendChild(datalist);

textbox.autocomplete="off"; textbox.addEventListener("keydown", function(e){

switch(e.keyCode) { case 38: // up

e.preventDefault(); moveSelect(-1); break;

case 40: // down e.preventDefault(); moveSelect(1); break;

case 9: // tab case 13: // return

var opt = datalist.querySelector(".highlight"); if(opt){

selectOpt(opt) e.preventDefault(); return false;

}

}, true);

}

break; default:

window.setTimeout(onChange,0);;

textbox.addEventListener("input", onChange, false); textbox.addEventListener("blur", function(){

datalist.style.display = "none";

}, false);

function onChange() { if(textbox.value){ optList = [];

var match = new RegExp( textbox.value , "ig"), pos = $.findPos(textbox),

count = 0;

$.each(datalist.children, function(){

var str = this.getAttribute("label"); if(match.test(str)){

this.innerHTML = str.replace(match, function(str){

return "<b>" + str + "</b>"

});

this.style.display = "block"; optList[count] = this; count++;

}else{

this.style.display = "none";

}

});

datalist.style.display = count ? "block" : "none"; datalist.style.left = pos.x + "px";

datalist.style.top = pos.y + textbox.offsetHeight + "px";

} else {

datalist.style.display = "none";

}

function filter(elm){

return /li/i.test(elm.tagName) ? elm : null;

}

function moveSelect(setp){

var sel = datalist.querySelector(".highlight"), index;

if(sel){

$.each(optList,function(i){ if(sel == this){

index = i; return false;

}

});

} else {

index = optList.length * -setp;

}

index += setp if(index < 0){

index = 0;

} else if(index >= optList.length){ index = optList.length - 1;

}

hoverOpt(optList[index]);

}

function selectOpt(elm){

elm = filter(elm); if(elm){

textbox.value = elm.getAttribute("value");

}

datalist.style.display = "none";

}

function hoverOpt(elm){ elm = filter(elm);

$.each(datalist.children, function(){ if(this == elm){

$.addClass(this, "highlight");

}else{

$.delClass(this, "highlight");

}

});

}

datalist.addEventListener("mouseover", function(e){ hoverOpt(e.target);

});

datalist.addEventListener("click", function(e){ selectOpt(e.target);

});

}

document.realy(function($){ autocomplete("input");

});

</script>

padding: 100px;

}

.datalist {

-webkit-user-select: none;

-moz-user-select: none; user-select: none;

box-shadow: 2px 2px 2px #777; border: 1px solid black; background: window;

position: absolute;

overflow: hidden; cursor: default; color: menutext; z-index: 99999; display: none; font: menu; padding: 0;

margin: 0;

behavior: url("PIE.htc");

}

:root .datalist {

behavior: none;

-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.5);

-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.5); box-shadow: 2px 2px 2px rgba(0,0,0,.5);

}

.datalist li {

line-height: 20px; list-style: none; font-size: 14px; padding: 0 10px; display: block;

}

.datalist li.highlight { background: highlight; color: highlighttext;

}

</style>

</head>

<body>

</datalist>

<br>

请输入 gucong 来作为测试数据

</div>

</body>

</html>

（预览效果：http://gucong3000.github.io/renren/autocomplete.html）

85.

[问答题]

阅读以下 JavaScript 代码：

if (window.addEventListener) {

var addListener = function(el, type, listener, useCapture) { el.addEventListener(type, listener, useCapture);

};

} else if (document.all) {

addListener = function(el, type, listener) { el.attachEvent("on" + type, function() {

listener.apply(el);

});

};

}

请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用; d) 如果有可改进之处，请给出改进后的代码，并说明理由。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴 2011 前端工程师面试题参考：

1、事件绑定的一个简单函数封装；

2、优点：函数封装可随时引用，没有解决兼容性的问题；缺点：代码冗余

3、作用是改变 this 指向的问题，不用则指向window 而不是调动它的事件对象

function bind(obj, evname, fn){ if(obj.addEventListener){

obj.addEventListener(evname, fn, false);

} else {

obj.attachEvent('on'+evname, function(){ fn.apply(obj);

});

}

86.

[问答题]

用 js、html、css 实现一个弹出提示控件

分别实现类似于系统的 alert、confirm、prompt 对话框；
对话框大小根据提示内容进行自适应（有一个最小宽高），默认出现在页面的水平垂直居中的位置；
对话框可拖动；
对话框中的事件模拟系统对话框的事件（例如：alert 对话框，点击确定按钮，对话框消失）；
解决 IE6 被 select 控件遮挡的问题。

----------------------------------------------------------------------------------------------------------------------------

来自：人人网 2011 前端工程师面试题参考：

<!DOCTYPE HTML>

<head>

<!--[if lt IE 9]>

<![endif]-->

padding: 100px;

}

#dialogbg {

background: rgba(0,0,0,.2); overflow: hidden;

position: fixed;

}

#dialogbg, #dialogbg .bgcolor {

height: 100%;

width: 100%;

margin: 0;

left: 0;

top: 0;

}

#dialogbg .bgcolor {

filter: alpha(opacity=20);

background: #000; position: absolute;

}

:root #dialogbg .bgcolor { display: none;

}

* html #dialogbg {

_position: absolute;

_top: expression(offsetParent.scrollTop);

}

#dialogbg .dialog {

-webkit-border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0; border: 1px solid #666;

display: inline-block; position: absolute; background: white; text-align: left; overflow: hidden; margin: auto;

left: 50%;

top: 50%;

behavior: url("PIE.htc");

*behavior: none;

}

.dialog .title {

-webkit-user-select: none;

-moz-user-select: none; user-select: none; filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr=#00aaee,endColorstr=#0066cc); background: #0095cd;

background: -webkit-gradient(linear, left top, left bottom, from(#00aaee), to(#0066cc)); background: -webkit-linear-gradient(top, #00aaee, #0066cc);

background: -moz-linear-gradient(top, #00aaee, #0066cc); background: -ms-linear-gradient(top, #00aaee, #0066cc); background: -o-linear-gradient(top, #00aaee, #0066cc); background: linear-gradient(top, #00aaee, #0066cc); text-shadow: 0 0 1px black;

font-weight: bold; line-height: 28px; overflow: hidden; cursor: move;

color: white;

*width: expression(this.parentNode.clientWidth);

}

.dialog .title div { padding: 0 8px;

}

.dialog .text,

.dialog .content { margin: 20px;

}

.dialog .text{

text-align: center;

}

.dialog .content {

word-break: keep-all; white-space: nowrap;

}

.dialog input,

.dialog .content {

min-width: 200px;

_width: 200px;

}

.dialog input {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-ms-box-sizing:border-box; box-sizing:border-box; display: block;

width: 100%;

*width: auto;

}

.dialog .btns {

text-align: center; margin: 10px 5px;

}

.dialog .btns * {

border: 1px solid #CCC; text-decoration: none; background: none; padding: 5px 20px; margin: 0 5px;

color: #000;

}

#dialogbg, .dialog,.dialog .winbtns .size,.dialog input {

/*display: none ;*/

}

#dialogbg, .dialog { display: block;

}

</style>

</head>

<body>

<option>看看有没有遮住对话框</option>

</select>

<br>

请点击下面的链接弹出对框框

<br>

<a href="javascript:msgbox('你好，欢迎使用 Windows 8 旗舰版')">alert</a>

<br>

<a href="javascript:msgbox(' 您确定要关闭计算机吗?',function(t){alert(t)})">confirm</a>

<br>

<a href="javascript:msgbox(' 请输入您的姓名 ',function(t){alert(t)},' 匿名

')">prompt</a>

</div>

function msgbox(msg, fun, text){

var dialogbg = document.querySelector("#dialogbg"); if(!dialogbg){

dialogbg = document.createElement("div"); dialogbg.id = "dialogbg"; document.body.appendChild(dialogbg);

}

dialogbg.innerHTML = '<div class="bgcolor"></div><div class="dialog"><div class="title" unselectable="on"><div>消息</div></div><div class="content"></div><div class="text"><input type="text"></div><div class="btns"><button class="ok">确定</button><button class="cancel"> 取消</button></div></div>';

dialogbg.querySelector(".content").innerHTML = msg || " "; function hide( sel ){

dialogbg.querySelector(sel).style.display = "none";

}

var btnOk = dialogbg.querySelector(".ok"),

btnCancel = dialogbg.querySelector(".cancel"); if(fun){

if(text == undefined){ hide(".text"); btnOk.onclick = function(){

fun(true);

}

btnCancel.onclick = function(){ fun(false);

}

}else{

var textbox = dialogbg.querySelector("input"); textbox.value = text;

btnOk.onclick = function(){ fun.call(textbox, textbox.value);

}

}else{

hide(".cancel");

hide(".text");

}

function btnClose(){ dialogbg.style.display = "none";

}

btnOk.addEventListener("click", btnClose, true); btnCancel.addEventListener("click", btnClose, true);

dialogbg.style.display = "block";

var dialog = dialogbg.querySelector(".dialog");

dialog.style.left = (dialogbg.offsetWidth - dialog.offsetWidth) / 2 + "px"; dialog.style.top = (dialogbg.offsetHeight - dialog.offsetHeight) / 2 + "px"; drag(dialog, dialog.querySelector(".title"));

}

function drag(dialog, titleBar){ var onDrag,

pos = {},

dialogbg = document.querySelector("html");

titleBar.addEventListener("mousedown", function(e){ pos.left = dialog.offsetLeft;

pos.top = dialog.offsetTop;

pos.x = e.pageX; pos.y = e.pageY; onDrag = true;

}, false);

dialogbg.addEventListener("mousemove", function(e){ if(onDrag){

dialog.style.left = (pos.left + e.pageX - pos.x) + "px"; dialog.style.top = (pos.top + e.pageY - pos.y) + "px";

}

}, false);

titleBar.onselectstart = function(){ return false;

}

dialogbg.onmouseup = function(){ onDrag = false;

}

</script>

</body>

</html>

（预览效果：http://gucong3000.github.io/renren/dialog.html）

87.

[问答题]

在页面的固定区域内实现图片的展示(使用原生代码实现，不可使用任何框架)。

1. 每点击一次右箭头，图片区域向左滚动出一张图片，反之相同 2. 当发现图片滚动到末尾时，响应的箭头变成不可点击状态 3. 鼠标在图片区域内滑动滚轮，图片会随着鼠标滚轮的方向进行响应的滚动

----------------------------------------------------------------------------------------------------------------------------

来自：人人网 2011 前端工程师面试题参考：

<!DOCTYPE HTML>

<html>

<head>

<title>缩略图滚动显示</title>

var thumbs = document.querySelector(".thumbs"), left = thumbs.querySelector(".scroll_left"), right = thumbs.querySelector(".scroll_right"), cont = thumbs.querySelector("ul"),

items = cont.querySelectorAll("li");

//console.log(scrollStep);

function scrollFun(val){

val = cont.scrollLeft += (items[1].offsetLeft - items[0].offsetLeft) * val; if(val<=0){

$.addClass(left, "disabled");

}else if (val >= (cont.scrollWidth - cont.clientWidth)){

$.addClass(right, "disabled");

}

function sLeft(){

scrollFun(-1);

$.delClass(right, "disabled"); return false;

}

function sRight(){ scrollFun(1);

$.delClass(left, "disabled"); return false;

}

left.onclick = sLeft; right.onclick = sRight;

cont.addEventListener("onmousewheel" in cont ? "mousewheel" : "DOMMouseScroll", function(e){

if(( e.detail || -e.wheelDelta) > 0){ sRight();

}else{

sLeft();

}

e.preventDefault();

});

return false;

},true);

</script>

padding-top: 100px;

}

.thumbs {

overflow: hidden; margin: 0 100px;

}

.thumbs ul {

word-break: keep-all; white-space: nowrap; overflow: hidden; margin: auto;

font-size: 1px;

_width: expression(document.documentElement.clientWidth-280);

}

.thumbs li {

list-style: none; display: inline;

}

.thumbs a {

border: 2px solid #B7B7B7; text-decoration: none; display: inline-block; outline: none;

margin: 0 9px;

}

.thumbs img {

vertical-align: top; width: 115px; height: 85px;

}

.thumbs a:hover {

border-color: #65B6DD;

}

.thumbs a:focus,

.thumbs a:active {

border-color: #0084B4;

}

.thumbs .scroll_left,

.thumbs .scroll_right {

-webkit-user-select: none;

-moz-user-select: none; user-select: none;

font-family: SimHei; background: #65B6DD; text-align: center;

line-height: 85px; overflow: hidden; font-size: 20px; cursor: pointer; height: 85px; width: 20px; color: #fff;

behavior: url("PIE.htc");

}

.thumbs .scroll_left {

-webkit-border-radius: 10px 3px 3px 10px;

-moz-border-radius: 10px 3px 3px 10px; border-radius: 10px 3px 3px 10px;

margin-right: 15px; float: left;

}

.thumbs .scroll_right {

-webkit-border-radius: 3px 10px 10px 3px;

-moz-border-radius: 3px 10px 10px 3px; border-radius: 3px 10px 10px 3px;

margin-left: 15px; float: right;

}

html .thumbs .scroll_left,
html .thumbs .scroll_right {

_margin: 0;

}

.thumbs .disabled { cursor: not-allowed; background: #CCC; color: #999;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

（效果预览：http://gucong3000.github.io/renren/thumbs.html）

88.

[单选题]

JavaScript 中 document.getElementById 的返回值的类型为？

A.Array B.Object C.String D.Function

----------------------------------------------------------------------------------------------------------------------------

来自：微博答案：B

89.

[问答题]

在网页里显示一个 div 浮层，位于网页正中，该浮层内的文本显示用户电脑当前时间，格式 YYYY-MM-DD hh:mm:ss，如 2013-08-16 10:22:05。浮层居中可以使用 JavaScript 或者 CSS 实现。

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯参考：

<!DOCTYPE html>

<html>

<style>

html,body{width: 100%; height: 100%; margin: 0;}

.container {display:table; width: 100%; height: 100%; text-align:center;}

.time{vertical-align:middle; display:table-cell;}

</style>

</head>

<body>

</div>

</body>

function TwoDigit(args){

return args < 10 ? "0" + args : args;

};

var String

var dom = document.getElementById("time") with( new Date() ) {

String = getFullYear() + " 年" + TwoDigit(getMonth() + 1) + " 月" + TwoDigit(getDate()) + "日" + TwoDigit(getHours()) + "时" + TwoDigit(getMinutes()) + "分"+TwoDigit(getSeconds()) + "秒";

};

dom.innerHTML = String;

</script>

</html>

90.

[问答题]

请用 JavaScript 实现，控制一个文本框只能输入正整数，如输入不符合条件则文本框全部字体标红。要求写出完整的文本框 HTML 代码和 JavaScript 逻辑代码。

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯参考：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<!--

function isNum() {

var txtField = document.getElementById('txt'); var txt = txtField.value;

var regexp = /^\d*$/; if (regexp.test(txt)) {

txtField.style.color = "#000";

} else {

txtField.style.color = "#f00";

}

//-->

</script>

</head>

<body>

</body>

</html>

91.

[问答题]

以下代码输出的值为？（）

function f1() {

var n = 100;

nAdd = function() {

n += 1

}

function f2() {

alert(n);

}

return f2;

}

var result = f1(); result();

nAdd();

result();

----------------------------------------------------------------------------------------------------------------------------

来自：搜狐参考： 100

undefined 101

92.

[问答题]

如何判断浏览器是 IE 还是火狐，用 ajax 实现。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：

用 Request Headers 里的 User-Agent 判断

93.

[问答题]

请使用原生 js 实现一个 div 可拖拽，需要考虑浏览器兼容性。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：

var drag1=document.getElementById('drag1'); drag1.onmousedown=function(ev){

var x=ev.clientX-drag1.offsetLeft; var y=ev.clientY-drag1.offsetTop; drag1.onmousemove=function(ev){ drag1.style.left=ev.clientX-x+'px';

drag1.style.top=ev.clientY-y+'px';

}

drag1.onmouseup=function(ev){ drag1.onmousemove=drag1.onmouseup=null;

}

94.

[问答题]

请填充代码，使 mySort()能使传入的参数按照从小到大的顺序显示出来。function mySort() {

var tags = new Array();//使用数组作为参数存储容器请补充你的代码

return tags;//返回已经排序的数组

}

var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不确定console.info(result);//显示结果

----------------------------------------------------------------------------------------------------------------------------

来自：腾讯 2015 春招web 前端开发练习卷参考：

function mySort() {

var tags = new Array();//使用数组作为参数存储容器tags = Array.prototype.slice.call(arguments) tags.sort(function(pre,next){

return pre - next;

})

return tags;//返回已经排序的数组

}

95.

[单选题]

下面哪些是 NodeJS 官方模块？

A.Querystring B.Request C.Async D.Dns

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴答案：D

96.

[问答题]

用 javascript 实现控制一个文本框的输入字数限制，超出字数限制文本框飘红显示。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

97.

[问答题]

使用 Javascript 打印出 1-10000 之间的所有对称数（例如 121 1331 等）。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

function findSymmetryNum(s,o){ var arr=[];

for(var i=s;i<=o;i++){

var str=''+i,sl=str.length,middle=0,flag=true; if(sl%2===0){

middle=sl/2;

}else{

middle = (sl-1)/2;

}

for(var m=0;m<middle;m++){ if(str.substr(0+m,1)!==str.substr(-1-m,1)){ flag = false;

}

flag&&arr.push(i);

}

console.log(arr); return arr;

}

findSymmetryNum(1,1001);

98.

[问答题]

使用 javascript 实现，将文档中 className 有“test”的 li 标签背景色设为黄色。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

var list = document.getElementsByTagName("li"); console.log(list.length);

for(var i=0;i<list.length;i++){ if(list[i].className=='test'){

list[i].style.backgroundColor="gold";

}

</script>

99.

[问答题]

用 js 实现如下功能，将给定的数字转化成千分位的格式，如把“10000”转化成“10,000”，并考虑到性能方面的因素

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

<!DOCTYPE>

<html>

<head>

var a="150355660";

var re=/(?=(?!\b)(\d{3})+$)/g

alert(a.replace(re,','));

</script>

</head>

<body>

</body>

</html>

100.

[问答题]

请通过 js 来实现一个函数 once，这个函数在整个应用运行的时候只被访问一次。如果再次访问就会访问上次的执行结果。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

var singleton = (function() {

//缓存实例var instance;

var randomNum = Math.random();

//单例初始化代码function init() {

return randomNum;

}

//如果没有初始化，则初始化，否则返回已经执行的结果。if (!instance) {

instance = init();

}

return instance;

})()

console.log(singleton); console.log(singleton);

101.

[问答题]

如果要把在手机百度的搜索结果做成一个可以无限向上滑动的卡片列表（图就不展示了，就是一行是一块内容这种形式），请你设计这个可以无限滑动的卡片列表方案，注意不能造成浏览器奔溃。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

可以用瀑布流布局来实现

var lock = false,

maxId = 0;

function addMore() { if (!lock) {

lock = true;

$.ajax({

url: 'www.xxx.com/test.php?maxId=' + maxId, type: 'GET',

dataType: 'json', success: function(data) {

var buffer = [], m = 0;

buffer[m++] = data.something1; buffer[m++] = data.something2;

//otherthings....

var temp = buffer.join("");

$(temp).appendTo('div'); maxId++;

}

})

lock = false;

}

$(window).scroll(function() {

if (($(window).height() + $(window).scrollTop()) >= $('body').height()) { addMore();

}

});

102.

[问答题]

在用户填写表单内容时，为了避免误操作，有时会在用户“试图关闭”网页时进行警告，让用户确认数据未提交会丢弃。请尽可能列举，你所知道的，用户导致这种影响的“误操行为”有哪些，并适当归类。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：无

103.

[问答题]

如何解决跨域通信的问题，简述有哪些方法？

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

、document.domain+iframe 的设置
、动态创建 script，要就是 jsonp
、利用 iframe 和 location.hash
、window.name 实现的跨域数据传输
、使用 HTML5 postMessage
、利用 flash

104.

[问答题]

实现点击表头排序功能，点一次降序，再点一次升序。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：无

105.

[问答题]

实现一个监听 load 事件的接口window.load(callback):多次调用时保证执行顺序，先绑定的回调先执行：如果 load 事件已触发，调用时会直接执行该回调。

----------------------------------------------------------------------------------------------------------------------------

来自：美团参考：

window.load = (function(){

var loaded = false,

func = new Array();

window.onload = function(){ loaded =true;

for(var i = 0;i<func.length;i++){ func[i]();

}

return function(callback){

if(typeof callback!="function") return; if(loaded) {

callback();

}else{

func.push(callback)

}

}())

106.

[问答题]

画图描述 CSS 盒模型，用 JS 实现获取元素宽和位置，注意兼容性。

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿参考：

var element = document.getElementById("div0"); function getWeizhi (element) {

var top = document.documentElement.clientTop; var left = document.documentElement.clientLeft; var ele = element.getBoundingClientRect(); return{

top:ele.top - top, right:ele.right - left, bottom:ele.bottom - top, left:ele.left - left, width:ele.right - ele.left, height:ele.bottom - ele.top

}

107.

[问答题]

用 Javascript 实现乱序函数 randomSort(array)函数，输出排序后的函数。如[1,2,3,4,5]，输出[3,2,4,5,1]。要求 N 次以内不重复。

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿

参考：

function randomSort(array){

var x=array.sort(function(a,b){

return Math.random()>0.5?1:-1;

});

return x;

}

或

function randomSort(array) { var n = array.length, t, i; while (n) {

i = Math.random() * n-- | 0; t = array[n];

array[n] = array[i]; array[i] = t;

}

108.

}

return array;

[问答题]

某饭店要开发一个排队软件。非 VIP 用户需要排队，先到先得。VIP 用户可以插队，但是 VIP 用户之间需要按到达时间先后排队。

要求实现：①addCustomer(String phoneNumber)函数②有空位时获取排到的用户③用户进店排队时的函数 current()

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿

参考：使用 Python class queue:

def init (self,vip,nor):

if(type(vip)==list and type(nor)==list): self.vip = vip

self.nor = nor

else :print 'vip and nor must be list'

def addcustom(self,name,phonenumber,ifvip): if (ifvip):

self.vip.append([name,phonenumber]) else :

self.nor.append([name,phonenumber]) def next(self):

if (self.vip):

n = self.vip[0][0]

else :

del(self.vip[0]) print 'next is ' + n

n = self.nor[0][0]

del(self.nor[0]) print 'next is ' + n

def current(self):

str1 = '现在队列为：' for i in self.vip:

str1 += i[0] str1 += ', '

for i in self.nor:

str1 += i[0] str1 +=', '

print str1

109.

[问答题]

写一个命令行字符的解析函数。

例：-name lily -age 25 -school "chengdu university" 返回的是[-name lily,-age 25, -school "chengdu university"]

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿参考：

function getdata(str)

{

var json={};

var gets =str.split('"')[0]; gets =gets.split(' ');

for(var i=0;i<gets.length-1;i++)

{

if(i%2==0)

{

json[gets[i]]=gets[i+1];

}

json[gets[gets.length-1]]=str.split('"')[1]; return json;

}

</script>

110.

[问答题]

写一个函数 padstare(string str1,min_length,string str2)。

例：padstare（‘5’，3，‘0’）返回的是‘005’； padstare（‘798’，5，‘0’）返回的是 ‘798’；

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿参考：

function padstare(str,min,str_char)

{

var ret=[]; if(str.length>=min)

{

}

else

{

return str;

for(var i=0;i<min-str.length;i++)

{

ret.push(str_char);

}

return ret.join('')+str;

}

</script>

111.

[问答题]

请实现 javascript 中的 indexOf 功能，判断一个字符串 a 中是否包含另一个字符串 b。a）如果包含，需要返回匹配字符串 b 的位置

b）如果不包含，需要返回-1

例如 indexOf("hello","el") returns 1;

----------------------------------------------------------------------------------------------------------------------------

来自：去哪儿参考：

function indexOf (a,b){

var result = a.match(b); return result? result.index:-1;

}

console.log(indexOf("hello", "el"));//1

或

function indexOf(strA, strB) { var lenA = strA.length,

lenB = strB.length; if (lenA < lenB) {

return -1;

} else if (lenA == lenB) { return 0;

} else {

for (var j = 0; j < lenA; j++) {

if (strA.charAt(j) == strB[0] && strA.substr(j, lenB) == strB) { return j;

}

return -1;

}

console.log(indexOf("hello", "el")); //1

112.

[问答题]

angularjs 里面的双向数据绑定和依赖注入的原理?

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：

双向数组绑定主要是通过 angular 的 digest 流程, 依赖注入主要是 function.toString 分析参见： https://github.com/xufei/blog/issues/10

113.

[问答题]

javascript 里面的继承怎么实现，如何避免原型链上面的对象共享。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：

114.

[问答题]

网页时钟第一问：使用 HTML，CSS 绘制一个时钟，效果图和素材如下图（注意指针可以旋转到任意位置）

第二问：用 Javascript 编写一个 Clock 类，实现如下接口：

构造函数 Clock(HTMLDomElement dom) ：在参数 dom 中生成上述时钟
setTime(hour,minute,second) ：设置时钟时间，指针指定到正确位置
run()时钟开始工作可以使用 jQuery 等任何前端框架

----------------------------------------------------------------------------------------------------------------------------

来自：大众点评参考：

第一问:

html:

</div>

css:

.clock {

position: relative; margin: 50px auto; width: 800px;

}

.clock .clock-panel { position: absolute; left:0;

right:0;

background: url("clock.png"); background-size: 1024px; background-position: -188px -50px; background-repeat: no-repeat;

z-index: 1; height: 800px; width: 800px;

}

.clock .clock-hour {

/* display:none; */ background: url("clock.png"); background-size: 1024px; position: absolute;

transform-origin: 15px 145px; z-index: 2;

height: 161px; width: 31px; left: 375px; top: 250px;

background-position: -120px -558px;

}

.clock .clock-mini {

/* display:none; */ background: url("clock.png"); background-size: 1024px; position: absolute;

z-index: 3; height: 220px; width: 28px;

background-position: -73px -498px; transform-origin: 14px 205px;

left: 376px; top: 185px;

}

.clock .clock-second {

/* display:none; */ background: url("clock.png"); background-size: 1024px; position: absolute;

z-index: 4; height: 321px; width: 31px;

background-position: -26px -466px; transform-origin: 15px 240px;

left: 375px; top: 153px;

}

第二问:

function Clock(dom){

this.domClock = document.createElement('div'); this.domPanl = document.createElement('div'); this.domHour = document.createElement('div'); this.domMini = document.createElement('div'); this.domSecond = document.createElement('div'); this.domClock.className = "clock"; this.domPanl.className = "clock-panel"; this.domHour.className = "clock-hour"; this.domMini.className = "clock-mini"; this.domSecond.className = "clock-second"; this.domClock.appendChild(this.domPanl); this.domClock.appendChild(this.domHour); this.domClock.appendChild(this.domMini); this.domClock.appendChild(this.domSecond); dom.appendChild(this.domClock);

return this;

}

Clock.prototype.setTime = function(hour, minute, second){ this.hour = hour;

this.minute = minute; this.second = second;

this.domHour.style.transform = "rotate(" + (hour * 30 + 0.5 * minute) + "deg)"; this.domMini.style.transform = "rotate(" + minute * 6 + "deg)"; this.domSecond.style.transform = "rotate(" + second * 6 + "deg)";

}

Clock.prototype.run = function(){ var self = this;

var clockId = setInterval(function(){

var now = new Date(0, 0, 0, self.hour, self.minute, self.second + 1); self.second = self.second + 1;

self.domHour.style.transform = "rotate(" + (now.getHours() * 30 + 0.5 * now.getMinutes()) + "deg)";

self.domMini.style.transform = "rotate(" + now.getMinutes() * 6 + "deg)"; self.domSecond.style.transform = "rotate(" + now.getSeconds() * 6 + "deg)";

}, 1000);

this.domHour.style.display = "block"; this.domMini.style.display = "block"; this.domSecond.style.display = "block";

}

或

<!doctype html>

<head>

margin: 0;

padding: 0;

}

.clock-wrap{

width: 300px; height: 300px; margin:20px auto;

background: url("clock1.png") -75px -20px no-repeat; position: relative;

}

.clock-wrap>div{ position: absolute; width: 12px; height: 100px;

background-color: #ccc; top:80px;

left: 50%;

margin-left: -1px;

/* -webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;*/

}

#sec{

top:60px; height: 128px;

background: url('clock1.png') -10px -182px no-repeat;

-webkit-transform-origin: center 94px;

-moz-transform-origin: center 94px;

-ms-transform-origin: center 94px;

-o-transform-origin: center 94px; transform-origin: center 94px;

-webkit-transform: rotateZ(30deg);

-moz-transform: rotateZ(30deg);

-ms-transform: rotateZ(30deg);

-o-transform: rotateZ(30deg); transform: rotateZ(30deg);

}

#min{

height: 88px;

background: url('clock1.png') -28px -202px no-repeat;

-webkit-transform-origin: center 75px;

-moz-transform-origin: center 75px;

-ms-transform-origin: center 75px;

-o-transform-origin: center 75px; transform-origin: center 75px;

-webkit-transform: rotateZ(145deg);

-moz-transform: rotateZ(145deg);

-ms-transform: rotateZ(145deg);

-o-transform: rotateZ(145deg); transform: rotateZ(145deg);

}

#hour{

height: 84px;

background: url('clock1.png') -47px -202px no-repeat;

-webkit-transform-origin: center 75px;

-moz-transform-origin: center 75px;

-ms-transform-origin: center 75px;

-o-transform-origin: center 75px; transform-origin: center 75px;

-webkit-transform: rotateZ(60deg);

-moz-transform: rotateZ(60deg);

-ms-transform: rotateZ(60deg);

-o-transform: rotateZ(60deg); transform: rotateZ(60deg);

}

</style>

</head>

this.hour=json.hour; this.min=json.min; this.sec=json.sec;

}

Clock.prototype.run=function(){ var clock=this;

var date=new Date(); var hh=date.getHours();

var mm=date.getMinutes(); var ss=date.getSeconds(); clock.setTime(hh,mm,ss); setInterval(function(){

date=new Date(); hh=date.getHours(); mm=date.getMinutes(); ss=date.getSeconds(); clock.setTime(hh,mm,ss);

},1e3);

}

Clock.prototype.setTime=function(h,m,s){ var

trans=['webkitTransform','msTransform','mozTransform','oTransform','transform']; for(var i=0;i<trans.length;i++){

this.hour.style[trans[i]]='rotateZ('+((h/12)*360)+'deg)'; this.min.style[trans[i]]='rotateZ('+((m/60)*360)+'deg)';

this.sec.style[trans[i]]='rotateZ('+((s/60)*360)+'deg)';

}

window.onload=function(){

var oH=document.getElementById('hour'); var oM=document.getElementById('min'); var oS=document.getElementById('sec'); var c1=new Clock({

hour:oH, min:oM, sec:oS

}

</script>

<body>

});

c1.run();

</div>

</body>

</html>

115.

[问答题]

编写一个 JavaScript 函数，输入指定类型的选择器(仅需支持 id，class，tagName 三种简单 CSS 选择器，无需兼容组合选择器)可以返回匹配的 DOM 节点，需考虑浏览器兼容性和性能。 /*** @param selector {String} 传入的 CSS 选择器。* @return {Array}*/ var query = function(selector){ //返回查找到的节点数组 return [];}

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：无

116.

[问答题]

如何配置让 nginx 对 js、html、css 文件进行 gzip 压缩输出？

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：

gzip on; gzip_min_length 1k; gzip_buffers 4 16k;

gzip_types text/plain application/x-javascript text/css application/xml;

117.

[问答题]

有这样一个 URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，将其按 key-value 形式返回到一个 json 结构中，如{a:'1', b:'2', c:'', d:'xxx', e:undefined}。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴

参考：

<!DOCTYPE html>

<html>

<head>

var s="http://item.taobao.com/item.htm?a=1&b=2&c=3&d=4" var re=/.+\?/g ;

var re2=/=/g; var re3=/&/g;

var s1,s2,s3,json; s1=s.replace(re,'');

s2=s1.replace(re2,":").replace(re3,',');

s3=s2.replace(new RegExp(s2,'g'),function($0,$1){json=eval('({'+$0+'})');}); console.log(json);

</script>

</head>

<body>

</body>

</html>

或

var get_param=function(url){ var arr=url.split(/[\?\=\&]/g); var result={};

var len=arr.length%2==0?arr.length+1:arr.length; for(var i=1;i<len-1;i=i+2){

result[arr[i]]=arr[i+1];

};

118.

}

return JSON.stringify(result);

[问答题]

</div>

</div>

</div>

有 dom 结构如上,请用原生代码（禁用 jQuery 作答）实现以下功能： (a)计算鼠标在mod-spm 区域内的停留时长，data-spm 不同视为不同区域 (b)尽量减少性能损耗 (c)重复进入计时累加

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：无

119.

[不定项选择题]

按照 CommonJS 规范，在任何模块代码的作用域下内置了以下哪些变量？

A.module B.context C.require D.exports

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴答案：ACD

120.

[问答题]

写出至少 5 个前端优化的方法，并写明理由。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

将 CSS 放再顶部 --- 能加快页面内容显示,并且能避免页面产生白屏。
将JS 放在底部 --- ①JS 会阻塞对其后面内容的呈现；②JS 会阻塞对其后面内容的下载。
将 JS,CSS 放在外部文件中（代码和样式的分离）--- 便于优化和管理。
重置 CSS 文件 --- 清除 HTML 标签默认的属性，让页面按编写者的意愿变化。

HTML 尽量使用标准规范的写法 --- 提高渲染引擎的执行效率。
对 JS 和 CSS 进行压缩，去重，合并等处理 --- ①减小了文件的体积； ②减小了网络传输量和带宽占用； ③减小了服务器的处理的压力； ④提高了页面的渲染显示的速度。
减少页面的图片数目 --- 浏览器拉取页面图片的开销是比较大的，而实际上，我们的页面为了提升用户体验使用了大量图片，这里我们常采用 cdn 存放，图片合并(几个图片合成一个，然后使用 css 进行截取片断显示)，永久 cache（存在图片变更的维护成本,工具的建设等），甚至有些效果是可以用 css 来实现的代替图片。

121.

[问答题]

我们在进行组件开发的时候，经常会需要用到大量颜色。有两种方法。方法 1：预先定义好大量的颜色；方法 2：自定义函数，采用随机生成颜色的方式。请采用方法 2 实现随机颜色汲取。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

function renderColour() {

return "#"+(~~(Math.random()*(1<<24))).toString(16);

}

122.

[问答题]

请简要叙述：ActionScript 与 JavaScript 如何进行交互？请用简要的代码说明。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：无

123.

[问答题]

请问在 JavaScript 中如何调用以下几个 CSS 属性： font-size ， border-top-width,

-moz-user-select?

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

考察 CSS 在 JS 中的驼峰写法

fontSize

borderTopWidth mozUserSelect

124.

[问答题]

用 JavaScript 脚本为 Array 对象添加一个去除重复项的方法。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

Array.prototype.uniq = function () {

// 长度只有 1，直接返回当前的拷贝if (this.length <= 1) {

return this.slice(0);

}

var aResult = [];

for (var i = 0, l = this.length; i < l; i++) { if (!_fExist(aResult, this[i])) {

aResult.push(this[i]);

}

return aResult;

// 判断是否重复

function _fExist(aTmp, o) { if (aTmp.length === 0) {

return false;

}

var tmp;

for (var i = 0, l = aTmp.length; i < l; i++) { tmp = aTmp[i];

if (tmp === o) {

return true;

isNaN(o)) {

}

// NaN 需要特殊处理

if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) &&

return true;

}

return false;

}

或

Array.prototype.rmRepeat = function(){ var res = [],hash={};

var len=this.length;

for (var i=0;i<len ;i++) {

if( !hash.hasOwnProperty('_'+this[i]) )

{

hash['_'+this[i]] = 1;

res.push(this[i]);

}

return res;

}

125.

[问答题]

flash 中的事件处理分哪几个过程？ Event 对象的 target 和 currentTarget 有什么区别?

----------------------------------------------------------------------------------------------------------------------------

来自：网易参考：无

126.

[单选题]

以下哪一条 Javascript 语句会产生运行错误？

var obj=( );
var obj=[ ];
var obj={ };
var obj=/ /;

----------------------------------------------------------------------------------------------------------------------------

来自：网易答案：A

A 是语法错误

B 是创建一个数组对象

C 是创建一个对象

D 是一个创建正则对象；若为var obj=/ /；即赋值被注释掉，及运行被结束；

127.

[单选题]

从四个选项选出不同的一个。

A.JQuery B.Node.js C.Prototype D.CommonJS

----------------------------------------------------------------------------------------------------------------------------

来自：搜狐研发工程师模拟笔试题答案：d

Jquery 是继 prototype 之后又一个优秀的Javascrīpt 框架。它是轻量级的 js 库(压缩后只有 21k) ，它兼容 CSS3，还兼容各种浏览器。

Node.js 是一套用来编写高性能网络服务器的 JavaScript 工具包。

在 JavaScript 中，prototype 对象是实现面向对象的一个重要机制。每个函数就是一个对象（Function），函数对象都有一个子对象 prototype 对象，类是以函数的形式来定义的。

prototype 表示该函数的原型，也表示一个类的成员的集合。prototype.js 是由 Sam Stephenson 写的一个 javascript 类库。

CommonJS API 定义很多普通应用程序（主要指非浏览器的应用）使用的 API，从而填补了这个空白。

128.

[问答题]

extjs 里对一个支持事件监听的控件，取出监听器的方法有哪些？

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：无

129.

[问答题]

当你打开浏览在地址栏中输“ http://www.baidu.com/ ” 后在百度的搜索框中输入“HTML5”，然后点击百度一下按钮，在所有的信息在一一被列举出来的过程中，计算机和网络都发生了什么变化？你有什建议？

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

输入框挂载 onchange 事件，获取客户端输入，ajax 传回后台，查数据库，查出若干匹配项，装进 list，返回给 jsp 输出，ajax 回调方法接收 jsp 的输出，将输出转为一段段字符串，装进输入框下方的table 或 div 里。

130.

[问答题]

我们把一个数字倒着读和原数字相同的数字称之为对称数，（例如 1,121,88,8998），不考虑性能，请找出 1—10000 之间的对称数，要求用 javaScript 实现；

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

function symmetry(num) {

var arr = [];

while(--num > 10) {

var reverseNum = num.toString().split('').reverse().join(''); (reverseNum == num) && (arr.push(num));

}

return arr;

}

var result = symmetry(10000); console.log(result);

或

function findSymmetryNum(s,o){ var arr=[];

for(var i=s;i<=o;i++){

var str=''+i,sl=str.length,middle=0,flag=true; if(sl%2===0){

middle=sl/2;

}else{

middle = (sl-1)/2;

}

for(var m=0;m<middle;m++){ if(str.substr(0+m,1)!==str.substr(-1-m,1)){

flag = false;

}

flag&&arr.push(i);

}

console.log(arr); return arr;

}

findSymmetryNum(1,10000);

131.

[问答题]

浏览器的缓存和本地存储相关内容有哪些？这些在什么环境下都各自能起到什么作用？

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

html 页面、图片等.

在联网时已访问的内容可以直接从缓存调出来，提高访问速度离线时，可以本地存储做离线访问（google gears）

以后我们每次访问网站时，IE 会首先搜索这个目录，如果其中已经有访问过的内容，那

IE 就不必从网上下载，而直接从缓存中调出来，从而提高了访问网站的速度。

132.

[问答题]

怎样优化网页性能

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

尽量减少 HTTP 请求次数
减少 DNS 查找次数3.资源合并与压缩 4.CSS Sprites

Inline Images
将外部脚本置底
缓存

133.

[问答题]

如何解决跨域问题，这些解决方法应用于什么场景，有什么特点。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：无

134.

[问答题]

ajax 原理、如何实现刷新数据及优点？

----------------------------------------------------------------------------------------------------------------------------

来自：迅雷参考：

Ajax 的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做,只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求.

优点：1.减轻服务器负担 2.无刷新更新页面 3 更好的用户体验

135.

[问答题]

用 js 脚本写去除字符串的前后空格。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

String.prototype.trim = function(mode)

{//前后去空格

if (mode==’left’) ,

return ((this.charAt(0) == ” “ && this.length > 0) ? this.slice(1).trim(’left’) :

this);

} else

if (mode == ’right’) ,

return ((this.charAt(this.length - 1) == ” “ && this.length > 0) ?

this.slice(0, this.length - 1).trim(’right’) : this);

} else {

return this.trim(’left’).trim(’right’);

}

};

136.

[问答题]

说出 3 条以上 ff 和 ie 的脚本兼容问题。

----------------------------------------------------------------------------------------------------------------------------

来自：百度

参考：

IE 有children，FF 没有；IE 有parentElement，FF 没有；IE 有innerText,outerText,outerHTML， FF 没有； FF 有 HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node, Event,Element 等等，IE 没有；IE 有数据岛，FF 没有；IE 跟 FF 创建 HttpRequest 实例的方法不一样。

137.

[问答题]

prototype.js 实现的基本原理。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

将功能封装

比如 Ajax.Request，还是有判断浏览器的代码；Position 这样的实现页面元素位置的计算

138.

[问答题]

使用 JavaScript 深度克隆一个对象？

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

function Object.prototype.cloneObj()

{

function NEWOBJECT(){}; NEWOBJECT. prototype = this; var anObj = new NEWOBJECT(); for ( var ele in anObj )

{

if ( typeof anObj[ele] == “object” ) return anObj[ele]. cloneObj();

}

return anObj;

}

139.

[问答题]

编写一个 JavaScript 函数，实时显示当前时间，格式“年-月-日时:分:秒”。

----------------------------------------------------------------------------------------------------------------------------

来自：百度参考：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var today=new Date();

var year=today.getFullYear();

var month=today.getMonth()+1; var date=today.getDate();

var hour=today.getHours();

var minute=today.getMinutes(); var second=today.getSeconds();

month=checkTime(month); date=checkTime(date); hour=checkTime(hour); minute=checkTime(minute); second=checkTime(second); var currentTime="";

currentTime = year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; document.getElementById("time").innerHTML=currentTime; setInterval('startTime()',1000);

}

startTime();

function checkTime(t){ return t<10?"0"+t:t;

}

</script>

</body>

</html>

140.

[单选题]

蔺相如，司马相如；魏无忌，长孙无忌。下列哪一组对应关系与此类似() A.PHP，Python

B.JSP，servlet C.Java，Javascript D.C，C++

----------------------------------------------------------------------------------------------------------------------------

来自：程序员文化水平闯关挑战卷答案：C

蔺相如和司马相如，都有相如魏无忌和长孙无忌都有无忌

名字里面由重复地方，但没有什么关系

但是 D 选项 C 和 C plus plus ，后者是对前者的进阶版，不是很贴切

141.

[问答题]

根据下图，编写 HTML 结构。要求：符合 xHTML 1.0 规范。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴参考：

<!DOCTYPE html>

<html>

<head>

<title>阿里巴巴面试表格</title>

</head>

<body>

<tr>

<th>Alexa 排名</th>

</tr>

<td>www.taobao.com</td>

</tr>

</tr>

<td>Amazon</td>

<td>www.amazon.com</td>

</tr>

<td colspan = "4">Alexa.com 提供</td>

</tr>

</table>

</body>

</html>

142.

[问答题]

判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为 5-20。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a a1a a1a a1a ");

143.

[问答题]

截取字符串 abcdefg 的efg。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

var str = "abcdefg"; if (/efg/.test(str)) {

var efg = str.substr(str.indexOf("efg"), 3); alert(efg);

}

144.

[问答题]

判断一个字符串中出现次数最多的字符，统计这个次数。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

//将字符串的字符保存在一个 hash table 中，key 是字符，value 是这个字符出现的次数

var str = "abcdefgaddda"; var obj = {};

for (var i = 0, l = str.length; i < l; i++) { var key = str[i];

if (!obj[key]) { obj[key] = 1;

} else {

obj[key]++;

}

/*遍历这个 hash table，获取 value 最大的 key 和value*/ var max = -1;

var max_key = ""; var key;

for (key in obj) {

if (max < obj[key]) {

max = obj[key]; max_key = key;

}

alert("max:"+max+" max_key:"+max_key);

145.

[问答题]

IE 与 FF 脚本兼容性问题。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

window.event：

表示当前的事件对象，IE 有这个对象，FF 没有，FF 通过给事件处理函数传递事件对象

获取事件源

IE 用 srcElement 获取事件源，而 FF 用 target 获取事件源

添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener“( function, true)

获取标签的自定义属性

click”, function, true) element.removeEventListener“(

click”,

IE：div1.value 或 div1[“value”] FF：可用 div1.getAttribute(“value”)

document.getElementByName() 和 document.all[name] IE；document.getElementByName()和 document.all[name]均不能获取 div 元素FF：可以
input.type 的属性IE：input.type 只读FF：input.type 可读写
innerText textContent outerHTML IE：支持 innerText, outerHTML FF：支持 textContent
是否可用 id 代替 HTML 元素IE：可以用 id 来代替 HTML 元素FF：不可以

146.

[问答题]

规避 javascript 多人开发函数重名问题。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就 ok

147.

[问答题]

javascript 面向对象中继承实现。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

javascript 面向对象中的继承实现一般都使用到了构造函数和 Prototype 原型链，简单的代码如下：

function Animal(name) { this.name = name;

}

Animal.prototype.getName = function() {alert(this.name)} function Dog() {};

Dog.prototype = new Animal("Buddy"); Dog.prototype.constructor = Dog;

var dog = new Dog();

148.

[问答题]

FF 下面实现 outerHTML

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习卷参考：

FF 不支持 outerHTML，要实现 outerHTML 还需要特殊处理。思路如下：

在页面中添加一个新的元素 A，克隆一份需要获取 outerHTML 的元素，将这个元素

append 到新的A 中，然后获取A 的 innerHTML 就可以了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>获取 outerHMTL</title>

<style>

div{ background:#0000FF;width:100px;height:100px;} span{ background:#00FF00;width:100px;height:100px;} p{ background:#FF0000;width:100px;height:100px;}

</style>

</head>

<body>

var el = document.getElementById(id);

var newNode = document.createElement("div"); document.appendChild(newNode);

var clone = el.cloneNode(true); newNode.appendChild(clone); alert(newNode.innerHTML); document.removeChild(newNode);

}

getOuterHTML("a");

</script>

</body>

</html>