自学内容网 自学内容网
自学内容网 > 正文

diff 算法

🕗 发布于 2024-10-15 09:43 前端  

1 功能

提升性能，通过使用虚拟dom【虚拟dom其实就是数据(把dom数据化)】

2 主流：snabbdom、virtual-dom

snabbdom - npm

snabbdom/README-zh_CN.md at b301a9220918254aa9c79ad91012780ff8c55862 · snabbdom/snabbdom · GitHub

virtual-dom - npm

3 搭建环境

npm init -y

npm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S

npm install snabbdom -S

3.1 修改package.json运行命令

【"dev": "webpack-dev-server --open"】

{
  "name": "diff",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "snabbdom": "^3.6.2",
    "webpack": "^5.95.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }
}

3.2 新建配置webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: __dirname + '/public',
        filename: './js/[name].js'
    },
    devServer: {
        contentBase: './public',
        inline: true
    }
}

3.3 新建入口文件和出口文件

html：public/index.html

<!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>
    <h1>11111111111</h1>
    <script type="text/javascript" src="/js/index.js"></script>
</body>
</html>

js：src/index.js

alert(123)

3.4 检查运行环境

npm run dev

4 使用snabbdom示例

4.1 找到示例覆盖index.js

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h
} from "snabbdom";

const patch = init([
  // 通过传入模块初始化 patch 函数
  classModule, // 开启 classes 功能
  propsModule, // 支持传入 props
  styleModule, // 支持内联样式同时支持动画
  eventListenersModule // 添加事件监听
]);

const container = document.getElementById("container");

const vnode = h("div#container.two.classes", { on: { click: someFn } }, [
  h("span", { style: { fontWeight: "bold" } }, "This is bold"),
  " and this is just normal text",
  h("a", { props: { href: "/foo" } }, "I'll take you places!")
]);
// 传入一个空的元素节点 - 将产生副作用（修改该节点）
patch(container, vnode);

const newVnode = h(
  "div#container.two.classes",
  { on: { click: anotherEventHandler } },
  [
    h(
      "span",
      { style: { fontWeight: "normal", fontStyle: "italic" } },
      "This is now italic type"
    ),
    " and this is still just normal text",
    h("a", { props: { href: "/bar" } }, "I'll take you places!")
  ]
);
// 再次调用 `patch`
patch(vnode, newVnode); // 将旧节点更新为新节点

4.2 示例报错

  • Uncaught ReferenceError: someFn is not defined

// 将 someFn 替换成 function(){}  
const vnode = h("div#container.two.classes", { on: { click: function(){} } }, [
    h("span", { style: { fontWeight: "bold" } }, "This is bold"),
    " and this is just normal text",
    h("a", { props: { href: "/foo" } }, "I'll take you places!")
]);
  • Uncaught TypeError: Cannot read properties of null (reading 'nodeType') 

<body>
    // 在 public/index.html 中增加 id 为 container 的元素
    <div id="container"></div>

    <script type="text/javascript" src="/js/index.js"></script>
</body>
  •  Uncaught ReferenceError: anotherEventHandler is not defined

 

const newVnode = h(
  "div#container.two.classes",
  // 将 anotherEventHandler 替换成 function(){}
  { on: { click: function(){} } },
  [
    h(
      "span",
      { style: { fontWeight: "normal", fontStyle: "italic" } },
      "This is now italic type"
    ),
    " and this is still just normal text",
    h("a", { props: { href: "/bar" } }, "I'll take you places!")
  ]
);

 


原文地址：https://blog.csdn.net/Cwcgirl/article/details/142917339

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024