目前的几种主流前端框架中，react是单向绑定，而angular.js和vue.js是双向绑定，实现双向绑定的方法有：
1发布者-订阅者模式（backbone.js）
2.脏值检查（angular.js）
3.数据劫持（vue.js）
脏值检查：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：
1.DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
2.XHR响应事件（http）
3.浏览器Location变更事件
4.Timer事件
数据劫持： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
所以，要实现mvvm的双向绑定，就必须实现以下几点：
1.实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2.实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3.实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4.mvvm入口函数，整合以上三者
上述流程如图所示：
（一）实现Observer
我们知道可以利用Obeject.defineProperty()来监听属性变动，那么将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。。相关代码可以是这样：
function Observer (obj, vm) {
if (!obj || typeof(obj) !== 'object') return
Object.keys(obj).forEach(function (key) {
defineReactive (vm, key, obj[key])
})
}
function defineReactive (obj, key, val) {
Observer(val) //监听子属性
Object.defineProperty(obj, key, {
get: function () {
return val
},
set: function (newVal) {
if (val === newVal) return
val = newVal
}
})
}
以上步骤可以监听每个数据的变化，那么监听之后如何通知订阅者呢，接下来需要实现一个消息订阅器，维护一个数组，用来收集订阅者，数据变动触发notify，再调用订阅者的update函数，代码如下：
//省略
function defineReactive (obj, key, val) {
var dep = new Dep()
Observer(val) //监听子属性
Object.defineProperty(obj, key, {
get: function () {
return val
},
set: function (newVal) {
if (val === newVal) return
val = newVal
//作为发布者发布通知，触发订阅者的更新函数
dep.notify()
}
})
}
// 消息订阅器
function Dep () {
this.subs = []
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub)
},
notify: function () {
this.subs.forEach(function (sub) {
sub.update()
})
}
}
那么谁是订阅者，如何往消息订阅器里添加订阅者呢，很明显，Watcher就是订阅者，而且var dep = new Dep();是在 defineReactive方法内部定义的，因此，可以在getter里边动手脚：
//Observer.js
//省略
function defineReactive (obj, key, val) {
var dep = new Dep()
Observer(val) //监听子属性
Object.defineProperty(obj, key, {
get: function () {
if (Dep.target) {
dep.addSub(Dep.target)
}
return val
},
//省略...
})
}
（二）实现Compile
Compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图，如图所示：
因为遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中。
// 模板解析
function Compile (node, vm) {
if (node) {
this.$frag = this.nodeToFragment(node, vm)
return this.$frag
}
}
Compile.prototype = {
nodeToFragment: function (node, vm) {
var self = this
var frag = document.createDocumentFragment()
var child
while (child = node.firstChild) {
self.compileElement (child, vm)
frag.append(child) // 将所有子节点添加到fragment中
}
return frag
},
compileElement: function (node, vm) {
var reg = /\{\{(.*)\}\}/
// 节点类型为元素
if (node.nodeType === 1) {
var attr = node.attributes
// 解析属性
for (var i=0; i<attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
vm[name] = e.target.value
})
//调用订阅者
}
}
}
// 节点类型为text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1 // 与正则表达式匹配的第一个字符串
name = name.trim()
//调用订阅者
}
}
}
}
（三）实现Watcher
Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是:
1.在自身实例化时往属性订阅器(dep)里面添加自己
2.自身必须有一个update()方法
3.待属性变动dep.notify()通知时，能调用自身的update()方法，更新视图
// 订阅者
function Watcher (vm, node, name, type) {
Dep.target = this
this.name = name
this.node = node
this.vm = vm
this.type = type
this.update()
Dep.target = null
}
Watcher.prototype = {
update: function () {
this.get()
this.node[this.type] = this.value // 订阅者执行相应的操作
},
// 获取data的属性值
get: function () {
this.value = this.vm[this.name]
}
}
实例化Watcher的时候，调用get()方法，通过Dep.target = watcherInstance标记订阅者是当前watcher实例，强行触发属性定义的getter方法，getter方法执行的时候，就会在属性的订阅器dep添加当前watcher实例，从而在属性值有变化的时候，watcherInstance就能收到更新通知。
（四）实现MVVM
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
function Vue (options) {
this.data = options.data
var data = this.data
Observer(data, this)
var id = options.el
var dom = new Compile(document.querySelector(id), this)
// 编译完成后，将dom返回到app中
document.querySelector(id).appendChild(dom)
}
（五）实现一个数据双向绑定demo
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
<input type="text" id="a" v-model="text">
{{text}}
</div>
<script type="text/javascript">
// 模板解析
function Compile (node, vm) {
if (node) {
this.$frag = this.nodeToFragment(node, vm)
return this.$frag
}
}
Compile.prototype = {
nodeToFragment: function (node, vm) {
var self = this
var frag = document.createDocumentFragment()
var child
while (child = node.firstChild) {
self.compileElement (child, vm)
frag.append(child) // 将所有子节点添加到fragment中
}
return frag
},
compileElement: function (node, vm) {
var reg = /\{\{(.*)\}\}/
// 节点类型为元素
if (node.nodeType === 1) {
var attr = node.attributes
// 解析属性
for (var i=0; i<attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
vm[name] = e.target.value
})
new Watcher(vm, node, name, 'value')
}
}
}
// 节点类型为text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1 // 与正则表达式匹配的第一个字符串
name = name.trim()
new Watcher(vm, node, name, 'nodeValue')
}
}
}
}
// 数据监听器
function Observer (obj, vm) {
if (!obj || typeof(obj) !== 'object') return
Object.keys(obj).forEach(function (key) {
defineReactive (vm, key, obj[key])
})
}
function defineReactive (obj, key, val) {
var dep = new Dep()
Observer(val) //监听子属性
Object.defineProperty(obj, key, {
get: function () {
if (Dep.target) {
dep.addSub(Dep.target)
}
return val
},
set: function (newVal) {
if (val === newVal) return
val = newVal
//作为发布者发布通知，触发订阅者的更新函数
dep.notify()
}
})
}
// 消息订阅器，收集订阅者
function Dep () {
this.subs = []
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub)
},
notify: function () {
this.subs.forEach(function (sub) {
sub.update()
})
}
}
// 订阅者
function Watcher (vm, node, name, type) {
Dep.target = this
this.name = name
this.node = node
this.vm = vm
this.type = type
this.update()
Dep.target = null
}
Watcher.prototype = {
update: function () {
this.get()
this.node[this.type] = this.value // 订阅者执行相应的操作
},
// 获取data的属性值
get: function () {
this.value = this.vm[this.name]
}
}
function Vue (options) {
this.data = options.data
var data = this.data
Observer(data, this)
var id = options.el
var dom = new Compile(document.querySelector(id), this)
// 编译完成后，将dom返回到app中
document.querySelector(id).appendChild(dom)
}
var vm = new Vue({
el: '#app',
data: {
text: 'hello world'
}
})
</script>
</body>
</html>
一个简单的数据响应式demo实现完毕！
