JS问题整理与思考--virtual DOM核心分析第二篇,snabbdom使用

snabbdom 的使用

h方法:定义dom结构,包括节点/属性/子元素

h('div', {style: {fontWeight: 'bold'}}, [])

patch方法:第一次,patch(container, vnode);第一个参数是真实节点,第二个参数是创建的vdome

patch(vnode, newVnode); 第一个参数是旧的vdom,第二个是新的vdom。对两个vdom进行diff算法比较,并渲染差异部分

var snabbdom = window.snabbdom

// 定义patch
var patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
])

// 定义 h
var h = snabbdom.h

var container = document.getElementById('container')

// 生成vnode
var vnode = h('ul#list',{},[
    h('li.item',{},'item 1'),
    h('li.item',{},'item 2 ')
])

patch(container, vnode)

document.getElementById('button').onclick = function () {
    // 生成 newVnode
    var newVnode = h('ul#list',{},[
        h('li.item',{},'item 1'),
        h('li.item',{},'item B '),
        h('li.item',{},'item 3 ')
    ])
    patch(vnode, newVnode)
}

随机浏览