如何快速实现一个虚拟 DOM 系统

时间: 2021-07-13阅读: 285标签: dom

虚拟 DOM 是目前主流前端框架技术核心之一,本文阐述如何实现一个简单的虚拟 DOM 系统。

为什么需要虚拟 DOM?

虚拟 DOM 就是一棵由虚拟节点组成的树,这棵树展现了真实 DOM 的结构。这些虚拟节点是轻量的、无状态的,一般是字符串或者仅仅包含必要字段的 JavaScript 对象。虚拟节点可以被组装成节点树树,通过特定的 "diff" 算法对两个节点树进行对比,找出其中细微的变更点,然后更新到真实 DOM 上去。

之所以会有虚拟 DOM,是因为直接更新真实 DOM 非常昂贵。通过新比对虚拟 DOM,然后只将变化的部分更新到真实 DOM 上去。这么做都是操作纯 JavaScript 对象,尽量避免了直接操作 DOM,读写成本低很多。

如何实现虚拟 DOM

在开始之前,我们需要明确一个虚拟 DOM 系统应该包含哪些必要的组成部分?

首先,我们要定义清楚什么是虚拟节点。一个虚拟节点可以是一个普通 JavaScript 对象,也可以是一个字符串。

我们定义一个函数 createNode 来创建虚拟节点。一个虚拟节点至少包含三个信息:

  • tag:保存虚拟节点的标签名,字符串
  • props:保存虚拟节点的 properties/attributes,普通对象
  • children:保存虚拟节点的子节点,数组

下面的代码是 createNode 实现样例:

const createNode = (tag, props, children) => ({
  tag,
  props,
  children,
});

我们通过 createNode 可以轻松的创建虚拟节点:

createNode('div', { id: 'app' }, ['Hello World']);

// 返回如下:
{
  tag: 'div',
  props: { id: 'app' },
  children: ['Hello World'],
}

现在,我们需要定义一个 createElement 函数来根据虚拟节点创建真实的 DOM 元素。

在 createElement 中,我们需要创建一个新的 DOM 元素,然后遍历虚拟节点的 props 属性,将其中的属性添加到 DOM 元素上去,之后再遍历 children 属性。如下代码是一个实现样例:

const createElement = vnode => {
  if (typof vnode === 'string') {
    return document.createTextNode(vnode); // 如果是字符串就直接返回文本元素
  }
  const el = document.createElement(vnode.tag);
  if (vnode.props) {
    Object.entries(vnode.props).forEach(([name, value]) => {
      el[name] = value;
    });
  }
  if (vnode.children) {
    vnode.children.forEach(child => {
      el.appendChild(createElement(child));
    });
  }
  return el;
}

现在,我们可以通过 createElement 将虚拟节点转变成真实 DOM 了。

createElement(createNode("div", { id: "app" }, ["Hello World"]));

// 输出: <div id="app">Hello World</div>

我们再来定义一个 diff 函数来实现 'diff' 算法。这个 diff 函数接收三个参数,一个是已经存在的 DOM 元素,一个是旧的虚拟节点,一个是新的虚拟节点。在这个函数中,我们将对比两个虚拟节点,在需要的时候,将旧的元素替换掉。

const diff = (el, oldVNode, newVNode) => {
  const replace = () => el.replaceWith(createElement(newVNode));
  if (!newVNode) return el.remove();
  if (!oldVNode) return el.appendChild(createElement(newVNode));
  // 处理纯文本的情况
  if (typeof oldVNode === 'string' || typeof newVNode === 'string') {
    if (oldVNode !== newVNode) return replace();
  } else {
    // 对比标签名
    if (oldVNode.tag !== newVNode.tag) return replace();
    // 对比 props
    if (!oldVNode.props?.some((prop) => oldVNode.props?.[prop] === newVNode.props?.[prop])) return replace();
    // 对比 children
    [...el.childNodes].forEach((child, i) => {
      diff(child, oldVNode.children?.[i], newVNode.children?.[i]);
    });
  }
}

在这个函数中,我们先处理纯文本的情况,如果新旧两个字符串不相同,则直接替换。之后,我们就可以假定两个虚拟节点都是对象了。我们先对比两个节点的标签名是否相同,不同则直接替换。之后对比两个节点的 props 是否相同,不同也直接替换。最后我们在递归的使用 diff 函数对比两个虚拟节点的 children。

至此,我们就实现了一个简版虚拟 DOM 系统所必须的所有功能。下面是使用样例:

const oldVNode = createNode("div", { id: "app" }, ["Hello World"]);
const newVNode = createNode("div", { id: "app" }, ["Goodbye World"]);
const el = createElement(oldVNode);
// <div id="app">Hello World</div>

diff(el, oldVNode, newVNode);
// el will become: <div id="app">Goodbye World</div>
文中的实现侧重于展示虚拟 DOM 的实现原理,在实现代码中并未考虑性能等其他因素。

原文来自:https://everfind.github.io/posts/2021/07/06/virtual-dom.html


站长推荐

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

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

详解 HTML attribute 和 DOM property

在大多数的文章中,attribute 一般被翻译为“特性”,property 被译为“属性”。把结论写在最前面,如果你全都懂,后面就不用看了。当我们书写 HTML 代码的时候

彻底搞懂虚拟Dom到真实Dom的生成过程

再有一棵树形结构的JavaScript对象后,我们现在需要做的就是将这棵树跟真实的Dom树形成映射关系,首先简单回顾之前遇到的mountComponent方法:

如何编写自己的虚拟DOM

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

JavaScript的基础语法及DOM元素和事件

JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果,用户交互及前后端的数据传输等。

vue的虚拟DOM有什么好处?

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

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

js节点操作

整个页面可以看成文档节点,节点用node表示。页面里面全是节点,元素节点, 属性节点,文本节点(文字,空格,换行),节点:一定有节点类型,节点名称,节点值

JavaScript中易混淆的DOM属性及方法对比

ParentNode.children:该属性继承自ParentNode,返回值是一个HTMLCollection实例,成员是当前节点的所有元素子节点,该属性只读,且该属性是动态集合。Node.prototype.childNodes:该属性继承自Node,返回值是一个NodeList实例,成员是当前节点的所有子节点(包括但不限于元素子节点),该属性也是个动态集合。

归纳DOM事件中各种阻止方法

事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:

整理常见 DOM 操作

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

点击更多...

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