上面一段是snabbdom给出的一个示例，其中 h方法 是创建一个vnode，即虚拟节点，定义一个div，有一个id名container，两个类名two和classes，绑定一个click事件someFn方法，后面跟着一个数组，数组中有3个元素：
第一个用h方法返回的，一个span，有font-weight样式，和文本内容This is bold
第二个元素就是一个文本字符串：and this is just normal text
第三个元素是一个a元素，有一个属性href链接，后面是a标签文本
第一个patch方法是将vnode放入到空的container中
newVnode是返回一个新的node，然后第二个patch是将前后两个node进行一个对比，找出区别，只更新需要改动的内容，其他不更新的内容不更新，这样做到尽可能少的操作DOM。
h方法抽离出来如下：
用h方法去具体实现文章开头的那个简单dom节点
// 真实的HTML DOM结构<ul id='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
</ul>
// JS模拟这个DOM{
tag: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 1']
},
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 2']
}
]
}// 用h方法表示这个dom节点：var vnode = h('ul#list', {}, [
h('li.item'， {}， 'Item 1'),
h('li.item'， {}， 'Item 2'),
])用virtual dom写法改写jquery的那个demo：
<div id="container"></div><button id="change-btn">CHANGE</button><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/snabbdom/0.7.1/h.min.js"></script><script>
const snabbdom = window.snabbdom // 定义关键函数 patch
const patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
// 定义关键函数 h
const h = snabbdom.h
const data = [
{ name: '彭一', age: '18', height: '180cm', gender: '男',
},
{ name: '彭二', age: '19', height: '185cm', gender: '男',
},
{ name: '彭三', age: '20', height: '168cm', gender: '女',
},
]
// 把表头放入data数组的第一项
data.unshift({ name: '姓名', age: '年龄', height: '身高', gender: '性别'
})
const container = document.getElementById('container') const changeBtn = document.getElementById('change-btn')
let vnode // 渲染函数
let render = (data) => { const newVnode = h('table', {}, data.map((item) => { let tds = [] let i for (i in item) { // hasOwnProperty检测某个对象是否拥有某个属性，可以有效避免扩展本地原型而引起的错误
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
vnode = newVnode
}
// 初次渲染
render(data)
changeBtn.addEventListener('click', () => {
data[1].age = 30
data[2].height = '178cm'
// 再次渲染data
render(data)
}) </script>2、核心API
h('<标签名>', {属性}, [子元素])
h('<标签名>', {属性}, '文本字符串')
初次渲染：patch(container, vnode)
再次修改后DOM渲染：patch(vnode, newVnode)
三、diff算法
1、什么是diff算法
日常开发中都会用到diff，最普通的linux基础命令diff两个文件，找出不同，还有就是git命令比对前后修改内容
// 两个对象分别放在两个json中// data1.json{ "name": "pengxiaohua", "age": 18, "height": 184}// data2.json{ "name": "xiaohua", "age": 18, "height": 183}// 控制台输入 diff data1.json data2.json，得出：2c2
< "name": "pengxiaohua",
---
> "name": "xiaohua",4c4
< "height": 184---
> "height": 183同时在git命令中的git diff XXXX 也可以用来比对文件修改前后的差别
virtual dom为何用diff算法？
DOM操作是昂贵的，应该尽可能减少DOM操作
找出本次必须更新的节点，其他的不用更新
这个“找出”的过程，就需要diff算法
一句话，virtual dom中应用diff算法是为了找出需要更新的节点
2、diff算法实现流程
diff的实现过程就是 patch(container, vnode) 和 - patch(vnode, newVnode)
diff的实现的核心就是 createElement 和 updateChildren
文章开头可以看到，用JS去模拟一个简单的DOM节点
// 真实的HTML DOM结构<ul id='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 2</li>
</ul>
// JS模拟这个DOM{
tag: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 1']
},
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 2']
}
]
}那么模拟完了之后，怎么将模拟的JS进行转化为真实的DOM的呢？这个转化过程可以用这样一个 createElement 函数来描述：
function createElement (vnode) { var tag = vnode.tag var attrs = vnode.attrs || {} var children = vnode.children || [] if(!tag) { return null
}
// 创建真实的 DOM 元素
var ele = document.createElement(tag) // 属性
var attrName for (attrName in attrs) { if (attrs.hasOwnProperty(attrName)) {
elem.setAttribute(attrName, attrs[attrName])
}
}
// 子元素
children.forEach(function (childVnode) { // 递归调用 createElement 创建子元素
elem.appendChild(createElement(childVnode))
}) // 返回真实的 DOM 元素
return elem
}当我们修改子节点，如下操作后，就要用到 patch(vnode, newVnode)
// 真实的HTML DOM结构
<ul id='list'>
<li class='item'>Item 1</li>
<li class='item'>Item 22</li>
<li class='item'>Item 3</li>
</ul>
// JS模拟这个DOM
{
tag: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 1']
},
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 22']
},
{
tag: 'li',
attrs: {className: 'item'},
children: ['Item 3']
}
]
}这个转化过程，其实就是遍历子节点，然后找出区别，如下面的方法 updateChildren:
function updateChildren (vnode, newVnode) { var children = vnode.children || [] var newChildren = newVnode.children || []
// 遍历现有的 children
children.forEach(function (child, index) { var newChild = newChildren[index] if (newChild == null) { return
} if (child.tag === newChildren.tag) { // 两者 tag 一样
updateChildren(child, newChild)
} else { // 两者 tag 不一样
replaceNode(child, newChild)
}
})
}function replaceNode (vnode, newVnode) { // 真实的DOM节点
var elem = vnode.elem var newElem = createElement(newVnode)
// 替换(此处代码太过复杂，略省无数字)
... ...
}3、diff算法做了哪些事：
节点的新增和删除
节点重新排序
节点属性、样式、事件绑定
如何极致压榨性能
... ...
作者：JokerPeng
链接：https://www.jianshu.com/p/6ca5c22439f5
