实现虚拟DOM

一：完整代码

;(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的一个模型，它一方面可以让你用较低的成本操作它，在适当的时候按照模型修改真实的对象以便提高效率，

另一方面则为你构建抽象时提供了便利

猜你喜欢