从零开始，手写一个简易的Virtual DOM

时间  2019-11-06
标签 开始 手写 一个 简易 virtual dom 栏目 HTML 繁體版
原文   原文链接

众所周知，对前端而言，直接操做 DOM 是一件及其耗费性能的事情，以 React 和 Vue 为表明的众多框架广泛采用 Virtual DOM 来解决现在愈发复杂 Web 应用中状态频繁发生变化致使的频繁更新 DOM 的性能问题。本文为笔者经过实际操做，实现了一个很是简单的 Virtual DOM ，加深对现今主流前端框架中 Virtual DOM 的理解。javascript

关于 Virtual DOM ，社区已经有许多优秀的文章，而本文是笔者采用本身的方式，并有所借鉴前辈们的实现，以浅显易懂的方式，对 Virtual DOM 进行简单实现，但不包含snabbdom的源码分析，在笔者的最终实现里，参考了snabbdom的原理，将本文的Virtual DOM实现进行了改进，感兴趣的读者能够阅读上面几篇文章，并参考笔者本文的最终代码进行阅读。html

本文阅读时间约15~20分钟。前端

概述

本文分为如下几个方面来说述极简版本的 Virtual DOM 核心实现：java

  • Virtual DOM 主要思想
  • 用 JavaScript 对象表示 DOM 树
  • 将 Virtual DOM 转换为真实 DOM
    • 设置节点的类型
    • 设置节点的属性
    • 对子节点的处理
  • 处理变化
    • 新增与删除节点
    • 更新节点
    • 更新子节点

Virtual DOM 主要思想

要理解 Virtual DOM 的含义，首先须要理解 DOM ，DOM 是针对 HTML 文档和 XML 文档的一个 API ， DOM 描绘了一个层次化的节点树，经过调用 DOM API，开发人员能够任意添加，移除和修改页面的某一部分。而 Virtual DOM 则是用 JavaScript 对象来对 Virtual DOM 进行抽象化的描述。Virtual DOM 的本质是JavaScript对象，经过 Render函数，能够将 Virtual DOM 树 映射为 真实 DOM 树。node

一旦 Virtual DOM 发生改变，会生成新的 Virtual DOM ，相关算法会对比新旧两颗 Virtual DOM 树，并找到他们之间的不一样，尽量地经过最少的 DOM 操做来更新真实 DOM 树。react

咱们能够这么表示 Virtual DOM 与 DOM 的关系：DOM = Render(Virtual DOM)。webpack

用 JavaScript 对象表示 DOM 树

Virtual DOM 是用 JavaScript 对象表示，并存储在内存中的。主流的框架均支持使用 JSX 的写法， JSX 最终会被 babel 编译为JavaScript 对象，用于来表示Virtual DOM，思考下列的 JSX：git

<div>
    <span className="item">item</span>
    <input disabled={true} />
</div>
复制代码

最终会被babel编译为以下的 JavaScript对象：github

{
    type: 'div',
    props: null,
    children: [{
        type: 'span',
        props: {
            class: 'item',
        },
        children: ['item'],
    }, {
        type: 'input',
        props: {
            disabled: true,
        },
        children: [],
    }],
}
复制代码

咱们能够注意到如下两点：web

  • 全部的 DOM 节点都是一个相似于这样的对象：
{ type: '...', props: { ... }, children: { ... }, on: { ... } }
复制代码
  • 本文节点是用 JavaScript 字符串来表示

那么 JSX 又是如何转化为 JavaScript 对象的呢。幸运的是，社区有许许多多优秀的工具帮助咱们完成了这件事，因为篇幅有限，本文对这个问题暂时不作探讨。为了方便你们更快速地理解 Virtual DOM ，对于这一个步骤，笔者使用了开源工具来完成。著名的 babel 插件babel-plugin-transform-react-jsx帮助咱们完成这项工做。

为了更好地使用babel-plugin-transform-react-jsx，咱们须要搭建一下webpack开发环境。具体过程这里不作阐述，有兴趣本身实现的同窗能够到simple-virtual-dom查看代码。

对于不使用 JSX 语法的同窗，能够不配置babel-plugin-transform-react-jsx，经过咱们的vdom函数建立 Virtual DOM：

function vdom(type, props, ...children) {
    return {
        type,
        props,
        children,
    };
}
复制代码

而后咱们能够经过以下代码建立咱们的 Virtual DOM 树：

const vNode = vdom('div', null,
    vdom('span', { class: 'item' }, 'item'),
    vdom('input', { disabled: true })
);

复制代码

在控制台输入上述代码，能够看到，已经建立好了用 JavaScript对象表示的 Virtual DOM 树：

将 Virtual DOM 转换为真实 DOM

如今咱们知道了如何用 JavaScript对象 来表明咱们的真实 DOM 树，那么， Virtual DOM 又是怎么转换为真实 DOM 给咱们呈现的呢？

在这以前，咱们要先知道几项注意事项：

  • 在代码中，笔者将以$开头的变量来表示真实 DOM 对象；
  • toRealDom函数接受一个 Virtual DOM 对象为参数，将返回一个真实 DOM 对象；
  • mount函数接受两个参数：将挂载 Virtual DOM 对象的父节点，这是一个真实 DOM 对象，命名为$parent；以及被挂载的 Virtual DOM 对象vNode；

下面是toRealDom的函数原型：

function toRealDom(vNode) {
    let $dom;
    // do something with vNode
    return $dom;
}
复制代码

经过toRealDom方法，咱们能够将一个vNode对象转化为一个真实 DOM 对象，而mount函数经过appendChild，将真实 DOM 挂载：

function mount($parent, vNode) {
    return $parent.appendChild(toRealDom(vNode));
}
复制代码

下面，让咱们来分别处理vNode的type、props和children。

设置节点的类型

首先，由于咱们同时具备字符类型的文本节点和对象类型的element节点，须要对type作单独的处理：

if (typeof vNode === 'string') {
    $dom = document.createTextNode(vNode);
} else {
    $dom = document.createElement(vNode.type);
}
复制代码

在这样一个简单的toRealDom函数中，对type的处理就完成了，接下来让咱们看看对props的处理。

设置节点的属性

咱们知道，若是节点有props，那么props是一个对象。经过遍历props，调用setProp方法，对每一类props单独处理。

if (vNode.props) {
    Object.keys(vNode.props).forEach(key => {
        setProp($dom, key, vNode.props[key]);
    });
}
复制代码

setProp接受三个参数：

  • $target，这是一个真实 DOM 对象，setProp将对这个节点进行 DOM 操做；
  • name，表示属性名；
  • value，表示属性的值；

读到这里，相信你已经大概清楚setProp须要作什么了，通常状况下，对于普通的props，咱们会经过setAttribute给 DOM 对象附加属性。

function setProp($target, name, value) {
    return $target.setAttribute(name, value);
}
复制代码

但这远远不够，思考下列的 JSX 结构：

<div>
    <span className="item" data-node="item" onClick={() => console.log('item')}>item</span>
    <input disabled={true} />
</div>
复制代码

从上面的 JSX 结构中，咱们发现如下几点：

  • 因为class是 JavaScript 的保留字， JSX 通常使用className来表示 DOM 节点所属的class；
  • 通常以on开头的属性来表示事件；
  • 除字符类型外，属性还多是布尔值，如disabled，当该值为true时，则添加这一属性；

因此，setProp也一样须要考虑上述状况：

function isEventProp(name) {
    return /^on/.test(name);
}

function extractEventName(name) {
    return name.slice(2).toLowerCase();
}

function setProp($target, name, value) {
    if (name === 'className') { // 由于class是保留字，JSX使用className来表示节点的class
        return $target.setAttribute('class', value);
    } else if (isEventProp(name)) { // 针对 on 开头的属性，为事件
        return $target.addEventListener(extractEventName(name), value);
    } else if (typeof value === 'boolean') { // 兼容属性为布尔值的状况
        if (value) {
            $target.setAttribute(name, value);
        }
        return $target[name] = value;
    } else {
        return $target.setAttribute(name, value);
    }
}
复制代码

最后，还有一类属性是咱们的自定义属性，例如主流框架中的组件间的状态传递，即经过props来进行传递的，咱们并不但愿这一类属性显示在 DOM 中，所以须要编写一个函数isCustomProp来检查这个属性是不是自定义属性，由于本文只是为了实现 Virtual DOM 的核心思想，为了方便，在本文中，这个函数直接返回false。

function isCustomProp(name) {
    return false;
}
复制代码

最终的setProp函数：

function setProp($target, name, value) {
    if (isCustomProp(name)) {
        return;
    } else if (name === 'className') { // fix react className
        return $target.setAttribute('class', value);
    } else if (isEventProp(name)) {
        return $target.addEventListener(extractEventName(name), value);
    } else if (typeof value === 'boolean') {
        if (value) {
            $target.setAttribute(name, value);
        }
        return $target[name] = value;
    } else {
        return $target.setAttribute(name, value);
    }
}
复制代码

对子节点的处理

对于children里的每一项，都是一个vNode对象，在进行 Virtual DOM 转化为真实 DOM 时，子节点也须要被递归转化，能够想到，针对有子节点的状况，须要对子节点以此递归调用toRealDom，以下代码所示：

if (vNode.children && vNode.children.length) {
    vNode.children.forEach(childVdom => {
        const realChildDom = toRealDom(childVdom);
        $dom.appendChild(realChildDom);
    });
}
复制代码

最终完成的toRealDom以下：

function toRealDom(vNode) {
    let $dom;
    if (typeof vNode === 'string') {
        $dom = document.createTextNode(vNode);
    } else {
        $dom = document.createElement(vNode.type);
    }

    if (vNode.props) {
        Object.keys(vNode.props).forEach(key => {
            setProp($dom, key, vNode.props[key]);
        });
    }

    if (vNode.children && vNode.children.length) {
        vNode.children.forEach(childVdom => {
            const realChildDom = toRealDom(childVdom);
            $dom.appendChild(realChildDom);
        });
    }

    return $dom;
}
复制代码

处理变化

Virtual DOM 之因此被创造出来，最根本的缘由是性能提高，经过 Virtual DOM ，开发者能够减小许多没必要要的 DOM 操做，以达到最优性能，那么下面咱们来看看 Virtual DOM 算法 是如何经过对比更新前的 Virtual DOM 树和更新后的 Virtual DOM 树来实现性能优化的。

注：本文是笔者的最简单实现，目前社区广泛通用的算法是snabbdom，如 Vue 则是借鉴该算法实现的 Virtual DOM ，有兴趣的读者能够查看这个库的源代码，基于本文的 Virtual DOM 的小示例，笔者最终也参考了该算法实现，本文demo传送门，因为篇幅有限，感兴趣的读者能够自行研究。

为了处理变化，首先声明一个updateDom函数，这个函数接受如下四个参数：

  • $parent，表示将被挂载的父节点；
  • oldVNode，旧的VNode对象；
  • newVNode，新的VNode对象；
  • index，在更新子节点时使用，表示当前更新第几个子节点，默认为0；

函数原型以下：

function updateDom($parent, oldVNode, newVNode, index = 0) {

}
复制代码

新增与删除节点

首先咱们来看新增一个节点的状况，对于本来没有该节点，须要添加新的一个节点到 DOM 树中，咱们须要经过appendChild来实现：

转化为代码表述为：

// 没有旧的节点，添加新的节点
if (!oldVNode) {
    return $parent.appendChild(toRealDom(newVNode));
}
复制代码

同理，对于删除一个旧节点的状况，咱们经过removeChild来实现，在这里，咱们应该从真实 DOM 中将旧的节点删掉，但问题是在这个函数中是直接取不到这一个节点的，咱们须要知道这个节点在父节点中的位置，事实上，能够经过$parent.childNodes[index]来取到，这即是上面提到的为什么须要传入index，它表示当前更新的节点在父节点中的索引：

转化为代码表述为：

const $currentDom = $parent.childNodes[index];

// 没有新的节点，删除旧的节点
if (!newVNode) {
    return $parent.removeChild($currentDom);
}
复制代码

更新节点

Virtual DOM 的核心在于如何高效更新节点，下面咱们来看看更新节点的状况。

首先，针对文本节点，咱们能够简单处理，对于文本节点是否发生改变，只须要经过比较其新旧字符串是否相等便可，若是是相同的文本节点，是不须要咱们更新 DOM 的，在updateDom函数中，直接return便可：

// 都是文本节点，都没有发生变化
if (typeof oldVNode === 'string' && typeof newVNode === 'string' && oldVNode === newVNode) {
    return;
}
复制代码

接下来，考虑节点是否真的须要更新，如图所示，一个节点的类型从span换成了div，显而易见，这是必定须要咱们去更新DOM的：

咱们须要编写一个函数isNodeChanged来帮助咱们判断旧节点和新节点是否真的一致，若是不一致，须要咱们把节点进行替换：

function isNodeChanged(oldVNode, newVNode) {
    // 一个是textNode，一个是element，必定改变
    if (typeof oldVNode !== typeof newVNode) {
        return true;
    }

    // 都是textNode，比较文本是否改变
    if (typeof oldVNode === 'string' && typeof newVNode === 'string') {
        return oldVNode !== newVNode;
    }

    // 都是element节点，比较节点类型是否改变
    if (typeof oldVNode === 'object' && typeof newVNode === 'object') {
        return oldVNode.type !== newVNode.type;
    }
}
复制代码

在updateDom中，发现节点类型发生变化，则将该节点直接替换，以下代码所示，经过调用replaceChild，将旧的 DOM 节点移除，并将新的 DOM 节点加入：

if (isNodeChanged(oldVNode, newVNode)) {
    return $parent.replaceChild(toRealDom(newVNode), $currentDom);
}
复制代码

但这远远尚未结束，考虑下面这种状况：

<!-- old -->
<div class="item" data-item="old-item"></div>
复制代码
<!-- new -->
<div id="item" data-item="new-item"></div>
复制代码

对比上面的新旧两个节点，发现节点类型并无发生改变，即VNode.type都是'div'，可是节点的属性却发生了改变，除了针对节点类型的变化更新 DOM 外，针对节点的属性的改变，也须要对应把 DOM 更新。

与上述方法相似，咱们编写一个isPropsChanged函数，来判断新旧两个节点的属性是否有发生变化：

function isPropsChanged(oldProps, newProps) {
    // 类型都不一致，props确定发生变化了
    if (typeof oldProps !== typeof newProps) {
        return true;
    }

    // props为对象
    if (typeof oldProps === 'object' && typeof newProps === 'object') {
        const oldKeys = Object.keys(oldProps);
        const newkeys = Object.keys(newProps);
        // props的个数都不同，必定发生了变化
        if (oldKeys.length !== newkeys.length) {
            return true;
        }
        // props的个数相同的状况，遍历props，看是否有不一致的props
        for (let i = 0; i < oldKeys.length; i++) {
            const key = oldKeys[i]
            if (oldProps[key] !== newProps[key]) {
                return true;
            }
        }
        // 默认未改变
        return false;
    }

    return false;
}
复制代码

由于当节点没有任何属性时，props为null，isPropsChanged首先判断新旧两个节点的props是不是同一类型，便是否存在旧节点的props为null，新节点有新的属性，或者反之：新节点的props为null，旧节点的属性被删除了。若是类型不一致，那么属性必定是被更新的。

接下来，考虑到节点在更新先后都有props的状况，咱们须要判断更新先后的props是否一致，即两个对象是否全等，遍历便可。若是有不相等的属性，则认为props发生改变，须要处理props的变化。

如今，让咱们回到咱们的updateDom函数，看看是把Virtual DOM 节点props的更新应用到真实 DOM 上的。

// 虚拟DOM的type未改变，对比节点的props是否改变
const oldProps = oldVNode.props || {};
const newProps = newVNode.props || {};
if (isPropsChanged(oldProps, newProps)) {
    const oldPropsKeys = Object.keys(oldProps);
    const newPropsKeys = Object.keys(newProps);

    // 若是新节点没有属性，把旧的节点的属性清除掉
    if (newPropsKeys.length === 0) {
        oldPropsKeys.forEach(propKey => {
            removeProp($currentDom, propKey, oldProps[propKey]);
        });
    } else {
        // 拿到全部的props，以此遍历，增长/删除/修改对应属性
        const allPropsKeys = new Set([...oldPropsKeys, ... newPropsKeys]);
        allPropsKeys.forEach(propKey => {
            // 属性被去除了
            if (!newProps[propKey]) {
                return removeProp($currentDom, propKey, oldProps[propKey]);
            }
            // 属性改变了/增长了
            if (newProps[propKey] !== oldProps[propKey]) {
                return setProp($currentDom, propKey, newProps[propKey]);
            }
        });
    }
}
复制代码

上面的代码也很是好理解，若是发现props改变了，那么对旧的props的每项去作遍历。把不存在的属性清除，再把新增长的属性加入到更新后的 DOM 树中：

  • 首先，若是新的节点没有属性，遍历删除全部旧的节点的属性，在这里，咱们经过调用removeProp删除。removeProp与setProp相对应，因为本文篇幅有限，笔者在这里就不作过多阐述；
function removeProp($target, name, value) {
    if (isCustomProp(name)) {
        return;
    } else if (name === 'className') { // fix react className
        return $target.removeAttribute('class');
    } else if (isEventProp(name)) {
        return $target.removeEventListener(extractEventName(name), value);
    } else if (typeof value === 'boolean') {
        $target.removeAttribute(name);
        $target[name] = false;
    } else {
        $target.removeAttribute(name);
    }
}
复制代码
  • 若是新节点有属性，那么拿到旧节点和新节点全部属性，遍历新旧节点的全部属性，若是属性在新节点中没有，那么说明该属性被删除了。若是新的节点与旧的节点属性不一致/或者是新增的属性，则调用setProp给真实 DOM 节点添加新的属性。

更新子节点

在最后，与toRealDom相似的是，在updateDom中，咱们也应当处理全部子节点，对子节点进行递归调用updateDom，一个一个对比全部子节点的VNode是否有更新，一旦VNode有更新，则真实 DOM 也须要从新渲染：

// 根节点相同，但子节点不一样，要递归对比子节点
if (
    (oldNode.children && oldNode.children.length) ||
    (newNode.children && newNode.children.length)
) {
    for (let i = 0; i < oldNode.children.length || i < newNode.children.length; i++) {
        updateDom($currentDom, oldNode.children[i], newNode.children[i], i);
    }
}
复制代码

远远没有结束

以上是笔者实现的最简单的 Virtual DOM 代码，但这与社区咱们所用到 Virtual DOM 算法是有天壤之别的，笔者在这里举个最简单的例子：

<!-- old -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
复制代码
<!-- new -->
<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

对于上述代码中实现的updateDom函数而言，更新先后的 DOM 结构如上所示，则会触发五个li节点所有从新渲染，这显然是一种性能的浪费。而snabbdom则经过移动节点的方式较好地解决了上述问题，因为本文篇幅有限，而且社区也有许多对该 Virtual DOM 算法的分析文章，笔者就不在本文作过多阐述了，有兴趣的读者能够到自行研究。笔者也基于本文实例，参考snabbdom算法实现了最终的版本，有兴趣的读者能够查看本文示例最终版

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程