//dom結構<div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> <ul> <li>1</li> <li>{{msg}}</li> <li>{{test}}</li> </ul></div>//one-way-binding.js //判斷每個dom節點是否擁有子節點，若有則返回該節點 function isChild(node){ //這里使用childNodes可以讀取text文本節點，所以不用children if(node.childNodes.length ===0){ return false; } else{ return node; } } //利用文檔碎片劫持dom結構及數據，進而進行dom的重構 function nodeToFragment(node,vm){ var frag = document.createDocumentFragment(); var child; while(child = node.firstChild){ //一級dom節點數據綁定 compile(child,vm); //判斷每個一級dom節點是否有二級節點，若有則遞歸處理文檔碎片 if(isChild(child)){ //遞歸實現二級dom節點的重構 nodeToFragment(isChild(child),vm); } frag.appendChild(child); } //將文檔碎片添加至對應node中，最后為id為app的元素下 node.appendChild(frag); } //初始化綁定數據 function compile(node,vm){ //node節點為元素節點時 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; //將data下對應屬性名的值賦值給當前節點值 //這里因為node是input標簽所以值為node.value node.value = vm.data[name]; //最后標簽中的v-model屬性也可以功成身退了，刪除它 node.removeAttribute(attr[i].nodeName); } } } //node節點為text文本節點#text時 if(node.nodeType === 3){ var reg = //{/{(.*)/}/}/; if(reg.test(node.nodeValue.trim())){ //將正則匹配到的{{}}中的字符串賦值給name var name = RegExp.$1; //利用name對應賦值相應的節點值 node.nodeValue = vm.data[name]; } } } //MVVM構造函數,這里我就寫成Vue了 function Vue(options){ this.id = options.el; this.data = options.data; //將根節點與實例化后的對象作為參數傳入 nodeToFragment(document.getElementById(this.id),this); } //實例化 var vm = new Vue({ el:'app', data:{ msg:'hello,two-ways-binding', test:'test key' } })

 //判斷每個dom節點是否擁有子節點，若有則返回該節點 function isChild(node){ if(node.childNodes.length ===0){ return false; } else{ return node; } } //利用文檔碎片劫持dom結構及數據，進而進行dom的重構 function nodeToFragment(node,vm){ var frag = document.createDocumentFragment(); var child; while(child = node.firstChild){ //一級dom節點數據綁定 compile(child,vm); //判斷每個一級dom節點是否有二級節點，若有則遞歸處理文檔碎片 if(isChild(child)){ nodeToFragment(isChild(child),vm); } frag.appendChild(child); } node.appendChild(frag); } //初始化綁定數據 function compile(node,vm){ //node節點為元素節點時 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; //特殊處理input標簽 //------------------------ if(node.nodeName === 'INPUT'){ node.addEventListener('keyup',function(e){ vm[name] = e.target.value; }) } //由于數據已經由data劫持至vm下，所以直接賦值vm[name]即可觸發getter訪問器 node.value = vm[name]; //------------------------- node.removeAttribute(attr[i].nodeName); } } } //node節點為text文本節點時 if(node.nodeType === 3){ var reg = //{/{(.*)/}/}/; if(reg.test(node.nodeValue.trim())){ var name = RegExp.$1; //node.nodeValue = vm[name]; //---------------------- //為每個節點建立訂閱者，通過訂閱者watcher初始化及更新視圖數據 new watcher(vm,node,name); //----------------------- } } } //---------------------------------------------------------------- //訂閱者(為每個節點的數據建立watcher隊列，每次接受更改數據需求后，利用劫持數據執行對應節點的數據更新) function watcher(vm,node,name){ //將每個掛載了數據的dom節點添加到通知者列表，要保證每次創建watcher時只有一個添加目標，否則后續會因為watcher是全局而被覆蓋，所以每次要清空目標 Dep.target = this; this.vm = vm; this.node = node; this.name = name; //執行update的時候會調用監聽者劫持的getter事件，從而添加到watcher隊列，因為update中有訪問this.vm[this.name] this.update(); //為保證只有一個全局watcher，添加到隊列后，清空全局watcher Dep.target = null; } watcher.prototype = { update(){ this.get(); //input標簽特殊處理化 if(this.node.nodeName === 'INPUT'){ this.node.value = this.value; } else{ this.node.nodeValue = this.value; } }, get(){ //這里調用了數據劫持的getter this.value = this.vm[this.name]; } }; //通知者(將監聽者的更改信息需求發送給訂閱者，告訴訂閱者哪些數據需要更改) function Dep(){ this.subs = []; } Dep.prototype = { addSub(watcher){ //添加用到數據的節點進入watcher隊列 this.subs.push(watcher); }, notify(){ //遍歷watcher隊列，令相應數據節點重新更新view層數據,model => view this.subs.forEach(function(watcher){ watcher.update(); }) } }; //監聽者(利用setter監聽view => model的數據變化，發出通知更改model數據后再從model => view更新視圖所有用到該數據的地方) function observer(data,vm){ //遍歷劫持data下所有屬性 Object.keys(data).forEach(function(key){ defineReactive(vm,key,data[key]); }) } function defineReactive(vm,key,val){ //新建通知者 var dep = new Dep(); //靈活利用setter與getter訪問器 Object.defineProperty(vm,key,{ get(){ //初始化數據更新時將每個數據的watcher添加至隊列棧中 if(Dep.target) dep.addSub(Dep.target); return val; }, set(newVal){ if(val === newVal) return ; //初始化后，文檔碎片中的虛擬dom已與model層數據綁定起來了 val = newVal; //同步更新model中data屬性下的數據 vm.data[key] = val; //數據有改動時向通知者發送通知 dep.notify(); } }) } //--------------------------------------------------------------- function Vue(options){ this.id = options.el; this.data = options.data; observer(this.data,this); nodeToFragment(document.getElementById(this.id),this); } var vm = new Vue({ el:'app', data:{ msg:'hello,two-ways-binding', test:'test key' } })