//dom結(jié)構(gòu)
<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
 //判斷每個(gè)dom節(jié)點(diǎn)是否擁有子節(jié)點(diǎn)，若有則返回該節(jié)點(diǎn)
 function isChild(node){
 //這里使用childNodes可以讀取text文本節(jié)點(diǎn)，所以不用children
 if(node.childNodes.length ===0){
 return false;
 }
 else{
 return node;
 }
 }

 //利用文檔碎片劫持dom結(jié)構(gòu)及數(shù)據(jù)，進(jìn)而進(jìn)行dom的重構(gòu)
 function nodeToFragment(node,vm){
 var frag = document.createDocumentFragment();
 var child;
 while(child = node.firstChild){
 //一級(jí)dom節(jié)點(diǎn)數(shù)據(jù)綁定
 compile(child,vm);
 //判斷每個(gè)一級(jí)dom節(jié)點(diǎn)是否有二級(jí)節(jié)點(diǎn)，若有則遞歸處理文檔碎片
 if(isChild(child)){
 //遞歸實(shí)現(xiàn)二級(jí)dom節(jié)點(diǎn)的重構(gòu)
 nodeToFragment(isChild(child),vm);
 }
 frag.appendChild(child);
 }
 //將文檔碎片添加至對(duì)應(yīng)node中，最后為id為app的元素下
 node.appendChild(frag);
 }

 //初始化綁定數(shù)據(jù)
 function compile(node,vm){
 //node節(jié)點(diǎn)為元素節(jié)點(diǎn)時(shí)
 if(node.nodeType === 1){
 var attr = node.attributes;
 //遍歷當(dāng)前節(jié)點(diǎn)的所有屬性
 for(var i=0;i<attr.length;i++){
 if(attr[i].nodeName === 'v-model'){
 //屬性名
 var name = attr[i].nodeValue;
 //將data下對(duì)應(yīng)屬性名的值賦值給當(dāng)前節(jié)點(diǎn)值
 //這里因?yàn)閚ode是input標(biāo)簽所以值為node.value
 node.value = vm.data[name];
 //最后標(biāo)簽中的v-model屬性也可以功成身退了，刪除它
 node.removeAttribute(attr[i].nodeName);
 }
 }
 }

 //node節(jié)點(diǎn)為text文本節(jié)點(diǎn)#text時(shí)
 if(node.nodeType === 3){
 var reg = /\{\{(.*)\}\}/;
 if(reg.test(node.nodeValue.trim())){
 //將正則匹配到的{{}}中的字符串賦值給name
 var name = RegExp.$1;
 //利用name對(duì)應(yīng)賦值相應(yīng)的節(jié)點(diǎn)值
 node.nodeValue = vm.data[name];
 }
 }
 }

 //MVVM構(gòu)造函數(shù),這里我就寫成Vue了
 function Vue(options){
 this.id = options.el;
 this.data = options.data;
 //將根節(jié)點(diǎn)與實(shí)例化后的對(duì)象作為參數(shù)傳入
 nodeToFragment(document.getElementById(this.id),this);
 }
 //實(shí)例化
 var vm = new Vue({
 el:'app',
 data:{
 msg:'hello,two-ways-binding',
 test:'test key'
 }
 })

 //判斷每個(gè)dom節(jié)點(diǎn)是否擁有子節(jié)點(diǎn)，若有則返回該節(jié)點(diǎn)
 function isChild(node){
 if(node.childNodes.length ===0){
 return false;
 }
 else{
 return node;
 }
 }

 //利用文檔碎片劫持dom結(jié)構(gòu)及數(shù)據(jù)，進(jìn)而進(jìn)行dom的重構(gòu)
 function nodeToFragment(node,vm){
 var frag = document.createDocumentFragment();
 var child;
 while(child = node.firstChild){
 //一級(jí)dom節(jié)點(diǎn)數(shù)據(jù)綁定
 compile(child,vm);
 //判斷每個(gè)一級(jí)dom節(jié)點(diǎn)是否有二級(jí)節(jié)點(diǎn)，若有則遞歸處理文檔碎片
 if(isChild(child)){
 nodeToFragment(isChild(child),vm);
 }
 frag.appendChild(child);
 }
 node.appendChild(frag);
 }

 //初始化綁定數(shù)據(jù)
 function compile(node,vm){
 //node節(jié)點(diǎn)為元素節(jié)點(diǎn)時(shí)
 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標(biāo)簽
 //------------------------
 if(node.nodeName === 'INPUT'){
 node.addEventListener('keyup',function(e){
 vm[name] = e.target.value;
 })
 }
 //由于數(shù)據(jù)已經(jīng)由data劫持至vm下，所以直接賦值vm[name]即可觸發(fā)getter訪問器
 node.value = vm[name];
 //-------------------------
 node.removeAttribute(attr[i].nodeName);
 }
 }
 }

 //node節(jié)點(diǎn)為text文本節(jié)點(diǎn)時(shí)
 if(node.nodeType === 3){
 var reg = /\{\{(.*)\}\}/;
 if(reg.test(node.nodeValue.trim())){
 var name = RegExp.$1;
 //node.nodeValue = vm[name];
 //----------------------
 //為每個(gè)節(jié)點(diǎn)建立訂閱者，通過訂閱者watcher初始化及更新視圖數(shù)據(jù)
 new watcher(vm,node,name);
 //-----------------------
 }
 }
 }
 //----------------------------------------------------------------
 //訂閱者(為每個(gè)節(jié)點(diǎn)的數(shù)據(jù)建立watcher隊(duì)列，每次接受更改數(shù)據(jù)需求后，利用劫持?jǐn)?shù)據(jù)執(zhí)行對(duì)應(yīng)節(jié)點(diǎn)的數(shù)據(jù)更新)
 function watcher(vm,node,name){
 //將每個(gè)掛載了數(shù)據(jù)的dom節(jié)點(diǎn)添加到通知者列表，要保證每次創(chuàng)建watcher時(shí)只有一個(gè)添加目標(biāo)，否則后續(xù)會(huì)因?yàn)閣atcher是全局而被覆蓋，所以每次要清空目標(biāo)

 Dep.target = this;
 this.vm = vm;
 this.node = node;
 this.name = name;
 //執(zhí)行update的時(shí)候會(huì)調(diào)用監(jiān)聽者劫持的getter事件，從而添加到watcher隊(duì)列，因?yàn)閡pdate中有訪問this.vm[this.name]
 this.update();
 //為保證只有一個(gè)全局watcher，添加到隊(duì)列后，清空全局watcher
 Dep.target = null;
 }

 watcher.prototype = {
 update(){
 this.get();
 //input標(biāo)簽特殊處理化
 if(this.node.nodeName === 'INPUT'){
 this.node.value = this.value;
 }
 else{
 this.node.nodeValue = this.value;
 }
 },
 get(){
 //這里調(diào)用了數(shù)據(jù)劫持的getter
 this.value = this.vm[this.name];
 }
 };

 //通知者(將監(jiān)聽者的更改信息需求發(fā)送給訂閱者，告訴訂閱者哪些數(shù)據(jù)需要更改)
 function Dep(){
 this.subs = [];
 }

 Dep.prototype = {
 addSub(watcher){
 //添加用到數(shù)據(jù)的節(jié)點(diǎn)進(jìn)入watcher隊(duì)列
 this.subs.push(watcher);
 },
 notify(){
 //遍歷watcher隊(duì)列，令相應(yīng)數(shù)據(jù)節(jié)點(diǎn)重新更新view層數(shù)據(jù),model => view
 this.subs.forEach(function(watcher){
 watcher.update();
 })
 }
 };

 //監(jiān)聽者(利用setter監(jiān)聽view => model的數(shù)據(jù)變化，發(fā)出通知更改model數(shù)據(jù)后再?gòu)膍odel => view更新視圖所有用到該數(shù)據(jù)的地方)
 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(){
 //初始化數(shù)據(jù)更新時(shí)將每個(gè)數(shù)據(jù)的watcher添加至隊(duì)列棧中
 if(Dep.target) dep.addSub(Dep.target);
 return val;
 },
 set(newVal){
 if(val === newVal) return ;
 //初始化后，文檔碎片中的虛擬dom已與model層數(shù)據(jù)綁定起來了
 val = newVal;
 //同步更新model中data屬性下的數(shù)據(jù)
 vm.data[key] = val;
 //數(shù)據(jù)有改動(dòng)時(shí)向通知者發(fā)送通知
 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'
 }
 })