最近研究Vue的底層原理，寫了一個簡化版的Vue，可以在支持IE6、IE7、IE8等低端瀏覽器運行。由於低端瀏覽器不支持對象屬性定義，所以設置屬性不支持直接賦值，需要調用虛擬機實例的set方法。目前只實現了基礎的方法，後續繼續完善！ ...
最近研究Vue的底層原理，寫了一個簡化版的Vue，可以在支持IE6、IE7、IE8等低端瀏覽器運行。由於低端瀏覽器不支持對象屬性定義，所以設置屬性不支持直接賦值，需要調用虛擬機實例的set方法。目前只實現了基礎的方法，後續繼續完善！
index.html
<!DOCTYPE html> <html> <head> <title>簡化版Vue</title> <script> window.onerror=function(){ return true; } </script> </head> <body> <hr /> <div id="simpleVue"> <button v-on:click="copy">戳我</button> <div> <textarea v-model="name"></textarea> <div v-text="name"></div> </div> <div> <select v-model="name"> <option value="name1" selected>name1</option> <option value="name2">name2</option> <option value="name3">name3</option> </select> </div> <hr> <button v-on:click="show">顯示/隱藏</button> <div v-if="isShow"> <input type="text" style="width: 300px" v-model="webSite"> <div v-text="webSite"></div> </div> </div> <script src="vmm.js"></script> <script> var vm = new VMM({ el: '#simpleVue', data: { name: '測試', webSite: 'https://github.com/steezer', isShow: true }, methods: { copy: function(){ vm.set('name', this.name +'測試'); }, show: function(){ vm.set('isShow', !this.isShow); } } }); </script> </body> </html>
vmm.js
function VMM(options){ /** * 訂閱器構造 用來接收屬性值的相關數據的變化通知 從而更新視圖 * * @param {Object} vm 虛擬機對象 * @param {HTMLElement} el Node節點 * @param {String} attr 屬性名稱 * @param {Object} val 屬性值 */ function Watcher(vm, el, attr, val){ this.vm = vm; this.el = el; this.attr = attr; this.val = val; /** * 將收到的新的數據更新在視圖中 */ this.update = function() { if (this.vm.$data[this.val] === true) { this.el.style.display = 'block'; } else if (this.vm.$data[this.val] === false) { this.el.style.display = 'none'; } else { this.el[this.attr] = this.vm.$data[this.val]; } } // 初始化訂閱器時更新一下視圖 this.update(); } /** * 獲取對象 * * @param {Object|String} id * @returns Object */ function getElem(id){ if(typeof(id)=='object'){ return id; } var target=id+'', prefix=target.substr(0,1), target=target.substr(1); if(prefix=='#'){ return document.getElementById(target); } if(prefix=='.'){ return document.getElementsByClassName(target); } return document.getElementsByTagName(target); } function getAttr(elem, name) { var node = elem.getAttributeNode(name); if (node && node.specified) { return node.nodeValue; } else { return undefined; } } function addEvent(node, type, handle){ if(document.addEventListener){ node.addEventListener(type, handle, false); }else{ node.attachEvent('on'+type, function(){ handle.call(node, arguments); }); }; } this.$el = getElem(options.el); this.$data = options.data; this.$methods = options.methods; this.oWatcherObj = {}; // 獲取屬性 this.get=function(key){ return this.$data[key]; } // 設置屬性 this.set=function(key, newVal){ var value=this.$data[key]; if (newVal !== value) { this.$data[key] = newVal; if(typeof(this.oWatcherObj[key])!="undefined"){ var watchers=this.oWatcherObj[key]; for(var i=0; i< watchers.length; i++){ watchers[i].update(); } } } } /** * 節點DOM解析器 */ this.compile=function(el) { var nodes = el.children, $this=this, addWatcher=function(node, attr, val){ if(typeof($this.oWatcherObj[val])=='undefined'){ $this.oWatcherObj[val]=[]; } $this.oWatcherObj[val].push(new Watcher($this, node, attr, val)); }; // 迭代同級所有節點 var values=[]; for(var k in el){ values.push(k) } for (var i = 0; i < nodes.length; i++) { var node = nodes[i],val; if (node.children.length > 0) { this.compile(node); // 遞歸所有子節點 } // 點擊事件 val=getAttr(node, 'v-on:click'); if (val) { if(typeof($this.$methods[val])=="function"){ addEvent(node, 'click', (function(val){ return function(e){ $this.$methods[val].call($this.$data, e); } })(val)); } } // IF指令 val=getAttr(node, 'v-if'); if (val) { addWatcher(node, "", val); } // Model val=getAttr(node, 'v-model'); if (val) { var event=node.tagName.match(/select/i) ? 'change' : ('oninput' in node ? 'input' : 'propertychange'); addWatcher(node, "value", val); addEvent(node, event, (function(i, val){ return function(e){ $this.set(val, nodes[i].value); } })(i, val)); } // Text val=getAttr(node, 'v-text'); if (val) { addWatcher(node, "innerText", val); } // Html val=getAttr(node, 'v-html'); if (val) { addWatcher(node, "innerHTML", val); } } } // 節點解析 this.compile(this.$el); }
