前言
（篇幅较长，请耐心阅读😂）
几种实现数据绑定的方法
发布者-订阅者模式（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绑定原理
１．vue双向绑定的原理
２．实现简易版vue的过程，包括声明式数据渲染及一些简单的指令
vue的双向绑定是由数据劫持结合发布者-订阅者模式实现，什么是数据劫持呢？vue是如何进行数据劫持的？说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作。在数据变动的时候做你想做的事情，我们可以看下控制台看下vue初始画数据做了什么。
var vm = new Vue({
data: {
test: {
a:1
}
};
created: function() {
console.log(this.test);
}
})
在打印结果中我们可以看到属性a有两个方法：get和set.为什么会有这两个方法呢，这正是vue通过Object.defineProperty()进行数据劫持的．
Object.defineProperty()这个方法是做什么的呢？文档上是这样说的。
Object.defineProperty
语法：
Obejct.defineProperty(obj, prop, descriptor)
- obj 要在其上定义属性的对象。
- prop 要定义或修改的属性名称。
- dessciptor 将被定义或修改的属性描述。
返回值
被传递给函数的对象。
简单的说，他可以控制一个对象属性的一些特有操作，比如读写权，是否可枚举，这里我们主要研究它的get和set方法，如果想清楚更多用法，可以参考：Object.defineProperty()
我们可以很轻松的打印出一个对象的属性数据：
var Book = {
name: '人性的弱点'
}
console.log(Book.name); //人性的弱点
但是如果在执行console.log(Book.name)的同时，给书的书名增加一个书名号呢，这个时候应该怎么做，这时候我们就需要用到Object.defineProperty( )了：
var Book = {};
var name = '';
Object.defineProperty(Book, 'name', {
set: function(value) {
name = value;
console.log('你取了一个书名叫:'+value);
},
get: function() {
console.log("get 方法被监听到了");
return '<'+name+'>';
}
})
Book.name = '人性的弱点';
//你取了一个书名叫人性的弱点
console.log(Book.name);
//get 方法被监听到了
//<人性的弱点>
通过Object.defineProperty( )这个方法设置了Book对象的name属性，对其get和set方法进行重写操作
- get方法在获得name属性时被调用
- set方法在设置name属性时被触发．
所以在执行Book.name='人性的弱点' 这个语句时调用set方法，输出你取了一个书名叫：人性的弱点．
当调用console.log(Book.name)时触发get方法，输出＜人性的弱点＞
如果在代码中加入这句话时，会打印出什么呢？
console.log(Book);
我们发现与上面vue打印数据进行对比非常类似，哇开心开心。
说明vue确实是通过这种方式进行数据劫持的．那么什么是发布者－订阅者模式呢？？
所谓的订阅者，就像我们在日常生活中订阅报纸一样，在订阅报纸的时候，通常都得需要在报社或者一些中介机构进行注册，当有新版的报纸发刊的时候，邮递员就需要向订阅该报纸的人，依次发放报纸．
所有如果用代码实现该模式，需要进行两个步骤:
1.初始化发布者、订阅者。
2.订阅者需要注册到发布者，发布者发布消息的时候，依次向订阅者发布消息。
那么接下来我们将通过vue原理实现一个简单的mvvm双向绑定的demo。
思路分析
要想实现mvvm，主要包含两个方面，视图变化更新数据，数据变化更新视图．
ata变化更新view的重点是如何知道view什么时候变化了，
只要知道什么时候view变化了，那么接下来的就好处理了．
这个时候我们上文提到的Object.defineProperty( )就起作用了．通过Object.defineProperty( )对属性设置一个set函数，当属性变化时就会触发这个函数，所以我们只需要将一些更新的方法放在set函数中就可以实现data变化更新view了．
实现过程
我们已经知道如何实现数据的双向绑定了，首先要对数据进行劫持监听，所以我们首先要设置一个监听器Observer,用来监听所有的属性，
当属性变化时，就需要通知订阅者Watcher,看是否需要更新．
因为属性可能是多个，所以会有多个订阅者，故我们需要一个消息订阅器Dep来专门收集这些订阅者，
并在监听器Observer和订阅者Watcher之间进行统一的管理．
以为在节点元素上可能存在一些指令，所以我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，
将相关指令初始化成一个订阅者Watcher，并替换模板数据并绑定相应的函数，
这时候当订阅者Watcher接受到相应属性的变化，就会执行相对应的更新函数，从而更新视图．
- 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
- 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
-
实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
流程如下
image.png
实现一个监听器Observer
数据监听器的核心方法就是Object.defineProperty( )，通过遍历循环对所有属性值进行监听，并对其进行Object.defineProperty( )处理，那么代码可以这样写：
function defineReactive(data, key, val) {
observe(val); //递归遍历所有属性
Object.defineProperty(data, key, {
enumerable: true,
//当且仅当该属性的enumerable为true时，
//该属性才能够出现在对象的枚举属性中
//就是让某些属性可以规避掉for...in操作。比如，对象原型的toString方法，
//以及数组的length属性，就通过这种手段，不会被for...in遍历到。
configurable: true,
//当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，
//同时该属性也能从对应的对象上被删除。
get: function() {
return val;
},
set:function(newVal) {
if(newVal === val) return
val = newVal;
console.log("属性"+key+"已经被监听，现在值为："+newVal.toString()+'"');
}
})
}
function observe(data) {
if(!data || typeof data != 'object') {
return
}
Object.keys(data).forEach(function(key) {
defineReactive(data,key,data[key]);
})
}
var library = {
book1 : {
name: ''
},
book2: ''
};
observe(library);
library.book1.name = 'vue权威指南';
//属性name已经被监听，现在值为：vue权威指南"
library.book2 = '没有此书籍';
//属性book2已经被监听，现在值为：没有此书籍"
通过observe()方法进行遍历向下找到所有的属性，并通过defineReactive()方法进行数据劫持监听。
在上面的思路中，我们需要一个可以容纳消息订阅者的消息订阅器Dep，订阅器主要收集消息订阅者，然后在属性变化时执行相应订阅者的更新函数，那么消息订阅器Dep需要有一个容器，用来存放消息订阅者．我们将上面的监听器Observer稍微修改一下：
function defineReactive(data, key, val) {
observe(val); //递归遍历所有属性
var dep =new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function(是否需要添加订阅者) {
dep.addSub(watcher); //这里添加一个订阅者
return val;
},
set:function(newVal) {
if(newVal === val) return
val = newVal;
console.log("属性"+key+'已经被监听，现在值为："'+newVal.toString()+'"');
dep.notify(); //如果数据发生改变通知所有订阅者
}
})
}
function observe(data) {
if(!data || typeof data != 'object') {
return
}
Object.keys(data).forEach(function(key) {
defineReactive(data,key,data[key]);
})
}
function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify:function() {
this.subs.forEach(function(sub) {
sub.update(); //通知每个订阅者检查跟新
})
}
}
在代码中，我们将订阅器Dep添加一个订阅者设计在get里面，这是为了让Watcher在初始化时触发，因此判断是否需要需要添加订阅者，
至于具体实现的方法，我们在下文中深究．
在set方法中，如果函数变化，就会通知所有的订阅者，订阅者们将会执行相对应的更新函数，
到目前为止，一个比较完善的Observer已经成型了，下面我们要写订阅者Watcher.
实现订阅者Watcher
根据我们的思路，订阅者Wahcher在初始化时要将自己添加到订阅器Dep中，那么如何进行添加呢？
我们已经知道监听器Observer是在get函数中执行了添加订阅者的操作的，所以我们只需要在订阅者Watcher在初始化时触发相对应的get函数来执行添加订阅者的操作即可．
那么怎么触发对应的get函数呢？我们只需要获取对应的属性值，就可以通过Object.defineProperty( )触发对应的get了．
在这里需要注意一个细节，我们只需要在订阅者初始化时才执行添加订阅者，
所以我们需要一个判断，在Dep.target上缓存一下订阅者，添加成功后去除就行了，代码如下：
function Watcher(vm, exp, cb) {
this.vm = vm; //指向selfValue的作用域
this.exp = exp; //绑定属性的key值
this.cb = cb; //闭包
this.value = this.get();
}
Watcher.prototype = {
update: function() {
this.run()
},
run:function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if(value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
get:function() {
Dep.target = this; //缓存自己
var value = this.vm.data[this.exp]; //强制执行监听器里的get函数
Dep.target = null; // 释放自己
return value;
}
}
这个时候我们需要对监听器Observer中的defineReactive()做稍微的调整：
function defineReactive(data,key,val) {
observe(val);
var dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
if(Dep.target) { //判断是否需要添加订阅者
dep.addSub(Dep.target);
}
return val;
},
set: function(newVal) {
if (val === newVal) {
return;
}
val = newVal;
console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
dep.notify(); // 如果数据变化，通知所有订阅者
}
});
}
到目前为止，一个简易版的Watcher已经成型了，我们只需要将订阅者Watcher和监听器Observer关联起来，就可以实现一个简单的双向绑定．因为这里还没有设计指令解析器，所以对于模板数据我们都进行写死处理，假设模板上有一个节点元素，且id为＇name＇,并且双向绑定的绑定变量也是'name'，且是通过两个大双括号包起来（暂时没有什么用处），模板代码如下：
<div>
<p id="name">{{name}}</p>
</div>
我们需要定义一个SelfVue类，来实现observer和watcher的关联，代码如下：
//将observe 和watcher 关联起来
function SelfVue(data,el,exp) {
this.data = data;
observe(data);
el.innerHTML = this.data[exp];
new Watcher(this, exp, function(value) {
el.innerHTML = value;
});
return this;
}
然后在页面上new一个SelfVue，就可以实现双向绑定了：
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
</head>
<div>
<p id="name">{{name}}</p>
</div>
<!-- js -->
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/SelfVue.js"></script>
<script>
var ele = document.querySelector('#name');
var selfVue = new SelfVue({
name: 'hello word'
}, ele, 'name')
window.setTimeout(function() {
console.log('name 值发生变化');
selfVue.data.name = 'bye bye word'
},2000)
</script>
</body>
</html>
这时我们打开页面，显示的是'hello world',２s后变成了'byebye world',一个简单的双向绑定实现了．
😀
对比vue,我们发现了有一个问题，我们在为属性赋值的时候形式是： ' selfVue.data.name = 'byebye world' ',而我们理想的形式是：' selfVue.name = 'byebye world' '，那么怎么实现这种形式呢，只需要在new SelfVue时做一个代理处理，让访问SelfVue的属性代理为访问selfVue.data的属性，原理还是使用Object.defineProperty( )对属性在包装一层．代码如下：
//将observe 和watcher 关联起来
function SelfVue(data,el,exp) {
var self = this;
this.data = data;
//Object.keys(); 方法会返回一个由一个给定对象的自身可枚举组成的数组
Object.keys(data).forEach(function(key) {
self.proxyKeys(key); //绑定代理属性
})
observe(data);
el.innerHTML = this.data[exp];
new Watcher(this, exp, function(value) {
el.innerHTML = value;
});
return this;
}
SelfVue.prototype = {
prxoyKeys: function(key) {
var self = this;
Object.defineProperty (this, key, {
enumerable: false,
configurable: false,
get:function proxyGetter() {
return self.data[key];
},
set: function proxySetter (newVal) {
self.data[key] = newVal;
}
})
}
}
实现指令解析器Compile
再上面的双向绑定demo中，我们发现整个过程都没有解析dom节点，而是固定某个节点进行替换数据，所以接下来我们要实现一个解析器Compile来解析和绑定工作，分析解析器的作用，实现步骤如下：
1.解析模板指令，并替换模板数据，初始化视图
2.将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器.
为了解析模板，首先要获得dom元素，然后对含有dom元素上含有指令的节点进行处理，这个过程对dom元素的操作比较繁琐，所以我们可以先建一个fragment片段，将需要解析的dom元素存到fragment片段中在做处理：
nodeToFragment:function(el) {
var fragment = document.createDocumentFragment(); //createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
var child = el.firstChild;
while(child) {
// 将Dom元素移入fragment中
fragment.appendChild(child);
child = el.firstChild;
}
return fragment;
}
接下来需要遍历所有节点，对含有指令的节点进行特殊的处理，这里我们先处理最简单的情况，只对带有 '{{变量}}' 这种形式的指令进行处理，代码如下：
//遍历各个节点,对含有相关指定的节点进行特殊处理
compileElement:function(el) {
var childNodes = el.childNodes; //childNodes属性返回节点的子节点集合，以 NodeList 对象。
var self = this;
//slice() 方法可从已有的数组中返回选定的元素。
[].slice.call(childNodes).forEach(function(node) {
var reg = /\{\{(.*)\}\}/;
var text = node.textContent; //textContent 属性设置或返回指定节点的文本内容
if(self.isTextNode(node) && reg.test(text)) { //判断是否符合{{}}的指令
//exec() 方法用于检索字符串中的正则表达式的匹配。
//返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
self.compileText(node,reg.exec(text)[1]);
}
if(node.childNodes && node.childNodes.length) {
self.compileElement(node); //继续递归遍历子节点
}
});
},
compileText:function(node,exp) {
var self = this;
var initText = this.vm[exp];
this.updateText(node,initText); // 将初始化的数据初始化到视图中
new Watcher(this.vm,exp,function(value) {
self.updateText(node,value);
});
},
updateText:function(node,value) {
node.textContent = typeof value == 'undefined' ? '': value;
},
完整代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#app {
text-align: center;
}
</style>
<body>
<div id="app">
<h2>{{title}}</h2>
<input v-model="name">
<h1>{{name}}</h1>
<button v-on:click="clickMe">click me!</button>
<p v-show="name">name有值的显示/隐藏</p>
</div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/SelfVue.js"></script>
<script type="text/javascript">
new SelfVue({
el: '#app',
data: {
title: 'hello world',
name: 'canfoo',
},
methods: {
clickMe: function () {
this.title = 'hello world';
}
},
mounted: function () {
window.setTimeout(() => {
this.title = '你好';
}, 1000);
}
});
</script>
</html>
SelfVue
中间文件 链接三个js
function SelfVue (options) {
var self = this;
this.data = options.data;
this.methods = options.methods;
Object.keys(this.data).forEach(function(key) {
self.proxyKeys(key);
});
observe(this.data);
new Compile(options.el, this);
options.mounted.call(this); // 所有事情处理好后执行mounted函数
}
SelfVue.prototype = {
proxyKeys: function (key) {
var self = this;
Object.defineProperty(this, key, {
enumerable: false,
configurable: true,
get: function getter () {
return self.data[key];
},
set: function setter (newVal) {
self.data[key] = newVal;
}
});
}
}
observer
// 监听器Observer,用来监听所有的属性
function Observer(data) {
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
var self = this;
Object.keys(data).forEach(function(key) {
self.defineReactive(data, key, data[key]);
});
},
defineReactive: function(data, key, val) {
var dep = new Dep();
var childObj = observe(val);
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function getter () {
if (Dep.target) {
dep.addSub(Dep.target);
}
return val;
},
set: function setter (newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
}
});
}
};
function observe(value, vm) {
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};
//消息订阅器Dep来专门收集这些订阅者
function Dep () {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
// 更新数据
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
Dep.target = null;
Watcher
订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get(); // 将自己添加到订阅器的操作
}
Watcher.prototype = {
// 更新数据
update: function() {
this.run();
},
run: function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
// 执行observer里的get 添加subs队列
get: function() {
Dep.target = this; // 缓存自己
var value = this.vm.data[this.exp] // 强制执行监听器里的get函数
Dep.target = null; // 释放自己
return value;
}
};
Compile
解析器Compile，对每个节点元素进行扫描和解析，
将相关指令初始化成一个订阅者Watcher，并替换模板数据并绑定相应的函数
这时候当订阅者Watcher接受到相应属性的变化
（👉扩展了v-show 哟）
function Compile(el, vm) {
console.log(el,vm);
this.vm = vm;
this.el = document.querySelector(el);
this.fragment = null;
this.init();
}
Compile.prototype = {
init: function () {
if (this.el) {
this.fragment = this.nodeToFragment(this.el);
this.compileElement(this.fragment);
this.el.appendChild(this.fragment);
} else {
console.log('Dom元素不存在');
}
},
nodeToFragment: function (el) {
var fragment = document.createDocumentFragment();
var child = el.firstChild;
while (child) {
// 将Dom元素移入fragment中
fragment.appendChild(child);
child = el.firstChild
}
return fragment;
},
compileElement: function (el) {
var childNodes = el.childNodes;
var self = this;
[].slice.call(childNodes).forEach(function(node) {
var reg = /\{\{(.*)\}\}/;
var text = node.textContent;
// 先判断是不是元素
if (self.isElementNode(node)) {
self.compile(node);
// 不是元素的话看看是不是文本 符不符合 {{name}} 格式
} else if (self.isTextNode(node) && reg.test(text)) {
self.compileText(node, reg.exec(text)[1]);
}
// 还有嵌套的元素的话就循环迭代循环
if (node.childNodes && node.childNodes.length) {
self.compileElement(node);
}
});
},
compile: function(node) {
var nodeAttrs = node.attributes;
var self = this;
Array.prototype.forEach.call(nodeAttrs, function(attr) {
console.log(attr,"attr----------");
var attrName = attr.name;
// 看看有没有v-关键词
if (self.isDirective(attrName)) {
var exp = attr.value;
var dir = attrName.substring(2);
// 判断是不是v-on
if (self.isEventDirective(dir)) { // 事件指令
self.compileEvent(node, self.vm, exp, dir);
// v-model 指令
} else if(self.isEventDirectiveModel(dir)){
self.compileModel(node, self.vm, exp, dir);
//v-if
}else if(self.isEventDirectiveShow(dir)) {
self.compileEventShow(node, self.vm, exp, dir);
}
node.removeAttribute(attrName);
}
});
},
// {{}}
compileText: function(node, exp) {
var self = this;
var initText = this.vm[exp];
this.updateText(node, initText);
new Watcher(this.vm, exp, function (value) {
self.updateText(node, value);
});
},
// v-on:click
compileEvent: function (node, vm, exp, dir) {
var eventType = dir.split(':')[1];
var cb = vm.methods && vm.methods[exp];
if (eventType && cb) {
node.addEventListener(eventType, cb.bind(vm), false);
}
},
// v-show
compileEventShow:function(node, vm, exp,dir) {
var self = this;
var val = this.vm[exp];
self.updateShow(node, val);
new Watcher(this.vm, exp, function (value) {
self.updateShow(node, value);
});
//document.body.removeChild(oP); //删除p节点
},
// v-model
compileModel: function (node, vm, exp, dir) {
var self = this;
var val = this.vm[exp];
this.modelUpdater(node, val);
new Watcher(this.vm, exp, function (value) {
self.modelUpdater(node, value);
});
node.addEventListener('input', function(e) {
var newValue = e.target.value;
if (val === newValue) {
return;
}
self.vm[exp] = newValue;
val = newValue;
});
},
// show
updateShow:function(node, value) {
console.log(node, value,"----");
if(!value) {
node.style='display:none';
}else {
node.style='display:block';
}
},
updateText: function (node, value) {
node.textContent = typeof value == 'undefined' ? '' : value;
},
modelUpdater: function(node, value, oldValue) {
node.value = typeof value == 'undefined' ? '' : value;
},
// v-开头的命令 像v-model v-on
isDirective: function(attr) {
return attr.indexOf('v-') == 0;
},
isEventDirectiveModel:function(dir) {
return dir.indexOf('model') === 0;
},
// v-on
isEventDirective: function(dir) {
return dir.indexOf('on:') === 0;
},
// v-show
isEventDirectiveShow: function(dir) {
return dir.indexOf('show') === 0;
},
//nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素
isElementNode: function (node) {
return node.nodeType == 1;
},
// nodeType 属性返回以数字值返回指定节点的节点类型。3代表元素或属性中的文本内容。
isTextNode: function(node) {
return node.nodeType == 3;
}
}
