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

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


作者:吕洋,发布于:2020/07/30
原文:https://www.cnblogs.com/zhenfeishi/p/13399163.html