一：完整代碼 ;(function (w){ function createElement(type, attribute, ...childs){ //創建虛擬DOM let element = { type: '', attribute: {}, childs: [] }; element.ty ...
一：完整代碼
;(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的一個模型，它一方面可以讓你用較低的成本操作它，在適當的時候按照模型修改真實的對象以便提高效率，
