实现虚拟DOM

时间: 2020-05-30阅读: 67标签: 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()函数

reactreact.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.cnblogs.com/zhenfeishi/archive/2020/07/29/13399163.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9539

关闭

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

一段监视 DOM 的神奇代码

通过使用此模块,只需将鼠标悬停在浏览器中,即可快速查看DOM元素的属性。基本上它是一个即时检查器。将鼠标悬停在 DOM 元素上会显示其属性!

React虚拟DOM

其中浏览器展示HTML经过了:构建DOM树,解析CSS构建CSSOM树,DOM与CSSOM结合成为RenderObject树,然后将RenderObject树渲染成页面(布局->重绘),这个过程是由渲染引擎做的

什么是DOM及DOM操作?

DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。W3C文档对象模型是中立于平台和语言之间的接口

vue的虚拟DOM有什么好处?

vue 中的虚拟DOM有什么好处?快!首先了解浏览器显示网页经历的5个过程 :1、解析标签,生成元素树(DOM树)2、解析样式,生成样式树3、生成元素与样式的关系

Js开发者:玩DOM也要专业范儿

原生 DOM API 很棒,而且 非常 有用。是的,它很冗长,但这是因为它们是低级构建块,上面是要构建抽象的。而且如果你真的不想多打字的话:所有现代编辑器和 IDE 都提供出色的代码完成功能。你也可以为最常用的功能加上别名

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

你知道虚拟Dom是怎么生成的吗?

在经过初始化阶段之后,即将开始组件的挂载,不过在挂载之前很有必要提一下虚拟Dom的概念。这个想必大家有所耳闻,我们知道vue@2.0开始引入了虚拟Dom,主要解决的问题是

Vue 数据更新后调用nextTick更新DOM

如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM

jQuery实现DOM元素拖拽交换位置

html + bootstrap布局画3个面板。监听面板的的 mousedown事件。记录当前对应面板的位置target_index,设置面板透明拖动。监听当前被拖动的面板的mousemove事件。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广