媒介
经由几天的研讨，发明进修框架的底层手艺，收成颇丰，比拟只进修框架的运用要来的合算；假如事变急需，疾速上手运用，控制怎样运用短期内越发高效；假如有较多的时刻来体系进修，发起研讨一下框架的等层手艺、道理。
Vue、React、Angular三大框架对照
1、Vue
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，正确来讲不是一个框架，它聚焦在V（view）视图层。
它有以下的特征：
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
长处：
- 简朴：官方文档很清楚，比 Angular 简朴易学。
- 疾速：异步批处置惩罚体式格局更新 DOM。
- 组合：用解耦的、可复用的组件组合你的运用顺序。
- 紧凑：~18kb min+gzip，且无依靠。
- 壮大：表达式 无需声明依靠的可推导属性 (computed properties)。
- 对模块友爱：可以经由过程 NPM、Bower 或 Duo 装置，不强制你一切的代码都遵照 Angular 的种种划定，运用场景越发天真。
瑕玷：
- 新生儿：Vue.js是一个新的项目，没有angular那末成熟。
- 影响度不是很大：google了一下，有关于Vue.js多样性或许说雄厚性少于其他一些著名的库。
- 不支撑IE8
2、React
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 具有较高的机能，代码逻辑异常简朴，越来越多的人已最先关注和运用它。
它有以下的特征：
1.声明式设想：React采纳声明范式，可以轻松形貌运用。
2.高效：React经由过程对DOM的模仿，最大限制地削减与DOM的交互。
3.天真：React可以与已知的库或框架很好地合营。
长处：
- 速度快：在UI衬着过程当中，React经由过程在假造DOM中的微操纵来完成对现实DOM的部分更新。
- 跨浏览器兼容：假造DOM协助我们处置惩罚了跨浏览器题目，它为我们供应了标准化的API，甚至在IE8中都是没题目的。
- 模块化：为你顺序编写自力的模块化UI组件，如许当某个或某些组件涌现题目是，可以方便地举行断绝。
- 单向数据流：Flux是一个用于在JavaScript运用中竖立单向数据层的架构，它跟着React视图库的开辟而被Facebook观点化。
- 同构、地道的javascript：因为搜索引擎的爬虫顺序依靠的是效劳端相应而不是JavaScript的实行，预衬着你的运用有助于搜索引擎优化。
- 兼容性好：比方运用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型运用。它们使得那些困难的使命不再让人望而却步。
瑕玷：
- React自身只是一个V罢了，并非一个完全的框架，所以假如是大型项目想要一套完全的框架的话，基本都须要加上ReactRouter和Flux才能写大型运用。
3、Angular
Angular是一款优异的前端JS框架，已被用于Google的多款产物当中。
它有以下的特征：
1.优越的运用顺序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
长处：
- 模板功用壮大雄厚，自带了极其雄厚的angular指令。
- 是一个比较完善的前端框架，包括效劳，模板，数据双向绑定，模块化，路由，过滤器，依靠注入等一切功用；
- 自定义指令，自定义指令后可以在项目中屡次运用。
- ng模块化比较斗胆勇敢的引入了Java的一些东西（依靠注入），可以很轻易的写出可复用的代码，关于迅速开辟的团队来讲异常有协助。
- angularjs是互联网伟人谷歌开辟，这也意味着他有一个坚固的基本和社区支撑。
瑕玷：
- angular 入门很轻易 但深切后观点许多, 进修中较难明白.
- 文档例子异常少, 官方的文档基本只写了api, 一个例子都没有, 许多时刻详细怎样用都是google来的, 或直接问misko,angular的作者.
- 对IE6/7 兼容不算迥殊好, 就是可以用jQuery本身手写代码处置惩罚一些.
- 指令的运用的最好实践教程少, angular实在很天真, 假如不看一些作者的运用准绳,很轻易写出 怪样子的代码, 比方js中照样像jQuery的头脑有许多dom操纵.
- DI 依靠注入 假如代码紧缩须要显现声明.
经由过程以上比拟较，您越发倾向于进修哪个呢？
正题：Vue的基本道理
1、竖立假造DOM Tree，经由过程document.createDocumentFragment()，遍历指定根节点内部节点，依据{{ prop }}、v-model等划定规矩举行compile；
2、经由过程Object.defineProperty()举行数据变化阻拦；
3、截取到的数据变化，经由过程宣布者-定阅者形式，触发Watcher，从而转变假造DOM中的详细数据；
4、经由过程转变假造DOM元素值，从而转变末了衬着dom树的值，完成双向绑定
完成数据的双向绑定在于Object.defineProperty()
Vue双向绑定的完成
1、浅易双绑
起首，我们把注重力集合在这个属性上：Object.defineProperty。
Object.defineProperty() 要领会直接在一个对象上定义一个新属性，或许修正一个对象的现有属性， 并返回这个对象。
语法：Object.defineProperty(obj, prop, descriptor)
什么叫做，定义或修正一个对象的新属性，并返回这个对象呢？
var obj = {};
Object.defineProperty(obj,'hello',{
get:function(){
//我们在这里阻拦到了数据
console.log("get要领被挪用");
},
set:function(newValue){
//转变数据的值，阻拦下来额
console.log("set要领被挪用");
}
});
obj.hello//输出为“get要领被挪用”，输出了值。
obj.hello = 'new Hello';//输出为set要领被挪用，修正了新值经由过程以上要领可以看出，猎取对象属性值触发get、设置对象属性值触发set，因而我们可以设想到数据模型对象的属性设置和读取可以驱动view层的数据变化，view的数据变化传递给数据模型对象，在set内里可以做许多事变。
在这基本上，我们可以做到数据的双向绑定：
let obj = {};
Object.defineProperty(obj, 'name', {
set: function(newValue){
console.log('触发setter');
document.querySelector('.text-box').innerHTML = newValue;
document.querySelector('.inp-text').value = newValue;
},
get: function(){
console.log('触发getter');
}
});
document.querySelector('.inp-text').addEventListener('keyup', function(e){
obj.name = e.target.value;
}, false);html
<input class="inp-text" type="text">
<div class="text-box"></div>
以上只是vue的中心头脑，经由过程对象底层属性的set和get举行数据阻拦，vue的假造dom又是怎样完成的，且看以下剖析。
2、假造DOM树
竖立假造DOM：
var frag = document.createDocumentFragment();
view层的{{msg}}和v-model的编译划定规矩以下：
html:
<div id="container">
{{ msg }}<br>
<input class="inp-text" type="text" v-model="inpText">
<div class="text-box">
<p class="show-text">{{ msg }}</p>
</div>
</div>view层做了多层嵌套，如许测试更多涌现毛病的可能性。
var container = document.getElementById('container');
//这里我们把vue实例中的data提取出来，越发直观
var data = {
msg: 'Hello world!',
inpText: 'Input text'
};
var fragment = virtualDom(container, data);
container.appendChild(fragment);
//假造dom竖立要领
function virtualDom(node, data){
let frag = document.createDocumentFragment();
let child;
// 遍历dom节点
while(child = node.firstChild){
compile(child, data);
frag.appendChild(child);
}
return frag;
}
//编译划定规矩
function compile(node, data){
let reg = /\{\{(.*)\}\}/g;
if(node.nodeType === 1){ // 标签
let attr = node.attributes;
for(let i = 0, len = attr.length; i < len; i++){
// console.log(attr[i].nodeName, attr[i].nodeValue);
if(attr[i].nodeName === 'v-model'){
let name = attr[i].nodeValue;
node.value = data[name];
}
}
if(node.hasChildNodes()){
node.childNodes.forEach((item) => {
compile(item, data); // 递归
});
}
}
if(node.nodeType === 3){ // 文本节点
if(reg.test(node.nodeValue)){
let name = RegExp.$1;
name = name.trim();
node.nodeValue = data[name];
}
}
}诠释：
1、经由过程virtualDom竖立假造节点，将目的盒子内一切子节点增加到其内部，注重这里只是子节点；
2、子节点经由过程compile举行编译，a:假如节点为元素，其nodeType = 1,b:假如节点为文本，其nodeType = 3,详细可以检察概况http://www.w3school.com.cn/js…；
3、假如第二步子节点仍有子节点，经由过程hasChildNodes()来确认，假如有递归挪用compile要领。
3、相应式道理
中心头脑：Object.defineProperty(obj, key, {set, get})
function defineReact(obj, key, value){
Object.defineProperty(obj, key, {
set: function(newValue){
console.log(`触发setter`);
value = newValue;
console.log(value);
},
get: function(){
console.log(`触发getter`);
return value;
}
});
}这里是针对data数据的属性的相应式定义，然则怎样去完成vue实例vm绑定data每一个属性，经由过程以下要领：
function observe(obj, vm){
Object.keys(obj).forEach((key) => {
defineReact(vm, key, obj[key]);
})
}vue的组织函数：
function Vue(options){
this.data = options.data;
let id = options.el;
observe(this.data, this); // 将每一个data属相绑定到Vue的实例上this
}经由过程以上我们可以完成Vue实例绑定data属性。
怎样去完成Vue，一般我们实例化Vue是如许的：
var vm = new Vue({
el: 'container',
data: {
msg: 'Hello world!',
inpText: 'Input text'
}
});
console.log(vm.msg); // Hello world!
console.log(vm.inpText); // Input text完成以上结果，我们必须在vue内部初始化假造Dom
function Vue(options){
this.data = options.data;
let id = options.el;
observe(this.data, this); // 将每一个data属相绑定到Vue的实例上this
//------------------------增加以下代码
let container = document.getElementById(id);
let fragment = virtualDom(container, this); // 这里经由过程vm对象初始化
container.appendChild(fragment);
}这是我们再对Vue举行实例化，则可以看到以下页面：
至此我们完成了dom的初始化，下一步我们在v-model元素增加监听事宜，如许就可以经由过程view层的操纵来修正vm对应的属性值。在compile编译的时刻，可以正确的找到v-model属相元素，因而我们把监听事宜增加到compile内部。
function compile(node, data){
let reg = /\{\{(.*)\}\}/g;
if(node.nodeType === 1){ // 标签
let attr = node.attributes;
for(let i = 0, len = attr.length; i < len; i++){
// console.log(attr[i].nodeName, attr[i].nodeValue);
if(attr[i].nodeName === 'v-model'){
let name = attr[i].nodeValue;
node.value = data[name];
// ------------------------增加监听事宜
node.addEventListener('keyup', function(e){
data[name] = e.target.value;
}, false);
// -----------------------------------
}
}
if(node.hasChildNodes()){
node.childNodes.forEach((item) => {
compile(item, data);
});
}
}
if(node.nodeType === 3){ // 文本节点
if(reg.test(node.nodeValue)){
let name = RegExp.$1;
name = name.trim();
node.nodeValue = data[name];
}
}
}这一步我们操纵页面输入框，可以看到以下结果，证实监听事宜增加有用。
到这里我们已完成了MVVM的，即Model -> vm -> View || View -> vm -> Model 中心桥梁就是vm实例对象。
4、视察者形式道理
视察者形式也称为宣布者-定阅者形式，如许说应该会更轻易明白，越发抽象。
定阅者：
var subscribe_1 = {
update: function(){
console.log('This is subscribe_1');
}
};
var subscribe_2 = {
update: function(){
console.log('This is subscribe_2');
}
};
var subscribe_3 = {
update: function(){
console.log('This is subscribe_3');
}
};三个定阅者都有update要领。
宣布者：
function Publisher(){
this.subs = [subscribe_1, subscribe_2, subscribe_3]; // 增加定阅者
}
Publisher.prototype = {
constructor: Publisher,
notify: function(){
this.subs.forEach(function(sub){
sub.update();
})
}
};宣布者经由过程notify要领对定阅者播送，定阅者经由过程update来接收信息。
实例化publisher：
var publisher = new Publisher();
publisher.notify();
这里我们可以做一个中心件来处置惩罚宣布者-定阅者形式：
var publisher = new Publisher();
var middleware = {
publish: function(){
publisher.notify();
}
};
middleware.publish();5、视察者形式嵌入
到这一步，我们已完成了：
1、修正v-model属性元素 -> 触发修正vm的属性值 -> 触发set
2、宣布者增加定阅 -> notify分发定阅 -> 定阅者update数据
接下来我们要完成：更新视图，同时把定阅——宣布者形式嵌入。
宣布者：
function Publisher(){
this.subs = []; // 定阅者容器
}
Publisher.prototype = {
constructor: Publisher,
add: function(sub){
this.subs.push(sub); // 增加定阅者
},
notify: function(){
this.subs.forEach(function(sub){
sub.update(); // 宣布定阅
});
}
};定阅者：
考虑到要把定阅者绑定data的每一个属性，来视察属性的变化，参数：name参数可以有compile中猎取的name传参。因为传入的node节点范例分为两种，我们可以分为两定阅者来处置惩罚，同时也可以对node节点范例举行推断，经由过程switch离别处置惩罚。
function Subscriber(node, vm, name){
this.node = node;
this.vm = vm;
this.name = name;
}
Subscriber.prototype = {
constructor: Subscriber,
update: function(){
let vm = this.vm;
let node = this.node;
let name = this.name;
switch(this.node.nodeType){
case 1:
node.value = vm[name];
break;
case 3:
node.nodeValue = vm[name];
break;
default:
break;
}
}
};我们要把定阅者增加到compile举行假造dom的初始化，替换掉本来的赋值：
function compile(node, data){
let reg = /\{\{(.*)\}\}/g;
if(node.nodeType === 1){ // 标签
let attr = node.attributes;
for(let i = 0, len = attr.length; i < len; i++){
// console.log(attr[i].nodeName, attr[i].nodeValue);
if(attr[i].nodeName === 'v-model'){
let name = attr[i].nodeValue;
// --------------------这里被替换掉
// node.value = data[name];
new Subscriber(node, data, name);
// ------------------------增加监听事宜
node.addEventListener('keyup', function(e){
data[name] = e.target.value;
}, false);
}
}
if(node.hasChildNodes()){
node.childNodes.forEach((item) => {
compile(item, data);
});
}
}
if(node.nodeType === 3){ // 文本节点
if(reg.test(node.nodeValue)){
let name = RegExp.$1;
name = name.trim();
// ---------------------这里被替换掉
// node.nodeValue = data[name];
new Subscriber(node, data, name);
}
}
}既然是对假造dom编译初始化，Subscriber要初始化，即Subscriber.update,因而要对Subscriber作进一步的处置惩罚：
function Subscriber(node, vm, name){
this.node = node;
this.vm = vm;
this.name = name;
this.update();
}
Subscriber.prototype = {
constructor: Subscriber,
update: function(){
let vm = this.vm;
let node = this.node;
let name = this.name;
switch(this.node.nodeType){
case 1:
node.value = vm[name];
break;
case 3:
node.nodeValue = vm[name];
break;
default:
break;
}
}
};宣布者增加到defineReact，来视察数据的变化：
function defineReact(data, key, value){
let publisher = new Publisher();
Object.defineProperty(data, key, {
set: function(newValue){
console.log(`触发setter`);
value = newValue;
console.log(value);
publisher.notify(); // 宣布定阅
},
get: function(){
console.log(`触发getter`);
if(Publisher.global){ //这里为何来增加推断前提，主如果让publisher.add只实行一次，初始化假造dom编译的时刻来实行
publisher.add(Publisher.global); // 增加定阅者
}
return value;
}
});
}这一步将定阅者增加到宣布者容器内，对定阅者革新：
function Subscriber(node, vm, name){
Publisher.global = this;
this.node = node;
this.vm = vm;
this.name = name;
this.update();
Publisher.global = null;
}
Subscriber.prototype = {
constructor: Subscriber,
update: function(){
let vm = this.vm;
let node = this.node;
let name = this.name;
switch(this.node.nodeType){
case 1:
node.value = vm[name];
break;
case 3:
node.nodeValue = vm[name];
break;
default:
break;
}
}
};6、完全结果
html:
<div id="container">
{{ msg }}<br>
<input class="inp-text" type="text" v-model="inpText">
<p>{{ inpText }}</p>
<div class="text-box">
<p class="show-text">{{ msg }}</p>
</div>
</div>javascript:
function Publisher(){
this.subs = [];
}
Publisher.prototype = {
constructor: Publisher,
add: function(sub){
this.subs.push(sub);
},
notify: function(){
this.subs.forEach(function(sub){
sub.update();
});
}
};
function Subscriber(node, vm, name){
Publisher.global = this;
this.node = node;
this.vm = vm;
this.name = name;
this.update();
Publisher.global = null; // 清空
}
Subscriber.prototype = {
constructor: Subscriber,
update: function(){
let vm = this.vm;
let node = this.node;
let name = this.name;
switch(this.node.nodeType){
case 1:
node.value = vm[name];
break;
case 3:
node.nodeValue = vm[name];
break;
default:
break;
}
}
};
function virtualDom(node, data){
let frag = document.createDocumentFragment();
let child;
// 遍历dom节点
while(child = node.firstChild){
compile(child, data);
frag.appendChild(child);
}
return frag;
}
function compile(node, data){
let reg = /\{\{(.*)\}\}/g;
if(node.nodeType === 1){ // 标签
let attr = node.attributes;
for(let i = 0, len = attr.length; i < len; i++){
// console.log(attr[i].nodeName, attr[i].nodeValue);
if(attr[i].nodeName === 'v-model'){
let name = attr[i].nodeValue;
// node.value = data[name];
// ------------------------增加监听事宜
node.addEventListener('keyup', function(e){
data[name] = e.target.value;
}, false);
new Subscriber(node, data, name);
}
}
if(node.hasChildNodes()){
node.childNodes.forEach((item) => {
compile(item, data);
});
}
}
if(node.nodeType === 3){ // 文本节点
if(reg.test(node.nodeValue)){
let name = RegExp.$1;
name = name.trim();
// node.nodeValue = data[name];
new Subscriber(node, data, name);
}
}
}
function defineReact(data, key, value){
let publisher = new Publisher();
Object.defineProperty(data, key, {
set: function(newValue){
console.log(`触发setter`);
value = newValue;
console.log(value);
publisher.notify(); // 宣布定阅
},
get: function(){
console.log(`触发getter`);
if(Publisher.global){
publisher.add(Publisher.global); // 增加定阅者
}
return value;
}
});
}
// 将data中数据绑定到vm实例对象上
function observe(data, vm){
Object.keys(data).forEach((key) => {
defineReact(vm, key, data[key]);
})
}
function Vue(options){
this.data = options.data;
let id = options.el;
observe(this.data, this); // 将每一个data属相绑定到Vue的实例vm上
//------------------------
let container = document.getElementById(id);
let fragment = virtualDom(container, this); // 这里经由过程vm对象初始化
container.appendChild(fragment);
}
var vm = new Vue({
el: 'container',
data: {
msg: 'Hello world!',
inpText: 'Input text'
}
});未完待续……
