推薦閱讀：
實現非常簡單的js雙向數據綁定
MVVM 是Web 前端一種非常流行的開發模式，利用MVVM 可以使我們的代碼更專注於處理業務邏輯而不是去關心DOM 操作。目前著名的MVVM 框架有vue, avalon , react 等，這些框架各有千秋，但是實現的思想大致上是相同的：數據綁定+ 視圖刷新。出於好奇和一顆願意折騰的心，我自己也沿著這個方向寫了一個最簡單的MVVM 庫( mvvm.js )，總共2000 多行代碼，指令的命名和用法與vue 相似，在這里分享一下實現的原理以及我的代碼組織思路。
思路整理
MVVM 在概念上是真正將視圖與數據邏輯分離的模式，ViewModel 是整個模式的重點。要實現ViewModel 就需要將數據模型（Model）和視圖（View）關聯起來，整個實現思路可以簡單的總結成5 點：
實現一個Compiler 對元素的每個節點進行指令的掃描和提取；
實現一個Parser 去解析元素上的指令，能夠把指令的意圖通過某個刷新函數更新到dom 上（中間可能需要一個專門負責視圖刷新的模塊）比如解析節點<p v-show="isShow"></p> 時先取得Model 中isShow 的值，再根據isShow 更改node.style.display 從而控制元素的顯示和隱藏;
實現一個Watcher 能將Parser 中每條指令的刷新函數和對應Model 的字段聯繫起來；
實現一個Observer 使得能夠對對象的所有字段進行值的變化監測，一旦發生變化時可以拿到最新的值並觸發通知回調；
利用Observer 在Watcher 中建立一個對Model 的監聽，當Model 中的一個值發生變化時，監聽被觸發，Watcher 拿到新值後調用在步驟2 中關聯的那個刷新函數，就可以實現數據變化的同時刷新視圖的目的。
效果示例
首先粗看下最終的使用示例，與其他MVVM 框架的實例化大同小異：
<div id="mobile-list"><h1 v-text="title"></h1><ul><li v-for="item in brands"><b v-text="item.name"></b><span v-show="showRank">Rank: {{item.rank}}</span></li></ul></div>var element = document.querySelector('#mobile-list');var vm = new MVVM(element, {'title' : 'Mobile List','showRank': true,'brands' : [{'name': 'Apple', 'rank': 1},{'name': 'Galaxy', 'rank': 2},{'name': 'OPPO', 'rank': 3}]});vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>模塊劃分
我把MVVM 分成了五個模塊去實現： 編譯模塊Compiler 、解析模塊Parser 、視圖刷新模塊Updater 、數據訂閱模塊Watcher 和數據監聽模塊Observer 。流程可以簡述為：Compiler 編譯好指令後將指令信息交給解析器Parser 解析，Parser 更新初始值並向Watcher 訂閱數據的變化，Observer 監測到數據的變化然後反饋給Watcher ，Watcher 再將變化結果通知Updater 找到對應的刷新函數進行視圖的刷新。
上述流程如圖所示：
下文就介紹下這五個模塊實現的基本原理（代碼只貼重點部分，完整的實現請到我的Github 翻閱）
1. 編譯模塊Compiler
Compiler 的職責主要是對元素的每個節點進行指令的掃描和提取。因為編譯和解析的過程會多次遍歷整個節點樹，所以為了提高編譯效率在MVVM 構造函數內部先將element 轉成一個文檔碎片形式的副本fragment 編譯對像是這個文檔碎片而不應該是目標元素，待全部節點編譯完成後再將文檔碎片添加回到原來的真實節點中。
vm.complieElement 實現了對元素所有節點的掃描和指令提取：
vm.complieElement = function(fragment, root) {var node, childNodes = fragment.childNodes;// 掃描子節點for (var i = 0; i < childNodes.length; i++) {node = childNodes[i];if (this.hasDirective(node)) {this.$unCompileNodes.push(node);}// 遞歸掃描子節點的子節點if (node.childNodes.length) {this.complieElement(node, false);}}// 掃描完成，編譯所有含有指令的節點if (root) {this.compileAllNodes();}}vm.compileAllNodes 方法將會對this.$unCompileNodes 中的每個節點進行編譯（將指令信息交給Parser ），編譯完一個節點後就從緩存隊列中移除它，同時檢查this.$unCompileNodes.length 當length === 0 時說明全部編譯完成，可以將文檔碎片追加到真實節點上了。
2. 指令解析模塊Parser
當編譯器Compiler 把每個節點的指令提取出來後就可以給到解析器解析了。每一個指令都有不同的解析方法，所有指令的解析方法只要做好兩件事：一是將數據值更新到視圖上（初始狀態），二是將刷新函數訂閱到Model 的變化監測中。這里以解析v-text 為例描述一個指令的大致解析方法：
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 實現的核心基礎，看過有一篇文章說Oo (Object.observe) 將會引爆數據綁定革命，給前端帶來巨大影響力，不過很可惜，ES7 草案已經將Oo 給廢棄了！目前也沒有瀏覽器支持！所幸的是還有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 都是一樣的原理。
以上，整個流程以及每個模塊的基本實現思路都講完了，第一次在社區發文章，語言表達能力不太好，如有說的不對寫的不好的地方，希望大家能夠批評指正！
結語
折騰這個簡單的mvvm.js 是因為原來自己的框架項目中用的是vue.js 但是只是用到了它的指令系統，一大堆功能只用到四分之一左右，就想著只是實現data-binding 和view-refresh 就夠了，結果沒找這樣的javascript 庫，所以我自己就造了這麼一個輪子。
雖說功能和穩定性遠不如vue 等流行MVVM 框架，代碼實現可能也比較粗糙，但是通過造這個輪子還是增長了很多知識的~ 進步在於折騰嘛！
目前我的mvvm.js 只是實現了最本的功能，以後我會繼續完善、健壯它，如有興趣歡迎一起探討和改進~