面试题（三）

3月15日

1. 下列JavaScript代码执行后，依次alert的结果是？

var obj = {proto: {a:1,b:2}};
function F(){};
F.prototype = obj.proto;
var f = new F();
obj.proto.c = 3;
obj.proto = {a:-1, b:-2};
alert(f.a);
alert(f.c);
delete F.prototype['a'];
alert(f.a);
alert(obj.proto.a);

1 3 undefined -1

2.下列JavaScript代码执行后的效果是？

<ul id='list'>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

var items = document.querySelectorAll('#list>li');
for(var i = 0;i < items.length; i++){
     setTimeout(function(){
           items[i].style.backgroundColor = '#fee';
    }, 5);
}

报错，因为i一直等于5，items[i]获取不到元素

3. 下列JavaScript代码执行后的li元素的数量是？

<ul>
    <li>Item</li>
    <li></li>
    <li></li>
    <li>Item</li>
    <li>Item</li>
</ul>

var items = document.getElementsByTagName('li');
for(var i = 0; i< items.length; i++){
    if(items[i].innerHTML == ''){
        items[i].parentNode.removeChild(items[i]);
    }
}

4.程序中捕获异常的方法

window.error
try{}catch(){}finally{}

5. 下列代码输出结果是什么？

<script lang="JavaScript" type="text/javascript">
    function outPut(s) {
        document.writeln(s);
    }
    var a = "lashou";
    var b = a;
    outPut(b);
    a = "拉手";
    outPut(a);
    outPut(b);
    var a_array = [1, 2, 3];
    var b_array = a_array;
    outPut(b_array);
    a_array[3] = 4;
    outPut(a_array);
    outPut(b_array);
</script>

lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4

6. 以下代码的输出结果是什么？

function setName(){
    name="张三";
}
setName();
console.log(name);

"张三"

7.以下代码的输出结果是什么？

//考点：1、变量声明提升 2、变量搜索机制
var a=1;
function test(){
    console.log(a);
    var a=1;
}
test();

undefined

8.以下代码的输出结果是什么？

var b=2;
function test2(){
    window.b=3;
    console.log(b);
}
test2();

3

9.以下代码的输出结果是什么？

c=5;//声明一个全局变量c 
function test3(){
    window.c=3;
    console.log(c);     //答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值
    var c;
    console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c
}
test3();

10.以下代码的输出结果是什么？

var arr = [];
arr[0]  = 'a';
arr[1]  = 'b';
arr[10] = 'c';
alert(arr.length);  //答案：11
console.log(arr[5]);    //答案：undefined

11. 以下代码的输出结果是什么？

var a=1;
console.log(a++);       //答案：1
console.log(++a);       //答案：3

12.以下代码的输出结果是什么？

console.log(null==undefined);   //答案：true
console.log("1"==1);        //答案：true，因为会将数字1先转换为字符串1
console.log("1"===1);       //答案：false，因为数据类型不一致

13.以下代码的输出结果是什么？

typeof 1;       "number"
typeof "hello";     "string"
typeof /[0-9]/;     "object"
typeof {};      "object"
typeof null;        "object"
typeof undefined;   "undefined"
typeof [1,2,3];     "object"
typeof function(){};    //"function"

14. 以下代码的输出结果是什么？

parseInt(3.14);         //3
parseFloat("3asdf");        //3
parseInt("1.23abc456");
parseInt(true);//"true" NaN

15.以下代码的输出结果是什么？

//考点：函数声明提前
function bar() {
    return foo;
    foo = 10;
    function foo() {}
    //var foo = 11;
}
alert(typeof bar());//"function"

3月16日

1. 以下代码的输出结果是什么？

var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}
}
bar();
alert(foo);//答案：1

2. 以下代码的输出结果是什么？

console.log(a);//是一个函数
var a = 3;
function a(){}
console.log(a);////3

3.以下代码的输出结果是什么？

//考点：对arguments的操作
function foo(a) {
    arguments[0] = 2;
    alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值
}
foo(1);

4.以下代码的输出结果是什么？

function foo(a) {
    alert(arguments.length);//答案：3，因为arguments是对实参的访问
}
foo(1, 2, 3);

5.以下代码的输出结果是什么？

bar();//报错
var foo = function bar(name) {
    console.log("hello"+name);
    console.log(bar);
};
//alert(typeof bar);
foo("world");//"hello"
console.log(bar);//undefined
console.log(foo.toString());
bar();//报错

6.以下代码的输出结果是什么？

function test(){
    console.log("test函数");
}
setTimeout(function(){
    console.log("定时器回调函数");
}, 0)
test();
结果：
test函数
定时器回调函数

7. CSS3有哪些新特性？

• CSS3实现圆角（border-radius），阴影（box-shadow），
• 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
• 增加了更多的CSS选择器 多背景 rgba
• 在CSS3中唯一引入的伪元素是 ::selection.
• 媒体查询，多栏布局
• border-image

8. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

• 新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation

• 移除的元素：

1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；

• 支持HTML5新标签：

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

   <!--[if lt IE 9]>
   
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   
   <![endif]-->
   

• 如何区分：

  DOCTYPE声明新增的结构元素、功能元素

9. 本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

10.如何实现浏览器内多个标签页之间的通信？

调用 localstorge、cookies 等本地存储方式

11.你如何对网站的文件和资源进行优化？

• 文件合并
• 文件最小化/文件压缩
• 使用CDN托管
• 缓存的使用

12.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

13.新的 HTML5 文档类型和字符集是？

• HTML5文档类型：<!doctype html>
• HTML5使用的编码<meta charset=”UTF-8”>

14.HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

15.HTML5 存储类型有什么区别？

Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

3月17日

1. CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked            单选框或复选框被选中。

2. 请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

sss

3.描述下CSS3里实现元素动画的方法

sss

4.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计？

首先划分成头部、body、脚部；。。。。。

实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。

5. 为什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便
• 突破浏览器并发限制
• 节约cookie带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

6. 请谈一下你对网页标准和标准制定机构重要性的理解。

（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

7. 请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

webstorage和cookie的区别：

WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生。

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间。

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

8.知道css有个content属性吗？有什么作用？有什么应用？

知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; }
.clearfix { 
    *zoom:1; 
}
after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

9.如何在 HTML5 页面中嵌入音频？

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audiocontrols>
<sourcesrc="jamshed.mp3"type="audio/mpeg">
Yourbrowserdoes'ntsupportaudioembeddingfeature.
</audio>

10. 如何在 HTML5 页面中嵌入视频？

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
<videowidth="450"height="340"controls>
<sourcesrc="jamshed.mp4"type="video/mp4">
Yourbrowserdoes'ntsupportvideoembeddingfeature.
</video>

11. HTML5 引入什么新的表单属性？

Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl

12. (写)描述一段语义的html代码吧。

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）
就是基于语义化设计原则）  
< div id="header">
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>
语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：
段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：
<h1>包含标题，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本缩进。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何样式信息。例如：
不使用 <font> 或 <center> 等格式标记。
类或 ID 中不引用颜色或位置。

13.HTML5和CSS3的新标签

• HTML5：nav,footer,header,section,hgroup,video,time,canvas,audio...

• CSS3:RGBA,opacity,text-shadow,box-shadow,border-radius,border-image,

  border-color,transform...

14. 移动端常用类库及优缺点？

知识面宽度，多多益善

15. Zepto库和JQ区别

Zepto相对jQuery更加轻量，主要用在移动端，jQuery也有对应的jQuerymobile移动端框架

3月18日

1. Ajax 是什么? 如何创建一个Ajax？

• Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持
• 使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

基本步骤：
var xhr =null;//创建对象 
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
     xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
     xhr.setRequestHeader(“”,””);//设置http头信息 
     xhr.onreadystatechange =function(){}//指定回调函数 
     xhr.send();//发送请求 

• js框架（jQuery/EXTJS等）提供的ajax API对原生的ajax进行了封装，熟悉了基础理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容

2. 同步和异步的区别？

• 同步：阻塞的

  张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭

  浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面异步：

• 非阻塞的

  张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃

  浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

3. 如何解决跨域问题?

• 理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
• 出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

4. 页面编码和被请求的资源编码如果不一致如何处理？

对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

5. 简述ajax 的过程。

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新

6. 阐述一下异步加载。

1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js

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

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

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

• GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符
• POST：一般用于修改服务器上的资源，对所发送的信息没有限制
• 在以下情况中，请使用 POST 请求：
  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（POST 没有数据量限制）
  3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

9. ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

10. Ajax的最大的特点是什么。

Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源。

11. ajax的缺点�?

1. ajax不支持浏览器back按钮。
2. 安全问题 AJAX暴露了与服务器交互的细节。
3. 对搜索引擎的支持比较弱。
4. 破坏了程序的异常机制。

12. ajax请求的时候get 和post方式的区别

• get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。
• post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

13. 解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

14. 什么是Ajax和JSON，它们的优缺点。

• Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。
  • 优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
  • 缺点：对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限
• JSON是一种轻量级的数据交换格式，ECMA的一个子集
  • 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

15. http常见的状态码有那些？分别代表是什么意思？

• 200 OK - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 404 Not Found - 请求的资源（网页等）不存在
• 500 Internal Server Error - 内部服务器错误
• 400 Bad Request -客户端请求有语法错误，不能被服务器所理解
• 403 Forbidden -服务器收到请求，但是拒绝提供服务
• 503 Server Unavailable -服务器当前不能处理客户端的请求，一段时间后可能恢复正常

3月19日

1. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

2. ajax请求时，如何解释json数据

使用eval()或者JSON.parse()鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

3. javascript的本地对象，内置对象和宿主对象

• 本地对象为独立于宿主环境的ECMAScript提供的对象，包括ArrayObjectRegExp等可以new实例化的对象
• 内置对象为Gload，Math 等不可以实例化的(他们也是本地对象，内置对象是本地对象的一个子集)
• 宿主对象为所有的非本地对象，所有的BOM和DOM对象都是宿主对象，如浏览器自带的document,window 等对象

4.为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

5. 请说出三种减低页面加载时间的方法

1. 压缩css、js文件
2. 合并js、css文件，减少http请求
3. 外部js、css文件放在最底下
4. 减少dom操作，尽可能用变量替代不必要的dom操作

6. JQuery一个对象可以同时绑定多个事件，这是如何实现的？

jQuery可以给一个对象同时绑定多个事件，低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。

7. 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

• Webkit是浏览器引擎，包括html渲染和js解析功能，手机浏览器的主流内核，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。
• 对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js调试工具使用，熟练使用这些工具可以快速提高解决问题的效率

8. 如何测试前端代码? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

了解BDD行为驱动开发与TDD测试驱动开发已经单元测试相关概念。

9. 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

• Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，
• Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
• Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。
• Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。

10. 简述一下 Handlebars 的基本用法？

没有用过的话说出它是干什么的即可

11. 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？�

学习技术不仅要会用，还有熟悉它的实现机制，这样在开发中遇到问题时才能更好的解决

12. 用js实现千位分隔符?

aaa

13. 检测浏览器版本版本有哪些方式？

IE与标准浏览器判断，IE不同版本的判断，userAgent  var ie = /*@cc_on !@*/false;

14. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

对两种事件模型的理解

15. 实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

• 考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
• 考察点2：是否知道如何判断一个变量是什么类型的
• 考察点3：递归算法的设计

// 方法一：
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
  o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
//方法二：
   /**
* 克隆一个对象
* @param Obj
* @returns
*/
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; 
    } 
}

3月20日

1. 如何消除一个数组里面重复的元素？

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){
    var newArr=[];
    var obj={};
    var index=0;
    var l=arr.length;
    for(var i=0;i<l;i++){
        if(obj[arr[i]]==undefined)
        {
            obj[arr[i]]=1;
            newArr[index++]=arr[i];
        }
        else if(obj[arr[i]]==1)
            continue;
    }
    return newArr;
}
var newArr2=deRepeat(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25

2. 小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：

function Dog() {
    this.wow = function() {
        alert(’Wow’);
    }
    this.yelp = function() {
        this.wow();
    }
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）

function MadDog() {
this.yelp = function() {
var self = this; 
setInterval(function() {
self.wow(); 
}, 500);
}
}
MadDog.prototype = new Dog(); 
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

3. 下面这个ul，如何点击每一列的时候alert其index?（闭包）

<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
};
}
//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++){
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
alert(a);
}
})(i);
}

4. 编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

/***@paramselector{String}传入的CSS选择器。*@return{Array}*/

var query = function (selector) {
    var reg = /^(#)?(\.)?(\w+)$/img;
    var regResult = reg.exec(selector);
    var result = [];
//如果是id选择器
    if (regResult[1]) {
        if (regResult[3]) {
            if (typeof document.querySelector === "function") {
                result.push(document.querySelector(regResult[3]));
            } else {
                result.push(document.getElementById(regResult[3]));
            }
        }
    }
    //如果是class选择器
    else if (regResult[2]) {
        if (regResult[3]) {
            if (typeof document.getElementsByClassName === 'function') {
                var doms = document.getElementsByClassName(regResult[3]);
                if (doms) {
                    result = converToArray(doms);
                }
            }
            //如果不支持getElementsByClassName函数
            else {
                var allDoms = document.getElementsByTagName("*");
                for (var i = 0, len = allDoms.length; i < len; i++) {
                    if (allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                        result.push(allDoms[i]);
                    }
                }
            }
        }
    }
    //如果是标签选择器
    else if (regResult[3]) {
        var doms = document.getElementsByTagName(regResult[3].toLowerCase());
        if (doms) {
            result = converToArray(doms);
        }
    }
    return result;
}
function converToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0);//针对非IE浏览器 
    } catch (ex) {
        array = new Array();
        for (var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i])
        }
    }
    return array;
}

5. 请评价以下代码并给出改进意见。

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);
});
} 
}

• ·不应该在if和else语句中声明addListener函数，应该先声明；
• 不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
• 由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下

改进如下：
function addEvent(elem, type, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handler, false);
    } else if (elem.attachEvent) {
        elem['temp' + type + handler] = handler;
        elem[type + handler] = function () {
            elem['temp' + type + handler].apply(elem);
        };
        elem.attachEvent('on' + type, elem[type + handler]);
    } else {
        elem['on' + type] = handler;
    }
}

6. 给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：addSpace(“hello world”) // -> ‘h e l l o w o r l d’。

String.prototype.spacify = function () {
    return this.split('').join(' ');
};

接着上述问题答案提问，1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)　2）函数声明与函数表达式的区别？

答案：在js中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

7. 定义一个log方法，让它可以代理console.log的方法。

function log(msg)　{
console.log(msg);
}
log("hello world!") // hello world!

如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：

function log(){
console.log.apply(console, arguments);
};

到此，追问apply和call方法的异同。

• 对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
• 但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

8. 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

假设接第上题题干，我们要给每个log方法添加一个”(app)”前缀，比如’hello world!’ ->’(app)hello world!’。方法如下：

function log() {
    //为了使用unshift数组方法，将argument转化为真正的数组
    var args = Array.prototype.slice.call(arguments); 
    args.unshift('(app)');
    console.log.apply(console, args);
};

9. 对作用域上下文和this的理解，看下列代码：

var User = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?

问两处console输出什么？为什么？

答案是1和undefined。

func是在winodw的上下文中被执行的，所以会访问不到count属性。

继续追问，那么如何确保Uesr总是能访问到func的上下文，即正确返回1。正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：

Function.prototype.bind = Function.prototype.bind || function(context){
var self = this;
return function(){
return self.apply(context, arguments);
};
}
var func = User.getCount.bind(User);
console.log(func());

10. 原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？�

• window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
• $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

 /*
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
 */
var whenReady = (function () { //这个函数返回whenReady()函数
    var funcs = []; //当获得事件时，要运行的函数
    var ready = false; //当触发事件处理程序时,切换为true
    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if (ready) return; //确保事件处理程序只完整运行一次
        //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
        if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件处理函数完整执行,切换ready状态, 并移除所有函数
        ready = true;
        funcs = null;
    }

    //为接收到的任何事件注册处理程序
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false); //IE9+
        window.addEventListener('load', handler, false);
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    //返回whenReady()函数
    return function whenReady(fn) {
        if (ready) {
            fn.call(document);
        }
        else {
            funcs.push(fn);
        }
    }
})();

如果上述代码十分难懂，下面这个简化版：

function ready(fn){
if(document.addEventListener) {//标准浏览器
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();//执行函数
}, false);
}else if(document.attachEvent) {//IE
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();//函数执行
}
});
}
};

11. （设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

回答出概念即可，下面是几个要点

1. 给需要拖拽的节点绑定mousedown,mousemove,mouseup事件
2. mousedown事件触发后，开始拖拽
3. mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
4. mouseup时，拖拽结束
5. 需要注意浏览器边界的情况

12. 请实现如下功能：用户第一次访问网站时显示tip小提示，同一天访问不再提示，用户点击“我知道了”之后不再提示。

function setcookie(name, value, days) { //给cookie增加一个时间变量
    var exp = new Date();
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); //设置过期时间为days天
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
    var result = "";
    var myCookie = "" + document.cookie + ";";
    var searchName = "+name+" = ";
    var startOfCookie = myCookie.indexOf(searchName);
    var endOfCookie;
    if (satrtOfCookie != -1) {
        startOfcookie += searchName.length;
        endOfCookie = myCookie.indexOf(";", startOfCookie);
        result = (myCookie.substring(startOfCookie, endOfCookie));
    }
    return result;
}
(function () {
    var oTips = document.getElementById('tips');//假设tips的id为tips
    var page = {
        check: function () {//检查tips的cookie是否存在并且允许显示
            var tips = getCookie('tips');
            if (!tips || tips == 'show') return true;//tips的cookie不存在
            if (tips == "never_show_again") return false;
        },
        hideTip: function (bNever) {
            if (bNever) setcookie('tips', 'never_show_again', 365);
            oTips.style.display = "none";//隐藏
        },
        showTip: function () {
            oTips.style.display = "inline";//显示，假设tips为行级元素
        },
        init: function () {
            var _this = this;
            if (this.check()) {
                _this.showTip();
                setcookie('tips', 'show', 1);
            }
            oTips.onclick = function () {
                _this.hideTip(true);
            };
        }
    };
    page.init();
})();

13. 说出以下函数的作用是？空白区域应该填写什么？

//define 
(function(window){
function fn(str){
this.str=str;
}

fn.prototype.format = function(){
var arg = ______;
return this.str.replace(_____,function(a,b){
return arg[b]||"";
});
}
window.fn = fn;
})(window);

//use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();

• 访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果：
  • 第一个空是：arguments
  • 第二个空是：/{(\d+)}/ig

14. Javascript作用链域?

理解变量和函数的访问范围和生命周期，全局作用域与局部作用域的区别，JavaScript中没有块作用域，函数的嵌套形成不同层次的作用域，嵌套的层次形成链式形式，通过作用域链查找属性的规则需要深入理解。

15. 谈谈This对象的理解。

理解不同形式的函数调用方式下的this指向，理解事件函数、定时函数中的this指向，函数的调用形式决定了this的指向。

3月21日

1. eval是做什么的？

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

2. 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

• 在IE中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的，还是其他事件,都会更新window.event对象.所以在代码中，只要调用window.event就可以获取事件对象， 再event.srcElement就可以取得触发事件的元素进行进一步处理.
• 在FireFox中，事件对象却不是全局对象，一般情况下，是现场发生，现场使用，FireFox把事件对象自动传给事件处理程序.
• 关于事件的兼容性处理要熟练掌握，事件对象具体哪些属性存在兼容性问题，IE与标准事件模型事件冒泡与事件捕获的支持要理解

3. 什么是闭包（closure），为什么要用它？

简单的理解是函数的嵌套形成闭包，闭包包括函数本身已经它的外部作用域

使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值

4. 如何判断一个对象是否属于某个类？

Instanceof   constructor

5. new操作符具体干了什么呢?

1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2. 属性和方法被加入到 this 引用的对象中。
3. 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

6. 用原生JavaScript的实现过什么功能吗？

主要考察原生js的实践经验

7. Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

• HasOwnProperty

8. js延迟加载的方式有哪些？

• 方案一：<script>标签的async="async"属性（详细参见：script标签的async属性）
• 方案二：<script>标签的defer="defer"属性
• 方案三：动态创建<script>标签
• 方案四：AJAX eval（使用AJAX得到脚本内容，然后通过eval_r(xmlhttp.responseText)来运行脚本）
• 方案五：iframe方式

9. 模块化开发怎么做？

理解模块化开发模式：浏览器端requirejs，seajs；服务器端nodejs；ES6模块化；fis、webpack等前端整体模块化解决方案；grunt、gulp等前端工作流的使用

10. AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

理解这两种规范的差异，主要通过requirejs与seajs的对比，理解模块的定义与引用方式的差异以及这两种规范的设计原则

11. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）

核心是js的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存

12. 让你自己设计实现一个requireJS，你会怎么做？

核心是实现js的加载模块，维护js的依赖关系，控制好文件加载的先后顺序

13. 谈一谈你对ECMAScript6的了解？

ES6新的语法糖，类，模块化等新特性

14. ECMAScript6 怎么写class么，为什么会出现class这种东西?

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
     return '('+this.x+', '+this.y+')';
  }
}

15. documen.write和 innerHTML的区别?

• document.write是重写整个document, 写入内容是字符串的html
• innerHTML是HTMLElement的属性，是一个元素的内部html内容