当前位置： 首页 > news >正文

虚拟dom及diff算法之 —— snabbdom

news 2026/2/7 17:01:06

源码：https://github.com/snabbdom/snabbdom

测试环境搭建

npm i -S snabbdom
安装好的node_modules提供了js和ts的代码：build：js代码，src：ts代码

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3
webpack：构建工具，必须安装5版本的，因为5版本才支持exports导出的能力
webpack-dev-server：提供8080端口访问

package.json中配置运行文件的入口

"scripts": {"dev": "webpack-dev-server"
},

www/index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- src/index.js中需要一个container容器 --><div id="container">你好</div><script src="/xuni/bundle.js"></script></body>
</html>

src/index.js

// 官方demo，参照https://github.com/snabbdom/snabbdom配置
import { init, classModule, propsModule, styleModule, eventListenersModule, h } from 'snabbdom'const patch = init([// Init patch function with chosen modulesclassModule, // makes it easy to toggle classespropsModule, // for setting properties on DOM elementsstyleModule, // handles styling on elements with support for animationseventListenersModule // attaches event listeners
])const container = document.getElementById('container')const vnode = h('div#container.two.classes', { on: { click: () => console.log('div clicked') } }, [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 into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode)const newVnode = h('div#container.two.classes', { on: { click: () => console.log('updated div clicked') } }, [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!")
])
// Second `patch` invocation
patch(vnode, newVnode) // Snabbdom efficiently updates the old view to the new state

运行：yarn dev

访问：http://localhost:8080/

相关文章：

虚拟dom及diff算法之 —— snabbdom

源码&#xff1a;https://github.com/snabbdom/snabbdom 测试环境搭建 npm i -S snabbdom 安装好的node_modules提供了js和ts的代码&#xff1a;build&#xff1a;js代码&#xff0c;src&#xff1a;ts代码 npm i -D webpack5 webpack-cli3 webpack-dev-server3 webpack&#x…...

编程日记 2023/11/5 12:18:18

毅速丨3D打印结合拓扑优化让轻量化制造更容易

轻量化可以减少产品的重量&#xff0c;提高产品的性能和效率&#xff0c;同时减少能源消耗和排放。尤其在航空航天、汽车制造造等行业对轻量化追求更高。当前&#xff0c;随着制造技术的发展&#xff0c;拓扑优化结合3D打印为轻量化制造带来的显著的优势正在逐渐凸显。 首先&am…...

编程日记 2023/11/5 12:17:16

CentOS 7使用RPM包安装MySQL5.7

目标 本文目标是简单介绍如何在CentOS 7上使用RPM包安装MySQL 5.7&#xff0c;然后描述如何调整存储路径datadir。 环境准备 操作系统 —— CentOS 7MySQL版本 —— MySQL 5.7.44 获取MySQL-rpm包 官网下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/5.7.htm…...

编程日记 2023/11/5 12:16:15

UI设计工具都哪些常用的，推荐这5款

对于UI设计师来说&#xff0c;日常工作无非是围绕“需求分析”→设计实施→“开发交付”这三个环节来进行。 然而&#xff0c;在每个环节中&#xff0c;设计师使用的工具却完全不同。在这里&#xff0c;我收集整理了UI设计师在日常工作中常用的五种工具&#xff0c;希望能为新…...

编程日记 2023/11/5 12:14:13

小饭店点餐系统，小餐馆点餐怎么方便，操作简单的酒店点单软件

小饭店点餐系统&#xff0c;小餐馆点餐怎么方便&#xff0c;操作简单的酒店点单软件 今天给大家分享是 佳易王酒店点餐管理系统软件V16.0版本&#xff0c;点餐界面如下图&#xff0c; 1、开台的桌子醒目显示&#xff0c;结账后或没有开台的桌子为灰色显示。 2、多种点餐方式…...

编程日记 2023/11/5 12:13:11

面试经典150题——Day31

文章目录 一、题目二、题解 一、题目 3. Longest Substring Without Repeating Characters Given a string s, find the length of the longest substring without repeating characters. Example 1: Input: s “abcabcbb” Output: 3 Explanation: The answer is “abc”…...

编程日记 2023/11/5 12:12:11

chinese_llama_aplaca训练和代码分析

训练细节 ymcui/Chinese-LLaMA-Alpaca Wiki GitHub中文LLaMA&Alpaca大语言模型本地CPU/GPU训练部署 (Chinese LLaMA & Alpaca LLMs) - 训练细节 ymcui/Chinese-LLaMA-Alpaca Wikihttps://github.com/ymcui/Chinese-LLaMA-Alpaca/wiki/%E8%AE%AD%E7%BB%83%E7%BB%86%E…...

编程日记 2023/11/5 12:11:10

大数据Doris（十七）：关于 Partition 和 Bucket 的数量和数据量的建议

文章目录 关于 Partition 和 Bucket 的数量和数据量的建议 关于 Partition 和 Bucket 的数量和数据量的建议 一个表的 Tablet 总数量等于 (Partition num * Bucket num)。一个表的 Tablet 数量，在不考虑扩容的情况下，推荐略多于整个集群的磁盘数量。单个 Tablet 的数据量理论…...

编程日记 2023/11/5 12:10:09

进击的巨人 完结篇 后篇-中文下载

话不多说&#xff0c;直接上链接 【简中】[BeanSub][Shingeki_n…1080P][x264_AAC].mp4 https://www.aliyundrive.com/s/7V4jaN6s6rY 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放…...

编程日记 2023/11/5 12:09:07

力扣刷题-二叉树-二叉树的非递归遍历

参考&#xff1a;https://www.programmercarl.com/%E4%BA%8C%E5%8F%89%E6%A0%91%E7%9A%84%E8%BF%AD%E4%BB%A3%E9%81%8D%E5%8E%86.html#%E6%80%9D%E8%B7%AF 思路 为什么可以用迭代法&#xff08;非递归的方式&#xff09;来实现二叉树的前后中序遍历呢&#xff1f; 我们在栈与…...

编程日记 2023/11/5 12:08:06

react_15

动态菜单 图标要独立安装依赖 npm install ant-design/icons 图标组件&#xff0c;用来将字符串图标转换为标签图标 import * as icons from "ant-design/icons"; interface Module {[p: string]: any; } const all: Module icons; export default function Ico…...

编程日记 2023/11/5 12:07:05

关于ROS的网络通讯方式TCP/UDP

一、TCP与UDP TCP/IP协议族为传输层指明了两个协议&#xff1a;TCP和UDP&#xff0c;它们都是作为应同程序和网络操作的中介物。 **TCP&#xff08;Transmission Control Protocol&#xff09;协议全称是传输控制协议&#xff0c;是一种面向连接的、可靠的、基于字节流的传输…...

编程日记 2023/11/5 12:06:03

Leetcode—421.数组中两个数的最大异或值【中等】明天写一下字典树做法！！！

2023每日刷题&#xff08;十九&#xff09; Leetcode—421.数组中两个数的最大异或值 算法思想 参考自灵茶山艾府 实现代码 class Solution { public:int findMaximumXOR(vector<int>& nums) {int maxValue *max_element(nums.begin(), nums.end());int highId…...

编程日记 2023/11/5 12:04:00

数智赋能！麒麟信安参展全球智慧城市大会

10月31日至11月2日&#xff0c;为期三天的2023全球智慧城市大会长沙在湖南国际会展中心举办&#xff0c;大会已连续举办12届&#xff0c;是目前全球规模最大、专注于城市和社会智慧化发展及转型的主题展会。长沙市委常委、常务副市长彭华松宣布开幕&#xff0c;全球智慧城市大会…...

编程日记 2023/11/5 12:02:59

基础课21——知识库管理

1.知识库的概念、特点与功能 智能客服中的知识库是一个以知识为基础的系统&#xff0c;可以明确地表达与实际问题相对应的知识&#xff0c;并构成相对独立的程序行为主体&#xff0c;有利于有效、准确地解决实际问题。它储存着机器人对所有信息的认知概念和理解&#xff0c;这…...

编程日记 2023/11/5 11:57:52

网络运维Day01

文章目录 环境准备OSI七层参考模型什么是协议&#xff1f;协议数据单元(PDU)设备与层的对应关系什么是IP地址&#xff1f;IP地址分类IP的网络位和主机位IP地址默认网络位与主机位子网掩码默认子网掩码查看IP地址安装CISCO汉化CISCO(可选操作) CISCO之PC机器验证通信 CISCSO之交…...

编程日记 2023/11/5 11:56:51

从零配置一台linux主机

1. Linux软件安装方式 软件安装教程 设置国内源 因为 linux 本身自带的下载源资源有限&#xff0c;所以在使用 apt 命令下载的时候&#xff0c;有些包可能找不到&#xff0c;所以要添加国内源。方法如下&#xff1a; 打开文件 /etc/apt/sources.list sudo gedit /etc/apt/s…...

编程日记 2023/11/5 11:54:50

【蓝桥每日一题]-倍增（保姆级教程 篇1）

今天讲一下倍增 目录 题目&#xff1a;忠诚 思路&#xff1a; 题目&#xff1a;国旗计划 思路&#xff1a; 查询迭代类倍增&#xff1a; 本质是一个一个选区间使总长度达到 M,类似凑一个数。而我们会经常用不大于它最大的二的次幂&#xff0c;减去之后&#xff0c;再重复这…...

编程日记 2023/11/5 11:53:48

CNN（卷积神经网络）、RNN（循环神经网络）和GCN（图卷积神经网络）

CNN&#xff08;卷积神经网络&#xff09;&#xff1a; 区别&#xff1a;CNN主要适用于处理网格状数据&#xff0c;如图像或其他二维数据。它通过卷积层、池化层和全连接层来提取和学习输入数据的特征。卷积层使用卷积操作来捕捉局部的空间结构&#xff0c;池化层用于降低特征图…...

编程日记 2023/11/5 11:50:44

在markdown中怎么画表格

2023年11月5日&#xff0c;周日上午 下面是一种常用的方式来编写表格&#xff1a; | 列1标题 | 列2标题 | 列3标题 | |:------:|:------:|:------:| | 内容 | 内容 | 内容 | | 内容 | 内容 | 内容 |在这个示例中&#xff0c;第一行用于定义表格的列标…...

编程日记 2023/11/5 11:49:43

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/31 12:52:15

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/1/21 19:46:26

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2026/1/11 6:22:16

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/11/22 14:54:34

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

编程新知 2026/2/5 4:00:33

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/12/16 16:11:02