1.介紹一下vdom?
- virtual dom， 虛擬DOM
- 使用JS來模擬DOM結構
- DOM變化的對比，放在JS層來做（圖靈完備語言），提高效率
- DOM操作非常昂貴（消耗性能）
2.Snabbdom的使用
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)
// 修改DOM內容
document.getElementById('btn-change').addEventListener('click', function () {
// 生成newVnode
var newVnode = h('ul#list', {}, [
h('li.item', {}, 'Item 1'),
// DOM節點中不同的地方
h('li.item', {}, 'Item B'),
h('li.item', {}, 'Item 3'),
]);
patch(vnode, newVnode)
})
[!NOTE]
核心API總結：
- h('<標簽名稱>', { 屬性 }, [子元素])
- h('<標簽名>', {屬性}， ‘...’)
- patch(container, vnode)
- patch(vnode, newNode)
3.介紹一下diff演算法?
3.1 Diff演算法是什么
- Linux中： diff 檔案1.txt 檔案2.txt
- Git中： git diff
- 在線比對工具
3.2 去繁就簡
- diff演算法實作非常復雜，實作難度很大，原始碼量很大
- 去繁就簡，講明白核心流程，不關心細節（非常高效的手段）
- 面試官也大部分不清楚細節，但是很關系核心流程的實作
3.3 VDOM為何使用diff演算法？
- DOM操作是昂貴的，因此要盡量減少DOM的操作
- 找出本次DOM必須更新的節點來更新，其他的不更新
- 這個找出的程序，就需要使用diff演算法（找出兩個虛擬DOM的差異）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169024.html
標籤：JavaScript
上一篇：JS中使用RSA加密資訊