//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節(jié)點是否擁有子節(jié)點，若有則返回該節(jié)點
 function isChild(node){
 //這里使用childNodes可以讀取text文本節(jié)點，所以不用children
 if(node.childNodes.length ===0){
 return false;
 }
 else{
 return node;
 }
 }

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

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

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

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

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

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

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

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

 Dep.target = this;
 this.vm = vm;
 this.node = node;
 this.name = name;
 //執(zhí)行update的時候會調(diào)用監(jiān)聽者劫持的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(){
 //這里調(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é)點進入watcher隊列
 this.subs.push(watcher);
 },
 notify(){
 //遍歷watcher隊列，令相應數(shù)據(jù)節(jié)點重新更新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ù)后再從model => 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ù)據(jù)的watcher添加至隊列棧中
 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ù)有改動時向通知者發(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'
 }
 })