parser.parseVText = function(node, model) { // 取得 Model 中定义的初始值 var text = this.$model[model]; // 更新节点的文本 node.textContent = text; // 对应的刷新函数： // updater.updateNodeTextContent(node, text); // 在 watcher 中订阅 model 的变化 watcher.watch(model, function(last, old) { node.textContent = last; // updater.updateNodeTextContent(node, text); }); }
3. 数据订阅模块 Watcher
上个例子，Watcher 提供了一个 watch 方法来对数据变化进行订阅，一个参数是模型字段 model 另一个是回调函数，回调函数是要通过 Observer 来触发的，参数传入新值 last 和 旧值 old , Watcher 拿到新值后就可以找到 model 对应的回调（刷新函数）进行更新视图了。model 和 刷新函数是一对多的关系，即一个 model 可以有任意多个处理它的回调函数（刷新函数），比如： v-text="title" 和 v-html="title" 两个指令共用一个数据模型字段。
添加数据订阅 watcher.watch 实现方式为：
watcher.watch = function(field, callback, context) { var callbacks = this.$watchCallbacks; if (!Object.hasOwnProperty.call(this.$model, field)) { console.warn('The field: ' + field + ' does not exist in model!'); return; } // 建立缓存回调函数的数组 if (!callbacks[field]) { callbacks[field] = []; } // 缓存回调函数 callbacks[field].push([callback, context]); }
当数据模型的 field 字段发生改变时，Watcher 就会触发缓存数组中订阅了 field 的所有回调。
4. 数据监听模块 Observer
Observer 是整个 mvvm 实现的核心基础，看过有一篇文章说 O.o (Object.observe) 将会引爆数据绑定革命，给前端带来巨大影响力，不过很可惜，ES7 草案已经将 O.o 给废弃了！目前也没有浏览器支持！所幸的是还有 Object.defineProperty 通过拦截对象属性的存取描述符(get 和 set) 可以模拟一个简单的 Observer :
// 拦截 object 的 prop 属性的 get 和 set 方法 Object.defineProperty(object, prop, { get: function() { return this.getValue(object, prop); }, set: function(newValue) { var oldValue = this.getValue(object, prop); if (newValue !== oldValue) { this.setValue(object, newValue, prop); // 触发变化回调 this.triggerChange(prop, newValue, oldValue); } } });
然后还有个问题就是数组操作 ( push, shift 等) 该如何监测？所有的 MVVM 框架都是通过重写该数组的原型来实现的：
observer.rewriteArrayMethods = function(array) { var self = this; var arrayProto = Array.prototype; var arrayMethods = Object.create(arrayProto); var methods = 'push|pop|shift|unshift|splice|sort|reverse'.split('|'); methods.forEach(function(method) { Object.defineProperty(arrayMethods, method, function() { var i = arguments.length; var original = arrayProto[method]; var args = new Array(i); while (i--) { args[i] = arguments[i]; } var result = original.apply(this, args); // 触发回调 self.triggerChange(this, method); return result; }); }); array.__proto__ = arrayMethods; }
这个实现方式是从 vue 中参考来的，觉得用的很妙，不过数组的 length 属性是不能够被监听到的，所以在 MVVM 中应避免操作 array.length
5. 视图刷新模块 Updater
Updater 在五个模块中是最简单的，只需要负责每个指令对应的刷新函数即可。其他四个模块经过一系列的折腾，把最后的成果交给到 Updater 进行视图或者事件的更新，比如 v-text 的刷新函数为：
updater.updateNodeTextContent = function(node, text) { node.textContent = text; }
v-bind:style 的刷新函数：
updater.updateNodeStyle = function(node, propperty, value) { node.style[propperty] = value; }
双向数据绑定的实现
表单元素的双向数据绑定是 MVVM 的一个最大特点之一：
其实这个神奇的功能实现原理也很简单，要做的只有两件事：一是数据变化的时候更新表单值，二是反过来表单值变化的时候更新数据，这样数据的值就和表单的值绑在了一起。
数据变化更新表单值利用前面说的 Watcher 模块很容易就可以做到：
watcher.watch(model, function(last, old) { input.value = last; });'
表单变化更新数据只需要实时监听表单的值得变化事件并更新数据模型对应字段即可：
var model = this.$model; input.addEventListenr('change', function() { model[field] = this.value; });‘
其他表单 radio, checkbox 和 select 都是一样的原理。