1. 1 我们看到的变量，其实都不是独立的，它们都是windows对象上的属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 var a = 117; 12 console.log(a); 13 console.log(window.a); 14 </script> 15 </body> 16 </html>
运行结果：直接打印a 和 打印window下的a 结果一样
1.2 defineProperty(): 每个对象在对本身属性的设置或者调用时，都会调用set()或则get()函数；这个和php类的调用差不多，在php中，叫做魔术方法，在调用类时，会调用__construct()方法，在结束调用时，会调用__destruct() 方法；
1 <script> 2 var obj = {}; 3 Object.defineProperty(obj, 'name1', { 4 set: function() { 5 console.log("set()方法被调用了"); 6 }, 7 get: function() { 8 console.log("get()方法被调用了"); 9 } 10 }); 11 var a = obj.name1; // 调用get()方法 12 obj.name1 = "huanying2015"; // 调用set()方法 13 </script>
运行结果：
2. 对obj对象的属性进行监控，当属性改变时，调用set方法：其实这里监控的也不是obj的属性，而是监控输入框value值的变换，通过keyup 事件来监控
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title>Document</title> 6 <script> 7 window.onload = function() { 8 var OInput = document.querySelector("#aa"); 9 var Odiv = document.querySelector("#bb"); 10 var obj = {}; 11 Object.defineProperty(obj, 'content', { 12 set: function(val) { 13 OInput.value = val; 14 Odiv.innerHTML = val; 15 }, 16 }); 17 // e.target.value获取的就是你选择接受事件的元素输入的或者选择的值。 18 // 参数e接收事件对象。 19 // 而事件对象也有很多属性和方法， 其中target属性是获取触发事件对象的目标， 也就是绑定事件的元素， 20 // e.target表示该DOM元素， 然后在获取其相应的属性值。 21 OInput.addEventListener('keyup', function(e) { 22 obj.content = e.target.value; 23 }); 24 } 25 </script> 26 </head> 27 <body> 28 <input type="text" id="aa"> 29 <div id="bb"></div> 30 </body>
运行结果：
3. 双向绑定预热之------碎片节点说明：创建一个碎片节点---->然后在id 为box的范围内查找节点，把所有的节点都插入到碎片节点中，然后在把碎片节点插入到id为box 的范围内，即先把 id = box 中的东西拿出来，然后玩一玩，检查一下，再把东西放回去
注意：DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点。
1 <body> 2 <div id="box"> 3 <input type="text" id="txt"> 4 <span id="box2"></span> 5 </div> 6 <script> 7 function nodeToFragment(node) { 8 var frag = document.createDocumentFragment(); 9 var childNode; 10 // 这里childNode 和node.firstChild 都同时指向node 的第一个节点，放在while 中，是作为一个判断语句使用， 11 // 如果node.firstChild 为true ,即有第一个节点，那么执行do的内容（while(true){do;}）,如果没有第一个节点，那么终止循环 12 while (childNode = node.firstChild) { 13 // 1.把node的第一个子节点插入碎片节点中 14 // 2.注意注意： 15 // 3.有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。 16 // 4.以上的第3点是while循环的基础：所以每次循环，node.firstChild 都指向不同的节点，直到循环完毕 17 frag.appendChild(childNode); 18 } 19 return frag; 20 } 21 var oBox = document.querySelector("#box"); 22 var nodeList = nodeToFragment(oBox); 23 // 把原先被删除的节点重新一次性插入原处，当插入的节点比较多时，这可以调高效率，减少页面对DOM的渲染次数 24 oBox.appendChild(nodeList); 25 </script> 26 </body>
运行结果：
4. 绑定编译原理：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function() { 10 // 替换函数：对html 中的content 进行替换 11 function compile(node, ghost) { 12 // 当需要替换的节点为元素节点时（即节点类型 nodeType ==1）,遍历元素中的属性节点，查找元素中有没有'v-model'属性，如果有，则进行替换 13 if (node.nodeType == 1) { 14 // 获取元素的所有属性，使用attributes属性获取 15 var attrs = node.attributes; 16 for (var i = 0, len = attrs.length; i < len; i++) { 17 // 当元素的属性名字为‘v-model’时 18 if (attrs[i].nodeName == "v-model") { 19 // 获取'v-model'属性的属性值，存在key中 20 var key = attrs[i].nodeValue; 21 // 设置元素节点的value 属性为 ghost.data.key // 所有的.都可以使用[]来替代// 22 node.value = ghost.data[key]; 23 // 清除元素中的 ‘v-mdel’属性 24 node.removeAttribute('v-model'); 25 } 26 } 27 }; 28 // 设置正则匹配 29 var re = /{{(.*)?}}/; 30 // 如果为文本节点，即属性值为3时， 31 if (node.nodeType == 3) { 32 // 查找文本节点的值，如果匹配正则 33 if (re.test(node.nodeValue)) { 34 // 获取正则中的第一个匹配对象，即{{}}中的内容 35 var key = RegExp.$1; 36 // 清除两侧的空格 37 key = key.trim(); 38 // 将文本内容替换为 ghost.data[key]; 39 node.nodeValue = ghost.data[key]; 40 } 41 } 42 }; 43 // 替换函数 44 function nodeToFragment(node, ghost) { 45 var flag = document.createDocumentFragment(); 46 var childNode; 47 while (childNode = node.firstChild) { 48 compile(childNode, ghost); 49 flag.appendChild(childNode); 50 } 51 return flag; 52 }; 53 // 传值函数 54 function Ghost(opt) { 55 this.data = opt.data; 56 var id = opt.el; 57 var Obox = document.querySelector(id); 58 var node = nodeToFragment(Obox, this); 59 Obox.appendChild(node); 60 } 61 // 实例化函数，这里相当于在vue.js 中的 new Vue({}); 62 new Ghost({ 63 el: "#box", 64 data: { 65 content: 'hello,huanying2015,how are you?' 66 } 67 }); 68 } 69 </script> 70 </head> 71 <body> 72 <div id="box"> 73 <input type="text" id="txt" v-model="content"> 74 <br> {{content}} 75 </div> 76 </body> 77 </html>
运行结果：
5.相应式绑定数据：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function() { 10 function responsive(obj, key, val) { 11 Object.defineProperty(obj, key, { 12 get: function() { 13 return val; 14 }, 15 set: function(newVal) { 16 if (val == newVal) { 17 return; 18 }; 19 val = newVal; 20 console.log('值改变了，新值为：' + val); 21 } 22 }); 23 }; 24 25 function observe(obj, ghost) { 26 Object.keys(obj).forEach(function(key) { 27 responsive(ghost, key, obj[key]); 28 }); 29 }; 30 // 替换函数：对html 中的content 进行替换 31 function compile(node, ghost) { 32 // 当需要替换的节点为元素节点时（即节点类型 nodeType ==1）,遍历元素中的属性节点，查找元素中有没有'v-model'属性，如果有，则进行替换 33 if (node.nodeType == 1) { 34 // 获取元素的所有属性，使用attributes属性获取 35 var attrs = node.attributes; 36 for (var i = 0, len = attrs.length; i < len; i++) { 37 // 当元素的属性名字为‘v-model’时 38 if (attrs[i].nodeName == "v-model") { 39 var key = attrs[i].nodeValue; 40 // 这里 ghost[key] 只是一个中间变量 41 // 监控键盘松开事件，当键盘松开时，在ghost上增加一个属性key,然后获取监听目标的值，把它赋值给ghost[key] 42 node.addEventListener('keyup', function(ev) { 43 ghost[key] = ev.target.value; 44 }); 45 // 然后把这个ghost[key]赋值给节点的value 属性 46 node.value = ghost[key]; 47 // 删除属性节点‘v-model’ 48 node.removeAttribute('v-model'); 49 } 50 } 51 }; 52 // 设置正则匹配 53 var re = /{{(.*)?}}/; 54 // 如果为文本节点，即属性值为3时， 55 if (node.nodeType == 3) { 56 // 查找文本节点的值，如果匹配正则 57 if (re.test(node.nodeValue)) { 58 // 获取正则中的第一个匹配对象，即{{}}中的内容 59 var key = RegExp.$1; 60 // 清除两侧的空格 61 key = key.trim(); 62 // 将文本内容替换为 ghost.data[key]; 63 node.nodeValue = ghost.data[key]; 64 } 65 } 66 }; 67 // 替换函数 68 function nodeToFragment(node, ghost) { 69 var flag = document.createDocumentFragment(); 70 var childNode; 71 while (childNode = node.firstChild) { 72 compile(childNode, ghost); 73 flag.appendChild(childNode); 74 } 75 return flag; 76 }; 77 // 传值函数 78 function Ghost(opt) { 79 this.data = opt.data; 80 var data = this.data; 81 var id = opt.el; 82 // 对当前对象及当前对象的data 数据对象进行监控 83 observe(data, this); 84 var Obox = document.querySelector(id); 85 var node = nodeToFragment(Obox, this); 86 Obox.appendChild(node); 87 } 88 // 实例化函数，这里相当于在vue.js 中的 new Vue({}); 89 new Ghost({ 90 el: "#box", 91 data: { 92 content: 'hello,huanying2015,how are you?' 93 } 94 }); 95 } 96 </script> 97 </head> 98 <body> 99 <div id="box"> 100 <input type="text" id="txt" v-model="content"> 101 <br> {{content}} 102 </div> 103 </body> 104 </html>
运行结果：
6. 发布者，订阅者模式解析：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 // 发布者1 发布信息 10 sub1 = { 11 update: function() { 12 console.log("这是发布者1发出的信息"); 13 } 14 } 15 // 发布者2 发布信息 16 sub2 = { 17 update: function() { 18 console.log("这是发布者2发出的信息"); 19 } 20 } 21 // 发布者3 发布信息 22 sub3 = { 23 update: function() { 24 console.log("这是发布者3发出的信息"); 25 } 26 } 27 //发布清单构造函数 28 function Dep() { 29 this.subs = [sub1, sub2, sub3]; 30 } 31 // 发布清单原型对象上加nodify()方法 32 Dep.prototype.nodify = function() { 33 this.subs.forEach(function(sub) { 34 // 执行发布框架操作 35 sub.update(); 36 }); 37 } 38 // 实例化发布清单，即填写发布清单 39 var dep = new Dep(); 40 // 一个实体指定出一套自己的发布方法 41 var pub = { 42 publish: function() { 43 // 发布方法中，执行发布清单的操作 44 dep.nodify(); 45 } 46 } 47 // 发布执行 48 pub.publish(); 49 </script> 50 </head> 51 <body> 52 </body> 53 </html>
运行结果：
7. 响应式数据绑定：即输入的同时，显示输出
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function() { 10 var Watcher = function(ghost, node, name) { 11 Dep.target = this; 12 this.name = name; 13 this.node = node; 14 this.ghost = ghost; 15 this.update(); 16 Dep.target = null; 17 } 18 Watcher.prototype = { 19 update: function() { 20 this.get(); 21 this.node.nodeValue = this.value; 22 }, 23 get: function() { 24 this.value = this.ghost[this.name]; 25 } 26 } 27 28 function Dep() { 29 this.subs = []; 30 } 31 Dep.prototype = { 32 addsub: function(sub) { 33 this.subs.push(sub); 34 }, 35 nodify: function() { 36 this.subs.forEach(function(sub) { 37 sub.update(); 38 }); 39 } 40 } 41 42 function responsive(obj, key, val) { 43 var dep = new Dep(); 44 Object.defineProperty(obj, key, { 45 get: function() { 46 if (Dep.target) { 47 dep.addsub(Dep.target); 48 } 49 console.log("access:" + val); 50 return val; 51 }, 52 set: function(newVal) { 53 if (val == newVal) { 54 return; 55 } 56 val = newVal; 57 console.log("值改变了：" + val); 58 dep.nodify(); 59 } 60 }); 61 } 62 63 function observe(obj, ghost) { 64 Object.keys(obj).forEach(function(key) { 65 responsive(ghost, key, obj[key]); 66 }); 67 } 68 69 function compile(node, ghost) { 70 var re = /{{(.*)}}/; 71 if (node.nodeType == 1) { 72 var attrs = node.attributes; 73 for (var i = 0, len = attrs.length; i < len; i++) { 74 if (attrs[i].nodeName == "v-model") { 75 var key = attrs[i].nodeValue; 76 node.addEventListener("keyup", function(ev) { 77 ghost[key] = ev.target.value; 78 }); 79 node.value = ghost[key]; 80 node.removeAttribute("v-model"); 81 } 82 } 83 } 84 if (node.nodeType == 3) { 85 if (re.test(node.nodeValue)) { 86 var key = RegExp.$1; 87 key = key.trim(); 88 new Watcher(ghost, node, key); 89 } 90 } 91 } 92 93 function nodeToFragment(node, ghost) { 94 var flag = document.createDocumentFragment(); 95 var childNode; 96 while (childNode = node.firstChild) { 97 compile(childNode, ghost); 98 flag.appendChild(childNode); 99 } 100 return flag; 101 } 102 103 function Ghost(opt) { 104 this.data = opt.data; 105 var data = this.data; 106 observe(data, this); 107 var id = opt.el; 108 var obox = document.querySelector(id); 109 var node = nodeToFragment(obox, this); 110 obox.appendChild(node); 111 } 112 var ogt = new Ghost({ 113 el: "#box", 114 data: { 115 content: "huanying2015", 116 msg: "ahifahha", 117 } 118 }); 119 } 120 </script> 121 </head> 122 <body> 123 <div class="box" id="box"> 124 <input type="text" id="tet" v-model="content"><br> {{content}} 125 </div> 126 </body> 127 </html>
运行结果：
