Snabbdom（虚拟dom）

创建项目
	创建项目目录 snabbdom md snabbdom 初始化package.json npm init 或 yarn init 安装打包工具 npm install parcel-bundler --save-dev 或 yarn add parcel-bundler 配置package.json "scripts": { "dev":"parcel index.html --open", "build":"parcel build index.html”, } 目录结构 index.html package.json src 01-basicusage.js
查看文档
	意义：学习库，先看文档通过文档了解库；查看demo，自己尝试；查看api的使用；文档英文 https://github.com/snabbdom/snabbdom 中文 https://github.com/coconilu/Blog/issues/152
安装snabbdom
	npm i snabbdom 或 yarn add snabbdom
导入snabbdom
	import { h, init, thunk } from 'snabbdom'; 错误示例 import snabbdom from 'snabbdom'; 原因查看 Eexport & Import
snabbdom 三个核心方法
	init() 高阶函数，返回patch()函数； h() 返回虚拟节点VNode 示例一 thunk() 一种优化策略，可以在处理不可变数据时使用；
	示例二显示hello world
	示例三显示div中嵌入h1标签、p标签
模块
	Snabbdom的核心库并不能处理元素的属性、样式、事件等，可以使用模块
	官方提供的6个模块 attributes 设置DOM元素的属性，使用setAttribute(); 处理布尔类型的属性 props 和attributes模块相似，设置DOM元素的属性element[attr] = value; 不处理布尔类型的属性 class 切换类样式注意：给元素设置类样式是通过sel选择器 dataset 设置 data-* 的自定义属性 eventlisteners 注册和移除事件 style 设置行内样式，支持动画 delayed/remove/destroy
	模块的使用步骤导入需要的模块、 Init()中注册模块使用h()函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移
	源码 https://github.com/SeriousLose/demos/blob/main/C/snabbdom/src/03-modules.js

// 示例一new Vue({router,store,render:h=>h(App)}).$mount(“#app”);

// 示例二// 1. hello world// init函数
// 参数: 数组,模块
// 返回值:patch函数,作用对比两个VNode的差异更新到真实DOM中
let patch = init([]);// h函数
// 第一个参数 标签+选择器
// 第二个参数 如果是字符串,就是标签中的内容
// 返回值 VNode
let VNode = h('div#container.cls-name','hello SeriousLose');// 获取app DOM
let app = document.querySelector("#app");// patch函数
// 第一个参数: 如果是DOM元素,内部会把DOM元素转换成VNode
// 第二个参数: VNode
// 返回值 VNode
let oldVNode = patch(app,VNode);// 模拟接口获取数据
setTimeout(() => {VNode = h('div','hello SeriousLose ,你好 snabbdom');oldVNode = patch(oldVNode,VNode);
}, 1000);

// 示例三import { h, init } from 'snabbdom';let patch = init([]);
let VNode = h('div#container',[h('h1','hello 苦了'),h('p','这是个p标签')
])let app = document.querySelector("#app");let oldVNode  = patch(app,VNode);setTimeout(() => {// patch(oldVNode,null)oldVNode = patch(oldVNode,h('!'))
}, 2000);

// 示例四import { eventListenersModule, h, init, styleModule } from 'snabbdom';let patch = init([styleModule,eventListenersModule,
])let VNode = h('div', {style: {backgroundColor: 'red'},on: { click: eventHandler }
}, [h('h1', 'hello 七夕')
])function eventHandler () {console.log('你好,SeriousLose')
}let app = document.getElementById("app");
let oldVNode = patch(app, VNode);

Snabbdom（虚拟dom）相关推荐

解密虚拟 DOM——snabbdom 核心源码解读
本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 V ...
【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
虚拟DOM 之 Snabbdom 一、基本介绍
Snabbdom 接口介绍(Snabbdom@1.0.1) 官方文档当前snabbdom版本为 @1.0.1.接口介绍在官方文档的基础上做扩展,新版本接口使用基本和@0.7.4差不多. Snabbd ...
虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
对vue虚拟dom的研究
Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点树在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象. ...
面试中的网红虚拟DOM，你知多少呢？深入解读diff算法
深入浅出虚拟DOM和diff算法一.虚拟DOM(Vitual DOM) 1.虚拟DOM(Vitual DOM)和diff的关系 2.真实DOM的渲染过程 3.虚拟DOM是什么? 4.解决方案 - v ...
【Vue.js源码解析二】-- 虚拟 DOM
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读虚拟 DOM 基本介绍什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象 ...
Vue深入学习2—虚拟DOM和Diff算法
1.snabbdom 是什么? snabbdom是"速度"的意思,源码只有200行,使用TS写的,让东西变得模块化 2.snabbdom 的 h 函数如何工作? h函数用于产生虚拟 ...
Vue深入学习—虚拟DOM和Diff算法
1.snabbdom 是什么? snabbdom是"速度"的意思,源码只有200行,使用TS写的,让东西变得模块化 2.snabbdom 的 h 函数如何工作? h函数用于产生虚拟 ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...

Snabbdom（虚拟dom）

Snabbdom（虚拟dom）相关推荐

最新文章

热门文章