MVC,MVP,MVVM三种软件架构设计模式的对比：
MVC：
- M(model)：数据模型，渲染模板
- V(view):视图模板（用户界面UI）
- C(controller):控制器，修改数据
MVP:
- M(model)：数据模型
- V(view): 视图模板
- P(presenter):控制展示器，修改数据，渲染模板
在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的。
MVVM：
- M（model）：数据模型
- V（view）：视图模板
- VM（viewModel）：视图模型，修改数据，自动渲染模板
MVVM模式和MVP一致，MVVM可以实现数据双向绑定，viewModel就是view和model的binder连接器，通过它来实现双向绑定。
数据绑定原理：
实现方法有这几种：发布者-订阅者模式（backbone.js）脏值检查（angular.js） 数据劫持（vue.js）
这里简析一下vue.js的数据绑定原理，
vue.js采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化。vue.js还会对操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。
存取描述符均具有以下可选键值：
configurable：为true时属性可配置
enumerable：为true时属性可枚举
get：给属性提供getter方法，取得数据时回调的函数，调用时不传参，传this对象
set：给属性提供setter方法，设置数据值时回调的函数，调用时传入一个参数，即属性新的值
关于Object.defineProperty：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
proxy代理器：ES6新方法，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
观察者模式和发布/订阅者模式的差异：
- Observer模式要求观察者必须订阅内容改变的事件，定义了一个一对多的依赖关系；
- Publish/Subscribe模式使用了一个主题/事件通道，这个通道介于订阅着与发布者之间；
- 观察者模式里面观察者「被迫」执行内容改变事件（subject内容事件）；发布/订阅模式中，订阅着可以自定义事件处理程序；
- 观察者模式两个对象之间有很强的依赖关系；发布/订阅模式两个对象之间的耦合度底。
具体实现步骤：
●Observer 对observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter getter，监听数据变化
● compile解析模板指令，将模板中的变量替换成数据，接着初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者。一旦数据有变动，订阅者收到通知，就会更新视图。
● Watcher订阅者是Observer和Compile之间通信的桥梁，主要负责：
1）在自身实例化时，往属性订阅器（Dep）里面添加自己
2）自身必须有一个update()方法
3）待属性变动，dep.notice()通知时，就调用自身的update()方法，并触发Compile中绑定的回调
● viewModel作为数据绑定的入口，整合Observer、Compile、Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化的双向绑定效果。
使用Object.defineProperty()来实现简单的双向绑定小例子。
<div id="app">
<input type="text" id="input">
<span id="text"></span>
</div>
var obj = {};
Object.defineProperty(obj, 'prop', {
get: function() {
return val;
},
set: function(newVal) {
val = newVal;
document.getElementById('input').value = val;
document.getElementById('text').innerHTML = val;
}
});
document.addEventListener('keyup', function(e) {
obj.prop = e.target.value;
});