Open zhuanghaixin opened 3 years ago
mkdir snbbdom-demo
cd snbbdom-demo
yarn init -y # 创建 package.json
yarn add parcel-bundler # 本地按照 parcel
"scripts": {
"dev": "parcel index.html --open",
"build": "parcel build index.html"
}
yarn add snabbdom@0.7.4
{
"name": "snabbdom-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"parcel-bundler": "^1.12.4",
"snabbdom": "^0.7.4"
},
"scripts": {
"dev": "parcel index.html --open",
"build": "parcel build index.html"
}
}
// snabbdom的核心仅提供了最基本的功能,只导出了三个函数 init() h() thunk()
// 1.init()是一个高阶函数,返回patch()
// 2.h()是返回虚拟节点VNode,这个函数我们在vue.js使用过
/*
new Vue({
router,
store,
render:h=>h(App)
}).$mount('#app')
*/
// 3.thunk是一种优化策略,可以在处理不可变数据的时候使用
import {init,h,thunk} from 'snabbdom'
console.log('init') console.log(init) console.log('h') console.log(h) console.log('thunk') console.log(thunk)
## 第一个例子 输出hello world
import {h,init} from 'snabbdom'
// 1. 输出hello world // 返回值 patch函数 作用对比两个vnode的差异更新到真实DOM let patch=init([])
let vNode=h('div#container.cls','Hello World') // 将来要替换app里面到内容 let app=document.querySelector('#app') // patch函数, 第一个参数可以是DOM,内部会把DOM元素转换为VNode // 第二个参数 VNode // 返回值 VNode let oldVNode =patch(app,vNode)
![image](https://user-images.githubusercontent.com/24459069/103759096-1f6f6f80-504e-11eb-8bee-5186f087121e.png)
## 在某个时刻,从服务器中获取数据,并且把新的数据重新赋值给页面中的div
```js
import {h,init} from 'snabbdom'
// 1. 输出hello world
// 返回值 patch函数 作用对比两个vnode的差异更新到真实DOM
let patch=init([])
let vNode=h('div#container.cls','Hello World')
// 将来要替换app里面到内容
let app=document.querySelector('#app')
// patch函数, 第一个参数可以是DOM,内部会把DOM元素转换为VNode
// 第二个参数 VNode
// 返回值 VNode
let oldVNode =patch(app,vNode)
// 在某个时刻,从服务器中获取数据,并且把新的数据Hello Snabbdom重新赋值给页面中的div
vNode=h('div','Hello Snabbdom')
patch(oldVNode,vNode)
import {h,init} from 'snabbdom'
// 1. 在页面中的div放置子元素h1,p
// 返回值 patch函数 作用对比两个vnode的差异更新到真实DOM
let patch=init([])
let vNode=h('div#container',[
h('h1','Hello Snabbdom'),
h('p','这是一个P标签')
])
// 将来要替换app里面到内容
let app=document.querySelector('#app')
// patch函数, 第一个参数可以是DOM,内部会把DOM元素转换为VNode
// 第二个参数 VNode
// 返回值 VNode
let oldVNode =patch(app,vNode)
// // 在某个时刻,从服务器中获取数据,两秒钟后,h1,p替换,重新赋值给页面中的div
setTimeout(()=>{
console.log(1)
vNode=h('div#contaiiner',[
h('h1','Hello world'),
h('p','Hello p')
])
// 1. 更新DOM
// patch(oldVNode,vNode)
// 2. 清空DOM 用注释标签代替
patch(oldVNode,h('!'))
},2000)
class
sel
选择器props
attributes
dataset
style
eventlisteners
步骤
import {init, h} from 'snabbdom'
// 1 导入模块
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
// 2 注册模块
let patch = init([
style,
eventlisteners
])
// 3 使用h()函数的第二个参数传入模块需要的数据(对象) let vNode = h('button', { style: { backgroundColor: 'red' }, on: { click: eventHandler } }, [ h('button','按钮+1') ]) let num=0 function eventHandler() { console.log( '当前数字', num++
)
}
let app = document.querySelector('#app')
let oldVNode = patch(app, vNode)
Virtual DOM 概述
什么是虚拟DOM
(template)模板引擎
,但是模板引擎没有解决跟踪状态变化的问题,于是虚拟DOM出现了diff
的更新DOM虚拟DOM的作用和虚拟DOM库
虚拟DOM的作用
虚拟DOM库——Snabbdom