手撸一个虚拟DOM,不错

大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注点赞加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识，回复 ”网站模板“，免费送N++网站模板！！点我探索新世界！

什么是DOM

DOM（文档对象模型）是一种树状结构，包含有关 HTML（或 XML）页面结构的信息。树中的每个单独的节点代表网页上的一个元素。

在 Javascript 中，可以通过window.document对象访问和修改 DOM。让我们看看如何使用 DOM 接口向网页添加元素。

我们有下面HTML模板代码。

<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <title>DOM</title>

  </head>

  <body>

    <div id="app"></div>

    <script src="./main.js"></script>

  </body>

</html>

PS: 写过Vue项目的同学可能比较熟悉，在Vue脚手架生成的项目中，public文件夹下的index.html也是定义了一个div#app.

要通过 DOM 接口更改页面的内容，我们可以执行以下操作：

const app = document.querySelector('#app');

app.innerHTML = `

  <h1>Hello from DOM</h1>

`;

首先，我们从 DOM 中获取一个 id 为“app”的元素，然后我们更改该元素的内容。

这种修改DOM的方法，在以前是我们经常使用的，尤其是JQuery时代。这种方式适用于不经常更新UI的小型应用程序，如果我们想要构建一个高响应的网站，这种方法就会出现问题。

JS操作DOM 是很慢的。每次都重新创建整棵树会浪费时间和资源。如果我们想构建一个高反应性的网页，我们需要寻找另一种解决方案。

一种方法是通过比较新旧树来查看哪些元素需要更新。这正是 Virtual DOM 的目标。

创建一个虚拟 DOM

在真实的 DOM 中，有一个document.createElement创建新节点的方法。对于我们的虚拟 DOM，我们也需要这样一个方法。

`view`方法

让我们创建一个名为h（约定）的函数

const h = (type, props={}, children=[]) => ({

    type,

    props,

    children,

  });

type参数描述了 HTML 元素的类型，例如h1，div等等...
props参数的工作方式与 React/Vue 中的 props 完全相同——它允许我们将数据（属性）传递给元素
children当前元素内其他子节点。

让我们看看它是如何使用的。



const view = () =>

  h('div', {}, [

    h('h1', {}, ['Hello']),

    h('p', {}, ['from virtual DOM!']),

    h('p', {}, ['from virtual DOM!']),

    h('p', {}, ['from virtual DOM!']),

    h('p', {}, ['from virtual DOM!']),

  ]);

我们创建了一个div元素，里面有h1和p元素。这些元素中的每一个都有一个文本节点作为其子节点。

现在是时候将这个虚拟树转换为实际的 DOM。

`render`方法

让我们实现一个render功能。



const render = (root, view) => {

    const rendered = view();

    diff(root, null, rendered);

};

const diff = (root, oldNode, newNode, index) => {

    // 判断节点是否变化，有变化则更新

};

render(app, view);

渲染函数首先调用view函数，然后运行 diff 函数，该函数接受一个根元素（来自真实 DOM）、旧的虚拟节点（因为我们第一次渲染它是null）和新的虚拟节点。

`diff`方法

基本上，该diff函数只会将 oldNode 与 newNode 进行比较，看看它是否需要更新root.

现在让我们看看如何实现 diff 函数。

const diff = (root, oldNode, newNode, index) => {

    // 判断节点是否变化，有变化则更新

    if (!oldNode) {

        root.appendChild(createElement(newNode));

    }

};

如果没有oldNode，我们需要创建这个元素并将其插入 DOM。首先，我们使用该函数创建一个元素createElement，然后我们在第二个实现该函数，然后我们appendChild在一个真实的 DOM 元素上使用该方法，将该节点附加为其子节点。

让我们实现createElement功能。

const createElement = (node) => {

    if (typeof node === 'string') {

        return document.createTextNode(node);

    }

    const el = document.createElement(node.type);

    node.children.map(createElement).forEach(el.appendChild.bind(el));

    return el;

};

如果一个节点是一个文本节点（例如“Hello”），我们只需使用document.createTextNode函数渲染它。

如果不是，我们创建给定类型的元素，document.createElement然后循环遍历它的每个子元素，createElement递归调用函数。这样我们就创建了整个树并返回它。

让我们看看到目前为止我们编写的完整代码：



const app = document.querySelector('#app');

const h = (type, props = {}, children = []) => ({

    type,

    props,

    children,

});

const view = () =>

    h("div", {}, [

        h("h1", {}, ["Hello"]),

        h("p", {}, ["from virtual DOM!"]),

        h("p", {}, ["from virtual DOM!"]),

        h("p", {}, ["from virtual DOM!"]),

        h("p", {}, ["from virtual DOM!"]),

    ]);

const render = (root, view) => {

    const rendered = view();

    diff(root, null, rendered);

};

const diff = (root, oldNode, newNode, index) => {

    // 判断节点是否变化，有变化则更新

    if (!oldNode) {

        root.appendChild(createElement(newNode));

    }

};

const createElement = (node) => {

    if (typeof node === 'string') {

        return document.createTextNode(node);

    }

    const el = document.createElement(node.type);

    node.children.map(createElement).forEach(el.appendChild.bind(el));

    return el;

};

render(app, view);

现在，在浏览器中，我们可以检查我们的应用程序是否正常工作 - 如果我们运行此代码，我们将看到以下内容：

结论

耶。现在使用view和h函数，我们可以构建无限复杂的 UI。

当然，我们还没有实现状态管理，所以我们不能改变 DOM 中的任何东西。而且我们没有将任何属性传递给 DOM，因此我们无法真正设置应用程序的样式。这个我们会在下一篇文章中继续实现！