虚拟Dom

最新推荐文章于 2024-03-31 00:23:00 发布

Shimmer-612

最新推荐文章于 2024-03-31 00:23:00 发布

阅读量325

点赞数

分类专栏： js、html、css 文章标签：前端

本文链接：https://blog.csdn.net/weixin_45892086/article/details/124017719

版权

js、html、css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

虚拟Dom

一直以来都知道虚拟dom这个概念就是用代码来生成Dom，可以用diff算法

今天自己来实现一下，如下

创建一个对象，包含元素的各种属性，我这里就写了标签名和文字。嵌套的加个个Child

然后循环数组创建元素插入到body中，如果有child就插入到父元素中。

因为是一个数组，每次改变的时候就可以对比上次和本次dom数组

判断哪里变化了，变化了才修改这就是diff算法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const vDom = [
        {
          node: "p",
          text: "我是p标签",
        },
        {
          node: "div",
          text: "我是div",
        },
        {
          node: "ul",
          text: "我是ul",
          child: [{ node: "td", text: "我是td" }],
        },
      ];
      let tree = document.body;
      const showDom = (vDom, dom) => {
        vDom.map((item) => {
          const node = document.createElement(item.node);
          node.innerHTML = item.text;
          if (item.child) {
            showDom(item.child, node);
          }
          dom.appendChild(node);
        });
      };
      showDom(vDom, tree);
    </script>
  </body>
</html>