面经

• Backbone router怎么实现页面跳转，
  router里面定义routes对象，在对象里面定义动作键值对，当url匹配到key时，执行相应的动作，显示相应的页面。
• 解释一下 Backbone 的 MVC 实现方式？
  Model主要负责主页面数据的获取。
  View主要负责监听model事件以及与用户之间的交互。
  Backbone中没有controller的概念，C的功能总是负责响应请求并调用相应的动作来让模型产生变化同时渲染视图。Backbone中主要是通过View和Router来实现的。View中通过监听DOM事件/model的change事件，实现与model的交互与视图的更新。Router实现页面间的跳转。

• Backbone的优缺点。
  优点：
  1.分层的结构很清晰
  2.backbone将页面的数据、逻辑、视图解耦，开发过程中可以将数据交互、业务逻辑、用户界面等分配给多人开发。
  缺点：
  1.Model层简单，对于一对多的数据结构有点应付不过来。
  2.view很容易产生内存泄漏的问题。
  3.对于简单页面，使用这种MVC还是有些繁琐。

• 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
  路由指的是根据不同的url显示不同的页面和内容；所谓的前端路由是把路由的这一功能交给前端来实现。适合用在单页面应用中，大部分页面结构不发生变化，只是部分内容产生变化。
  优点：用户体验相对较好，不需要每次从服务器全部获取，能够将页面快速的展现给用户。
  缺点：使用浏览器的前进和后退之后会重新向服务器请求整个页面，没有很好的利用缓存；单页面无法记住之前的滚动的位置，无法再前进后退中记住滚动的位置。

• 前端templating(Mustache, handlebars)是干嘛的, 怎么用?Mustache和handlerbars、hogan的比较
  前端模板将Html结构从包含他们的内容中抽离出来的方法。
  Mustache的语法比较简单：

//表示一个变量
{{name} 

//person不存在或者是null、undefined、false、0、NaN、空字符串、空列表，块不会被渲染；person存在且不是null、undefined、false、0、NaN、空字符串、空列表，块会被渲染一次或者是多次，如果是非空列表，会循环渲染列表中的值。如果变量的值是数组，{{.}}可以用来指向数组中的当前的值，实现循环渲染。
{{#person}}{{/person}} //表示一个块

{{^person}}{{/person}} //反向块，只有内容是null、undefined、false、或是空列表时渲染。

• Mustache、Hogan、Handlebars的区别
  Mustache 不会提前编译模板，所以比其他两个要慢
  Handlebars兼容了Mustache，性能比Hogan稍微好一点，模板在使用之前编译，解析的时候先进行编译然后数据传递到编译好的模板中以供渲染，这样的话渲染的速度就会比Mustache快。与Mustache的logic-less的思想不一样的是，Handlebars 提供了基本的扩展方法使得数据操作更为简单。
  Hogan 类似于Mustache，但是在渲染之前进行编译，所以速度比Mustache要快，相比于handleBars，Hogan并没有提供额外的方法。

• div(id为parent)里面有n个div。实现当页面输出时，n个div反序，即第一个到最后一个，第二个到倒数第二个,以此类推

//考察append()的用法，若元素已存在于页面中，使用append是使该元素移位。
var len= $('#parent').children().length;
for(var i = len; i >= 0; i-- ){
    $('#parent').append($('#parent').children()[i]);
}

• 实现2列布局，左边固定宽度（100px），右边自适应

<div class = "container">
    <div class = "left"></div>
    <div class = "right"></div>
</div>
*{
    padding: 0 ;
    margin: 0 ;
}
.left{
    width: 100px;
    height: 500px;
    float: left;
    background: green;
}
.right{
    margin-left : 100px;
    height: 500px;
    background: red;
}

• js中的事件机制.

js中的事件指的是文档或浏览器窗口中发生的一些特定的交互瞬间，可以使用事件处理程序来预定事件，使得在事件发生时执行响应的动作。
说起事件，绕不开的是事件流(描述的是从页面中接收事件的顺序)，js中的事件流有3种：
1.事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播至最不具体的节点（document）
2.事件捕获：不太具体的节点最先接收事件，逐级向下至最具体的元素接收
3.DOM事件：包括3个阶段：事件捕获阶段，事件目标阶段、事件冒泡阶段
再来说事件处理程序，分为4种事件处理程序：
1.HTML事件处理程序

<input type = "button" value = "click me" onclick = "showMessage()" / >
function showMessage(){
    alert("hello")
}

2.DOM0级事件处理程序

//以这种方式添加的事件处理程序会在事件流的冒泡阶段处理
//添加多个相同事件时，前面的不执行，后面的覆盖前面的
//通过btn.onclick=null 移除事件
//事件处理程序在元素的作用域中运行
btn.onclick = function() {
    alert(this.value) //this指向btn
}

3.DOM2级处理程序

//第三个参数 true表示捕获，false表示冒泡
//用removeEventListener移除，参数必须与addEventListener一样才能移除，但是注意的是添加的匿名函数不能被移除
//添加多个相同的事件时，会按照添加他们的顺序触发
//事件处理程序在元素的作用域中运行
btn.addEventListener("click",function(){
    alert(this.value) // this指向btn
},false)

4.IE事件处理程序

//用detachEvent()移除
//添加多个相同的事件时，按照添加顺序的反序触发
//事件处理程序在全局作用域中运行
btn.attachEvent("onclick",function(){
    alert(this.value); //this指向window
})

• 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，会执行几次事件，然后会先执行冒泡还是捕获？如果父子元素均绑定两个点击 一个捕获一个冒泡呢？
  如果给一个dom元素绑定2个点击事件，会执行2次，按照绑定的顺序执行。

//先弹出'我是冒泡'，然后是'我是捕获'
<button id = "btn">click me</button>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
    alert('我是冒泡')
},false);
btn.addEventListener('click',function(){
    alert('我是捕获')
},true);

父子元素均绑定：被点击元素的事件是按照绑定顺序执行，对于父元素是先捕获后冒泡
事件的执行顺序是：父元素捕获 -> 子元素按照绑定顺序 -> 父元素冒泡

<div id = "parent">
  <button id = "child">click me</button>
</div>
//父捕获  子捕获 子冒泡 父冒泡
parentDiv.addEventListener('click',function(){
    alert('我是父元素捕获')
  },true);
  parentDiv.addEventListener('click',function(){
    alert('我是父元素冒泡')
  },false);
  btn.addEventListener('click',function(){
    alert('我是子元素捕获')
  },true);
  btn.addEventListener('click',function(){
    alert('我是子元素冒泡')
  },false);

//父捕获  子冒泡 子捕获 父冒泡
  btn.addEventListener('click',function(){
    alert('我是子元素冒泡')
  },false);
  btn.addEventListener('click',function(){
    alert('我是子元素捕获')
  },true);
  parentDiv.addEventListener('click',function(){
    alert('我是父元素冒泡')
  },false);
  parentDiv.addEventListener('click',function(){
    alert('我是父元素捕获')
  },true);

• 说说js异步
  首先js是单线程的，也就是说一个浏览器进程中只有一个JS的执行线程，当有多个任务时，其他任务排队等待。但是浏览器是多线程的。异步机制一般是由浏览器的两个或以上常驻线程共同完成的。例如ajax请求就是由js执行线程和事件触发线程共同完成的：js执行线程发出异步请求（这个时候浏览器新开一个线程执行这一请求）然后js继续执行其他任务。等到事件触发线程监听到请求完毕时会将完成事件推入任务队列的尾部等待执行。
  一般浏览器会实现3个常驻线程：1、js引擎线程（等待任务队列中任务的到来并加以处理）2、GUI渲染进程（渲染浏览器界面）3、事件触发线程（当一个事件被触发，该线程会将事件添加到任务队列的末尾，等待js引擎的执行。）
  异步运行的机制
  1.所有同步任务在主线程上执行，形成一个执行栈
  2.主线程之外，存在一个任务队列，一旦异步有了运行结果。就在任务队列中放置一个事件
  3.同步任务执行完毕之后，再读取任务队列
  异步模式编程的几种方法
  1.回调函数
  2.事件监听：事件驱动模式，任务的执行不取决代码顺序，而是取决于事件的发生
  3.Promises对象：每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数
  4.观察者模式

• 那些操作会造成内存泄漏？
  js中的垃圾回收机制：
  1.标记清除:垃圾收集器在运行的时候会给存储在内存中的所有变量加上标记，然后去掉环境中的以及被环境中变量引用的变量的标记，而在此之后再被加上标记的变量就被视为准备删除的变量
  2.引用计数：
  内存泄漏指的是任何对象在不再拥有或者需要的时候依然存在。
  垃圾回收器定期扫描并计算引用数量。如果一个对象的引用数量为 0或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
  造成内存泄漏的操作有：跟踪记录，每个值被引用的次数，当值被引用的次数为0的时候，则会进行回收
  1.setTimeout的是一个参数使用的是字符串而不是参数的时候
  2.闭包过多的时候
  3.循环引用：两个对象互相引用且彼此保留时就形成了一个循环
  4.页面中元素被移除，但是元素绑定的事件未被移除时

• Jquery中的bind(),live(),delegate(),on()的区别？
  bind()：为匹配到的每个元素绑定事件，但是不支持为动态添加的元素绑定事件
  live()：利用事件委托的方式将事件绑定到了根元素(document)上
  delegate()：类似于live()，但是可以自由选择要绑定事件的dom元素
  on()：可以实现bind()/live()甚至delegate()的功能
• Node.js的适用场景？
  NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景
  1.大量Ajax请求的场景：nodeJS可以响应大量的并发请求
  2.统一Web应用的UI层
  3.RESTful API：这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。