snabbdom实现vdom的库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
<script>
var snabbdom=window.snabbdom;
//定义patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]);
//定义h
var h=snabbdom.h;
//生成vnode
var vnode=h('ul#list',{},[
h('li.item',{},'Item 1'),
h('li.item',{},'Item 2')
])
patch(container,vnode)
document.getElementById('btn-change').addEventListener('click',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)
})
</script>
</body>
</html>
总结：虚拟dom实现了根据事件所需找到对应节点去变更，减少重新渲染所有节点的次数，减少dom操作次数，提高页面渲染效率
核心函数
h('<标签名>',{...属性名},[...子元素])
子元素=h('<标签名>',{...属性名}，'节点文本')
patch(container,vnode)初始化节点初次渲染
path(vnode,newVnode)需要变更的节点，原来的节点与新节点对比，重新渲染。
网友评论