虚拟dom及diff算法之 —— snabbdom
源码：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
源码：https://github.com/snabbdom/snabbdom 测试环境搭建 npm i -S snabbdom 安装好的node_modules提供了js和ts的代码：build：js代码，src：ts代码 npm i -D webpack5 webpack-cli3 webpack-dev-server3 webpack&#x…...
毅速丨3D打印结合拓扑优化让轻量化制造更容易
轻量化可以减少产品的重量，提高产品的性能和效率，同时减少能源消耗和排放。尤其在航空航天、汽车制造造等行业对轻量化追求更高。当前，随着制造技术的发展，拓扑优化结合3D打印为轻量化制造带来的显著的优势正在逐渐凸显。 首先&am…...
CentOS 7使用RPM包安装MySQL5.7
目标 本文目标是简单介绍如何在CentOS 7上使用RPM包安装MySQL 5.7，然后描述如何调整存储路径datadir。 环境准备 操作系统 —— CentOS 7MySQL版本 —— MySQL 5.7.44 获取MySQL-rpm包 官网下载地址：https://dev.mysql.com/downloads/mysql/5.7.htm…...
UI设计工具都哪些常用的，推荐这5款
对于UI设计师来说，日常工作无非是围绕“需求分析”→设计实施→“开发交付”这三个环节来进行。 然而，在每个环节中，设计师使用的工具却完全不同。在这里，我收集整理了UI设计师在日常工作中常用的五种工具，希望能为新…...
小饭店点餐系统，小餐馆点餐怎么方便，操作简单的酒店点单软件
小饭店点餐系统，小餐馆点餐怎么方便，操作简单的酒店点单软件 今天给大家分享是 佳易王酒店点餐管理系统软件V16.0版本，点餐界面如下图， 1、开台的桌子醒目显示，结账后或没有开台的桌子为灰色显示。 2、多种点餐方式…...
面试经典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”…...
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…...
大数据Doris（十七）：关于 Partition 和 Bucket 的数量和数据量的建议
文章目录 关于 Partition 和 Bucket 的数量和数据量的建议 关于 Partition 和 Bucket 的数量和数据量的建议 一个表的 Tablet 总数量等于 (Partition num * Bucket num)。一个表的 Tablet 数量，在不考虑扩容的情况下，推荐略多于整个集群的磁盘数量。单个 Tablet 的数据量理论…...
进击的巨人 完结篇 后篇-中文下载
话不多说，直接上链接 【简中】[BeanSub][Shingeki_n…1080P][x264_AAC].mp4 https://www.aliyundrive.com/s/7V4jaN6s6rY 点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放…...
力扣刷题-二叉树-二叉树的非递归遍历
参考：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 思路 为什么可以用迭代法（非递归的方式）来实现二叉树的前后中序遍历呢？ 我们在栈与…...
react_15
动态菜单 图标要独立安装依赖 npm install ant-design/icons 图标组件，用来将字符串图标转换为标签图标 import * as icons from "ant-design/icons"; interface Module {[p: string]: any; } const all: Module icons; export default function Ico…...
关于ROS的网络通讯方式TCP/UDP
一、TCP与UDP TCP/IP协议族为传输层指明了两个协议：TCP和UDP，它们都是作为应同程序和网络操作的中介物。 **TCP（Transmission Control Protocol）协议全称是传输控制协议，是一种面向连接的、可靠的、基于字节流的传输…...
Leetcode—421.数组中两个数的最大异或值【中等】明天写一下字典树做法！！！
2023每日刷题（十九） Leetcode—421.数组中两个数的最大异或值 算法思想 参考自灵茶山艾府 实现代码 class Solution { public:int findMaximumXOR(vector<int>& nums) {int maxValue *max_element(nums.begin(), nums.end());int highId…...
数智赋能！麒麟信安参展全球智慧城市大会
10月31日至11月2日，为期三天的2023全球智慧城市大会长沙在湖南国际会展中心举办，大会已连续举办12届，是目前全球规模最大、专注于城市和社会智慧化发展及转型的主题展会。长沙市委常委、常务副市长彭华松宣布开幕，全球智慧城市大会…...
基础课21——知识库管理
1.知识库的概念、特点与功能 智能客服中的知识库是一个以知识为基础的系统，可以明确地表达与实际问题相对应的知识，并构成相对独立的程序行为主体，有利于有效、准确地解决实际问题。它储存着机器人对所有信息的认知概念和理解，这…...
网络运维Day01
文章目录 环境准备OSI七层参考模型什么是协议？协议数据单元(PDU)设备与层的对应关系什么是IP地址？IP地址分类IP的网络位和主机位IP地址默认网络位与主机位子网掩码默认子网掩码查看IP地址安装CISCO汉化CISCO(可选操作) CISCO之PC机器验证通信 CISCSO之交…...
从零配置一台linux主机
1. Linux软件安装方式 软件安装教程 设置国内源 因为 linux 本身自带的下载源资源有限，所以在使用 apt 命令下载的时候，有些包可能找不到，所以要添加国内源。方法如下： 打开文件 /etc/apt/sources.list sudo gedit /etc/apt/s…...
【蓝桥每日一题]-倍增（保姆级教程 篇1）
今天讲一下倍增 目录 题目：忠诚 思路： 题目：国旗计划 思路： 查询迭代类倍增： 本质是一个一个选区间使总长度达到 M,类似凑一个数。而我们会经常用不大于它最大的二的次幂，减去之后，再重复这…...
CNN（卷积神经网络）、RNN（循环神经网络）和GCN（图卷积神经网络）
CNN（卷积神经网络）： 区别：CNN主要适用于处理网格状数据，如图像或其他二维数据。它通过卷积层、池化层和全连接层来提取和学习输入数据的特征。卷积层使用卷积操作来捕捉局部的空间结构，池化层用于降低特征图…...
在markdown中怎么画表格
2023年11月5日，周日上午 下面是一种常用的方式来编写表格： | 列1标题 | 列2标题 | 列3标题 | |:------:|:------:|:------:| | 内容 | 内容 | 内容 | | 内容 | 内容 | 内容 |在这个示例中，第一行用于定义表格的列标…...
赛事直播预告｜高含金量智能车竞赛，邀你逐梦无人驾驶赛道！
简 介： 第二十一届全国大学生智能汽车竞赛创意组"智慧城市Robotaxi挑战赛"即将启动。作为教育部认可的A类国家级学科竞赛，赛事聚焦纯视觉无人驾驶技术，依托百度多模态能力与边缘AI算力，考验参赛者的视觉、语言、执行融合…...
TLV320AIC3254音频编解码器：核心架构、配置实战与典型应用
1. 项目概述：从一颗“全能”音频芯片说起最近在做一个需要高保真音频采集和处理的嵌入式项目，选型时又一次把目光投向了TI的TLV320AIC3254。这颗芯片在音频工程师的圈子里名气不小，常被戏称为“音频界的瑞士军刀”。它本质上是一颗超低功耗的…...
UE5动画进阶：用Control Rig的Aim节点，5分钟搞定角色头部平滑跟随任意Actor
UE5动画进阶：Control Rig的Aim节点实现角色头部动态跟随 在游戏开发中，角色与环境的动态交互是提升沉浸感的关键要素之一。想象一个场景：NPC能够自然地跟随玩家的移动而转动头部，或是怪物精准锁定目标时的头部动作——这些细节往往…...
金融项目实战：用sm-crypto为你的Vue/React前端和Node后端加上国密‘安全锁’
金融级数据安全实战：基于SM国密算法的前后端全链路加密方案 在金融科技和政务系统等对数据安全有严格要求的领域，国密算法（SM系列算法）正逐渐成为行业标配。不同于传统的AES、RSA等国际通用算法，国密算法针对中文环境进…...
如何用Pixelle-Video实现零门槛AI短视频创作：新手完全指南
如何用Pixelle-Video实现零门槛AI短视频创作：新手完全指南 【免费下载链接】Pixelle-Video 🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine 项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video 你是否曾经想制作…...
我把Cursor和Copilot都扔了：实测Token从120万砍到4万
Claude Code称霸后，我把Cursor和Copilot都扔了：实测Token从120万砍到4万上周，Graphon AI 低调完成 830 万美元融资，推出 “pre-model intelligence layer” 来解决企业多模态数据关联难题；几乎同一时间，Ant…...
告别.osa！用PCL玩转ORB-SLAM3点云地图：保存、加载与二次开发实战
告别.osa！用PCL玩转ORB-SLAM3点云地图：保存、加载与二次开发实战 当ORB-SLAM3完成环境建图后，.osa格式的地图文件就像被锁在保险箱里的宝藏——虽然安全，却难以直接利用。本文将带你突破这一限制，通过PCL（P…...
嵌入式开发工具演进：从传统IDE到多核AI系统协同平台
1. 嵌入式开发工具的演进：从“编译助手”到“系统协作者”干了十几年嵌入式，从51单片机玩到现在的多核异构AI SoC，我最大的感受就是：手里的家伙事儿，越来越跟不上趟了。早些年，一个IDE（集成开发…...
如何在macOS上轻松运行Windows应用：Whisky终极指南
如何在macOS上轻松运行Windows应用：Whisky终极指南 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 想在苹果电脑上使用Windows专属的软件和游戏吗？厌倦了虚拟…...
Folcolor：让你的Windows文件夹告别“黄脸婆“，用色彩提升3倍工作效率
Folcolor：让你的Windows文件夹告别"黄脸婆"，用色彩提升3倍工作效率 【免费下载链接】Folcolor Windows explorer folder coloring utility 项目地址: https://gitcode.com/gh_mirrors/fo/Folcolor 想象一下这样的场景：你的电…...