虚拟dom
随着mvvm框架的应用,react,vue都在用。
首先要理解什么是虚拟dom,为什么要用虚拟dom,虚拟dom前身是什么。跟jquery比的好处是什么。
例如有个表格
name | age | address |
---|---|---|
张三 | 20 | 北京 |
李四 | 21 | 上海 |
王五 | 22 | 广州 |
我们用jquery的话,想要改变里面的数值。看下面代码
<div id="container"></div>
<button id="btn-change">change</button>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script type="text/javascript">
var data = [
{
name: '张三',
age: '20',
address: '北京'
},
{
name: '李四',
age: '21',
address: '上海'
},
{
name: '王五',
age: '22',
address: '广州'
}
]
//渲染函数
function render(data){
var $container=$('#container')
$container.html('')
var $table=$('<table>')
$table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
data.forEach(item => {
$table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td>/tr>'))
});
$container.append($table)
}
$('#btn-change').click(function(){
data[1].age=30
data[2].address='aaaa'
render(data)
})
//页面加载完立刻执行
render(data)
</script>
以上效果是可以实现,但可以发现,我们点击按钮修改是整个表格的数据,就操作dom来讲,在js里面比较耗费性能。当当当~~vdom要出场了,先讲下snabbdom。看代码
源码:
https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom.js
patch函数
其实snabbdom主要函数是h patch
看我自己写的代码应该能明白h跟patch是用来干嘛的
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.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-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-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
<script type="text/javascript">
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',{},'item1'),
h('li.item',{},'item2'),
])
patch(container,vnode)
document.getElementById('btn-change').addEventListener('click',function(){
var newVnode=h('ul#list',{},[
h('li.item',{},'item1'),
h('li.item',{},'itemB'),
h('li.item',{},'item3'),
])
patch(vnode,newVnode)
})
</script>