vdom
2018-09-09 本文已影响102人
阿昕_
vdom是什么
- virtual dom ， 虚拟 DOM
- 用 js 模拟DOM结构
为什么会存在vdom
- DOM操作非常‘昂贵’
- DOM变化的对比，放在 js 层来做（图灵完备语言），提高效率
- 提高重绘性能
vdom如何应用
- snabbdom
<!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>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
</head>
<body>
<div id="container"></div>
<button id="fresh_btn">更新</button>
<script>
var snabbdom = window.snabbdom
// 定义patch函数
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
// 定义h函数
var h = snabbdom.h
// 原始数据
var data = [
{
name: '张三',
age: 29,
sex: '女'
},
{
name: '李四',
age: 24,
sex: '男'
},
{
name: '王五',
age: 49,
sex: '男'
},
{
name: '赵六',
age: 72,
sex: '女'
}
]
// 放置表头
data.unshift({
name: '姓名',
age: '年龄',
sex: '性别'
})
var container = document.getElementById('container')
// 渲染函数
var vnode
function render(data) {
var newVnode = h('table', {}, data.map(function(item) {
var tds = []
var i
for(i in item) {
if (item.hasOwnProperty(i)) {
tds.push(h('td', {}, item[i]))
}
}
return h('tr', {}, tds)
}))
if (vnode) {
patch(vnode, newVnode)
} else {
patch(container, newVnode)
}
vnode = newVnode
}
// 初次渲染
render(data)
var btn = document.getElementById('fresh_btn')
btn.addEventListener('click', function() {
data[1].age = 20
data[2].sex = '未知'
// re-render
render(data)
})
</script>
</body>
</html>
vdom核心API
- h函数
h('<标签名>', {...属性...}, [...子元素...])
h('<标签名>', {...属性...}, '......')
- patch函数
patch(container, vnode)
patch(vnode,newVnode)
diff算法
- diff算法是Linux的基础命令
- vdom 中应用dif算法是为了找出需要更新的节点
- 实现 patch(container, vnode)和 patch(vnode,newVnode)
- 核心逻辑 createElement 和 updateChildren
