根據vue的官網介紹，可以得知vue是一個mvvm框架，且是響應式的。為了更深入了理解其內涵，本人以及理解實現了一個簡單的mvvm學習的demo。下面分享給大家，歡迎大家一起討論。
一、mvvm至少包含的內容
- 指令集合，如：text、model等
- 資料模型，與檢視互動的資料
- 元件的支援：也就是部分html程式碼的動態更新
二、我的實現
1. 變數的定義與watch的實現
var directives = {}; //指令集合 var vNodes = new Array(); //解析的Dom集合 var dataModel = { name:"name", title: "title" }; //資料Model var Watch = { isInit: false, watchs: new Array(), run: function(newValue, expOrfn){ var self = this; if(!self.isInit){ expOrfn.call(vModel); } this.watchs.map(function(data,index){ data.nodes.map(function(d,i){ if(self.isInit){ d.directive.init(newValue, d, data); //繫結初始化值， 以及初始化一些事件 }else{ d.directive.update(newValue, d, data); //只更新值，此時run的呼叫來值value-set } }); }); self.watchs = []; }, push:function(watch){ this.watchs.push(watch); } } //任務管理
說明：
- Watch的push方法，用於依賴的新增，然後run來執行所以依賴，執行完成後，需要清理當前依賴的集合。在vue中依賴的收集是在dep中完成的，而watch提供的任務管理(不知道理解是否正確)
2. 指令的定義
directives.text = { init: function(value, vNode){ vNode.elm.textContent = value; }, update: function(value, vNode){ vNode.elm.textContent = value; } } //需要響應事件的怎麼辦 directives.model ={ init: function(value, vNode, _watch){ vNode.elm.value = value; //判斷自己發生的改變，不應該再改變自己 vNode.elm.addEventListener('keyup',function(evt){ vNode.model[_watch.key] = vNode.elm.value; }); }, update:function(){ } }
說明：
- 由於是demo學習示例，所以只定義了簡單的text和model兩個指定，text：用於資料的顯示，而model用於input（輸入框）的響應
3. vModel的生成
//轉換vModel，暫支援一級 var properties = Object.getOwnPropertyNames(dataModel); var vModel = {}, formSetting = false; for( var index in properties){ (function refreshData(_index){ var key = properties[_index]; var property = Object.getOwnPropertyDescriptor(dataModel, key); var setter = property.set; var getter = property.get; var _val = property.value; var _getter = function(){ var val = getter ? getter.call(vModel) : _val; //收集依賴，與watch要分開 Watch.push({ key: key, nodes: vNodes.filter(function(data,index){ return data.modelKey == key ? true : false; }), getter: _getter }); return val; }; Object.defineProperty(vModel, key, { configurable: true, enumerable: true, set: function(value){ if(setter){ setter.call(vModel, value); } //處理依賴 Watch.run(value, _getter); //this.value = value; }, get: _getter }) })(index); }
說明：
- vModel是根據dataModel生成的，也就是自定義了每個屬性的get和set方法，在es6中也可以用proxy實現（是否說對了）。
- 在屬性set的時候，會先呼叫get方法來收集依賴。方便值改變後，能將所影響的內容都修改掉。
4. 解析dom為vNode
//解析vNodes var app = document.getElementById('app'); app.childNodes.forEach(function(data,index){ if(data.nodeType != 1) return; var hv = data.getAttribute('data-hv'); var hvs = hv.split(','); hvs.forEach(function(item,row){ var keyValue = item.split(':'); //vNode物件上一定要有model，這是方便vNode相應時候的找vModel vNodes.push({ directive: directives[keyValue[0]], modelKey: keyValue[1], model: vModel, elm: data }); }); });
說明：
- 這裡說解析為vNode很是牽強，因為此只是收集了dom上data-hv指定的指令，並將對就的指令、元素、vModel等組成一個物件儲存在vNodes中，以供vModel各屬性的get方法收集依賴時引用。
5. 第一次初始化
//呼叫所有的get一次 Watch.isInit = true; var _keys = Object.getOwnPropertyNames(vModel); _keys.map(function(key,data){ var data = vModel[key]; Watch.run(data); }); Watch.isInit = false;
說明：
- 將初始化的vModel的值渲染到Dom上，這裡是主動執行每個的get，然後執行watch.run方法。
- 此處設計和實現本人感覺與vue的思路不對，如有高人看見，麻煩提點與指引。
6. 被解析的dom
<div id="app"> <span data-hv="text:title"></span> <span data-hv="text:title"></span> <input data-hv="model:title" /> </div>