一：完整代碼
;(function (w){ function createElement(type, attribute, ...childs){ //創建虛擬DOM let element = { type: '', attribute: {}, childs: [] }; element.type = type; element.attribute = attribute; for(let item of childs){ element.childs.push(item); } return element; } function render(vElement, domNode){ //把虛擬DOM渲染到真實DOM節點 let elementList = [], //保存著一些元素陣列，這些元素陣列的第一項是父元素，其他項是子元素 listItem = [], //迭代中臨時保存elementList的每一項 topE = [vElement], //保存著上一層元素串列 tempE = [], //topE的臨時變數 elementRef = [], //保存元素參考，不保存文本節點的參考 elementRefs = []; //另一個，交替使用 while(topE.length != 0){ //生成符合符合要求的elementList陣列 for(let i = 0, len = topE.length; i < len; ++i){ //創建父元素并添加到listItem let pe = null; if(elementRef.length != 0){ pe = elementRef[i]; }else{ pe = document.createElement(topE[i].type); for(let k in topE[i].attribute){ pe[k] = topE[i].attribute[k]; } } listItem.push(pe); //遍歷并創建子元素添加到listItemlet ce = topE[i].childs; for(let j =0, lens = ce.length; j < lens; ++j){ if(typeof(ce[j]) == 'string'){ //如果子元素是字串let textElement = document.createTextNode(ce[j]); //創建文本節點 listItem.push(textElement); }else{ //如果子元素是物件 let e = document.createElement(ce[j].type); //創建元素節點 for(let k in ce[j].attribute){ e[k] = ce[j].attribute[k]; } listItem.push(e); elementRefs.push(e); //保存元素節點的參考 tempE.push(ce[j]); //放入tempE } } //把listItem添加到elementList，并清空listItem，為下一次回圈做準備 elementList.push(listItem); listItem =[]; } //交替使用 elementRef = elementRefs; elementRefs =[]; topE = tempE; tempE = []; } for(let i = elementList.length -1; i >= 0; --i){ //從后向前對elementList陣列進行處理 let temp = elementList[i]; for(let j = 1, len = temp.length; j < len; ++j){ temp[0].appendChild(temp[j]); } } domNode.innerHTML = ""; domNode.appendChild(elementList[0][0]); //把生成的真實dom元素添加到給定的元素內 } let Vdom = { createElement, render }; w.Vdom = Vdom; })(window);
二：語法說明
1：該程式向全域暴露了一個Vdom物件，Vdom提供了兩個方法，createElement()，render()，分別用于創建元素及把虛擬dom渲染到真實dom節點
2：createElement()的第一個引數是元素型別，比如p，h1等，第二個引數是屬性集合物件，比如{title: 'Hello World', style: 'color:red;'}，之后可以接受任意個引數，每個引數都是一個元素節點或者文本節點
3：render()的第一個引數是用createElement()方法創建的虛擬元素，第二個引數是將要渲染到的區域元素
三：需要注意的點
提供的Vdom.createElement()、Vdom.render()函式和
React的React.createElement()及ReactDOM.render()方法非常相似
四：案例演示
新建一個檔案夾，進入，新建一個vdom.js檔案，把完整代碼粘貼進去，保存，再新建一個html檔案，粘貼以下代碼，保存，然后雙擊打開，在瀏覽器里應該可以看到效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>虛擬dom的實作</title> </head> <body> <div id="root"> <h1>一秒后開始計時</h1> </div> <script src="./vdom.js"></script> <script> function tick(){ const e = Vdom.createElement( 'div', {}, Vdom.createElement( 'h1', {style: 'color:red;', title: '時間'}, 'time:', (new Date()).toLocaleTimeString() ) ); Vdom.render(e, document.getElementById('root')); } setInterval(tick, 1000); </script> </body> </html>
五：實作思路及代碼組織
把createElement()的引數轉化為特定的js物件來表示虛擬dom，
封裝函式createElement() 把生成的js物件轉化為真實的dom掛載到指定的元素上，
封裝函式render() 把前面兩個函式放在自執行函式內，
防止污染全域變數，然后將其掛載到Vdom物件上，同時把Vdom暴露給window
六：擴展
在render()函式內根據js虛擬DOM創建真實DOM節點時，有機會把創建的真實DOM節點的參考掛載到虛擬DOM上，
這樣就可以繼續實作組件化及diff演算法
虛擬DOM顧名思義，只是真實DOM的一個模型，它一方面可以讓你用較低的成本操作它，在適當的時候按照模型修改真實的物件以便提高效率，
另一方面則為你構建抽象時提供了便利
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25034.html
標籤：JavaScript
上一篇：Webpack 原理淺析