一：完整代碼
;(function (w){ function createElement(type, attribute, ...childs){ //創(chuàng)建虛擬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節(jié)點 let elementList = [], //保存著一些元素數(shù)組，這些元素數(shù)組的第一項是父元素，其他項是子元素 listItem = [], //迭代中臨時保存elementList的每一項 topE = [vElement], //保存著上一層元素列表 tempE = [], //topE的臨時變量 elementRef = [], //保存元素引用，不保存文本節(jié)點的引用 elementRefs = []; //另一個，交替使用 while(topE.length != 0){ //生成符合符合要求的elementList數(shù)組 for(let i = 0, len = topE.length; i < len; ++i){ //創(chuàng)建父元素并添加到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); //遍歷并創(chuàng)建子元素添加到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]); //創(chuàng)建文本節(jié)點 listItem.push(textElement); }else{ //如果子元素是對象 let e = document.createElement(ce[j].type); //創(chuàng)建元素節(jié)點 for(let k in ce[j].attribute){ e[k] = ce[j].attribute[k]; } listItem.push(e); elementRefs.push(e); //保存元素節(jié)點的引用 tempE.push(ce[j]); //放入tempE } } //把listItem添加到elementList，并清空listItem，為下一次循環(huán)做準備 elementList.push(listItem); listItem =[]; } //交替使用 elementRef = elementRefs; elementRefs =[]; topE = tempE; tempE = []; } for(let i = elementList.length -1; i >= 0; --i){ //從后向前對elementList數(shù)組進行處理 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元素添加到給定的元素內(nèi) } let Vdom = { createElement, render }; w.Vdom = Vdom; })(window);
二：語法說明
1：該程序向全局暴露了一個Vdom對象，Vdom提供了兩個方法，createElement()，render()，分別用于創(chuàng)建元素及把虛擬dom渲染到真實dom節(jié)點
2：createElement()的第一個參數(shù)是元素類型，比如p，h1等，第二個參數(shù)是屬性集合對象，比如{title: 'Hello World', style: 'color:red;'}，之后可以接受任意個參數(shù)，每個參數(shù)都是一個元素節(jié)點或者文本節(jié)點
3：render()的第一個參數(shù)是用createElement()方法創(chuàng)建的虛擬元素，第二個參數(shù)是將要渲染到的區(qū)域元素
三：需要注意的點
提供的Vdom.createElement()、Vdom.render()函數(shù)和
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的實現(xiàn)</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>
五：實現(xiàn)思路及代碼組織
把createElement()的參數(shù)轉(zhuǎn)化為特定的js對象來表示虛擬dom，
封裝函數(shù)createElement() 把生成的js對象轉(zhuǎn)化為真實的dom掛載到指定的元素上，
封裝函數(shù)render() 把前面兩個函數(shù)放在自執(zhí)行函數(shù)內(nèi)，
防止污染全局變量，然后將其掛載到Vdom對象上，同時把Vdom暴露給window
六：擴展
在render()函數(shù)內(nèi)根據(jù)js虛擬DOM創(chuàng)建真實DOM節(jié)點時，有機會把創(chuàng)建的真實DOM節(jié)點的引用掛載到虛擬DOM上，
這樣就可以繼續(xù)實現(xiàn)組件化及diff算法
虛擬DOM顧名思義，只是真實DOM的一個模型，它一方面可以讓你用較低的成本操作它，在適當?shù)臅r候按照模型修改真實的對象以便提高效率，
另一方面則為你構(gòu)建抽象時提供了便利
