关于这位同学面试过程中涉及到的知识点：
1.标准盒模型、怪异盒模型
简单来说，box-sizing属性中，标准盒模型对应content-box（initial），怪异对应border-box（IE），
标准：宽高包含padding和border
怪异：padding和border是算在宽高里的
2.target与currentTarget
简单来说：js的事件处理机制是有顺序的，先从window开始，经过document，html，body，div这样刷下来，叫做事件捕获
再从div一路回到window叫做事件冒泡，体现在代码上就是：当我们点击最里面的div的时候，打印数序应该为three->two->one
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
one.addEventListener('click',function(e){
console.log('one');
},false);
two.addEventListener('click',function(e){
console.log('two');
},false);
three.addEventListener('click',function(e){
console.log('three');
},true);
//false:默认值，冒泡阶段执行 //true:捕获阶段执行
那么target和currentTarget有什么区别呢?
<div id="out">
<button id="in">现在我来点击这个button</button>
</div>
var out= document.getElementById("out");
var in= document.getElementById("in");
out.addEventListener('click',function(e){
e.target;//指向in
e.currentTarget;//指向out自己
})
in.addEventListener('click',function(e){
e.target;//指向in
e.currentTarget;//指向in自己
})
3.浅拷贝深拷贝
看下图
image
解释：数值之间赋值拷贝非地址拷贝，所以更改a时b不会受其影响（若为数组或对象则是地址拷贝，修改a会影响b），围绕这个特性展开深拷贝处理
function inCopy(obj1,obj2) {
var obj1 = obj1 || {};//容错处理
for (var k in obj2) {
if(obj2.hasOwnProperty(k)){ //只拷贝实例属性，不进行原型的拷贝
if(typeof obj2[k] == 'object') { //引用类型的数据单独处理
obj1[k] = Array.isArray(obj2[k])?[]:{};
inCopy(obj1[k],obj2[k]); //递归处理引用类型数据
}else{
obj1[k] = obj2[k]; //值类型的数据直接进行拷贝
}
}
}
}
这里注意几个比较重要的点：
1.容错处理（细节不解释）
2.obj.hasOwnProperty(xxx);返回一个bool，检测obj是否存在属性xxx，xxx是obj自己的属性而非proto指针指向的属性（即构造函数prototype的属性）
3.判断是否为array，对其进行定义[] or {}，若不做这一步，直接push会报错
4.babel把ES6转成ES5或者ES3之类的原理是什么，有没有去研究?
参考博客：深入理解Babel原理及其使用，babel把ES6转成ES5的原理是什么？
babel是一个转译器，感觉相对于编译器compiler，叫转译器transpiler更准确，因为它只是把同种语言的高版本规则翻译成低版本规则，而不像编译器那样，输出的是另一种更低级的语言代码。
但是和编译器类似，babel的转译过程也分为三个阶段：parsing、transforming、generating，以ES6代码转译为ES5代码为例，babel转译的具体过程如下：
==》 ES6代码输入
==》 babylon进行解析
==》 得到AST
==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树
==》 用babel-generator通过AST树生成ES5代码
PS:名词解释（AST）
抽象语法树（Abstract Syntax Tree）也称为AST语法树
指的是源代码语法所对应的树状结构。
也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上
此外，还要注意很重要的一点就是，babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Proxy、Set等），这些babel是不会转译的。需要用户自行引入polyfill来解决。
5.函数柯里化
1.Currying 的重要意义在于可以把函数完全变成「接受一个参数；返回一个值」的固定形式，这样对于讨论和优化会更加方便。
参考博客：函数柯里化小结
6.JS模块化Commonjs,UMD,CMD规范的了解，以及ES6的模块化跟其他几种的区别，以及出现的意义
参考博客：javascript模块化之CommonJS、AMD、CMD、UMD、ES6
7.说一下Vue实现双向数据绑定的原理，以及vue.js和react.js异同点，如果让你选框架，你怎么怎么权衡这两个框架，分析一下。
参考博客:剖析Vue原理&实现双向绑定MVVM
7.1 mvvm框架双向绑定原理：
几种实现双向绑定的做法
目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。
实现数据绑定的做法有大致如下几种：
发布者-订阅者模式（backbone.js）
脏值检查（angular.js）
数据劫持（vue.js）
发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可点这里
这种方式现在毕竟太low了，我们更希望通过 vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式
脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：
-
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
-
XHR响应事件 ( $http )
-
浏览器Location变更事件 ( $location )
-
Timer事件( $timeout , $interval )
-
执行 $digest() 或 $apply()
数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()（注）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。关于vue数据劫持原理详解
网友评论