1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Object.defineProperty</title> 6 <style> 7 .decimal-leading-zero{list-style-type: decimal-leading-zero} 8 </style> 9 </head> 10 <body> 11 <p>参考vue.js实现双向绑定的方法理解双向绑定原理(:Object.defineProperty和发布-订阅模式)</p> 12 <h3>前端MVVM原理--参考vue.js实现</h3> 13 <ul class="decimal-leading-zero"> 14 <li>Objdect.defineProperty实现属性劫持</li> 15 <li>实现一个Observer,能够对数据的所有的属性进行监听,如有变动可拿到最新值并通知订阅者</li> 16 <li>实现一个Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换相应数据并绑定相应更新函数</li> 17 <li>实现Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每一个属性变动的通知,并执行指令绑定的相应更新函数,更新视图</li> 18 <li>mvvm入口函数,整合以上三者</li> 19 </ul> 20 21 <div id="app"> 22 <input type="text" v-model="textvalue"> 23 {{ textvalue }} 24 <input type="text" v-model="text"> 25 {{ text }} {{ text }} 26 </div> 27 <script> 28 var uid$1 = 0; 29 function Watcher(vm, node, name){ 30 Dep.target = this; 31 this.name = name; 32 this.node = node; 33 this.vm = vm; 34 this.uid = uid$1++; 35 this.update(); 36 Dep.target = null; 37 }; 38 39 Watcher.prototype = { 40 update: function(){ 41 this.get(); 42 this.node.nodeValue = this.value; 43 }, 44 get:function(){ //获取data中的属性值 45 this.value = this.vm[this.name]; 46 } 47 }; 48 49 function compile(node, vm){ 50 var reg = new RegExp(/{{(.*?)}}/g); //正则匹配指令({{ text }}) 51 if(node.nodeType === 1){ //匹配节点元素 52 var attr = node.attributes; //获取节点元素的所有属性 53 //解析属性 54 for (var i = 0; i < attr.length; i++) { 55 if(attr[i].nodeName == 'v-model'){ 56 var name = attr[i].nodeValue; //获取v-model绑定的属性名 57 node.addEventListener('input', function(e){ 58 //给相应的data属性赋值，并触发该属性的set方法 59 vm[name] = e.target.value; 60 }); 61 node.value = vm.data[name]; //将data值赋值给node 62 node.removeAttribute('v-model'); 63 }; 64 }; 65 }; 66 if (node.nodeType === 3) { //匹配节点类型为text的元素 67 if (reg.test(node.nodeValue.trim())) { //去除空格,防止指令前后有空格的状况 68 var nodeValue = node.nodeValue.trim(); 69 nodeValue.match(reg).forEach(function(key){ 70 var name = key.replace(/{{(.*?)}}/g,RegExp.$1); //获取匹配到的字符串 71 name = name.trim(); 72 //node.nodeValue = vm.data[name]; //将data值赋值给node 73 new Watcher(vm, node, name); //这里改成订阅者形式,从而实现自动更新绑定相同指令的元素 74 }); 75 }; 76 }; 77 }; 78 79 function nodeToFragment(node, vm){ 80 var flag = document.createDocumentFragment(); 81 var child; 82 83 //循环遍历节点，编译节点并劫持到文档片段中 84 while(child = node.firstChild){ 85 compile(child, vm); //根据指令模板编译节点指令 86 flag.append(child); //将子节点劫持到文档片段中 87 }; 88 89 return flag; //返回文档片段 90 }; 91 92 function Dep(){ 93 this.subs = []; 94 }; 95 96 Dep.prototype = { 97 addSub: function(sub){ 98 if(!this.subs[sub.uid]){ 99 //防止重复添加 100 this.subs[sub.uid] = sub; 101 } 102 }, 103 notify: function(){ 104 for(var uid in this.subs){ 105 this.subs[uid].update(); 106 } 107 } 108 } 109 110 function defineReactive(obj, key, val){ 111 var dep = new Dep(); 112 113 Object.defineProperty(obj, key, { 114 get: function(){ 115 //添加订阅者watcher到主体对象Dep中 116 if(Dep.target) dep.addSub(Dep.target); 117 return val; 118 }, 119 set: function(newVal){ 120 if (newVal === val) return; 121 val = newVal; 122 //console.log(val); 123 //作为发布者发出通知 124 dep.notify(); 125 } 126 }); 127 }; 128 129 function observe(obj, vm){ 130 Object.keys(obj).forEach(function(key){ 131 defineReactive(vm, key, obj[key]); 132 }); 133 }; 134 135 function vue(options){ 136 this.data = options.data; 137 var data = this.data; 138 139 observe(data, this); 140 141 var id = options.el; 142 var dom = nodeToFragment(document.getElementById(id), this); 143 //编译完成后，将dom重新赋值给app 144 document.getElementById(id).appendChild(dom); 145 }; 146 </script> 147 <script> 148 var vm = new vue({ 149 el: 'app', 150 data: { 151 textvalue: 'hello world', 152 text: 'hello' 153 } 154 }); 155 </script> 156 157 <script> 158 //视图控制器 159 // var userInfo = {}; 160 // Object.defineProperty(userInfo, "nickName", { 161 // get: function(){ 162 // return document.getElementById('nickName').innerHTML; 163 // }, 164 // set: function(nick){ 165 // document.getElementById('nickName').innerHTML = nick; 166 // } 167 // }); 168 // Object.defineProperty(userInfo, "introduce", { 169 // get: function(){ 170 // return document.getElementById('introduce').innerHTML; 171 // }, 172 // set: function(introduce){ 173 // document.getElementById('introduce').innerHTML = introduce; 174 // } 175 // }) 176 </script> 177 178 <script> 179 // //定义一个发布者 180 // var publisher = { 181 // publish: function(){ 182 // dep.notify(); 183 // } 184 // }; 185 186 // //定义三个订阅者 187 // var subscriber1 = {update: function(){console.log(1);}}; 188 // var subscriber2 = {update: function(){console.log(2);}}; 189 // var subscriber3 = {update: function(){console.log(3);}}; 190 191 // //定义一个主体对象，用于存放订阅者 192 // function Dep(){ 193 // this.subscribers = [subscriber1,subscriber2,subscriber3]; 194 // }; 195 196 // //定义主体对象的原型方法notify,用于调用订阅者的更新方法,从而实现订阅更新操作 197 // Dep.prototype.notify = function() { 198 // this.subscribers.forEach(function(subscriber){ 199 // subscriber.update(); 200 // }); 201 // }; 202 203 // //发布者发布消息,主体对象执行notify方法,进而触发订阅者执行update方法 204 // var dep = new Dep(); 205 // publisher.publish(); 206 </script> 207 </body> 208 </html>