本文為拉勾網大前端高薪訓練營第一期筆記
虛擬dom就是js物件描述dom物件，成本比真實dom低很多，因為真實dom的屬性特別多
以snabbdom為例，匯入時需要這樣寫
import from 'snabbdom'md snabbdom-demo
cd snabbdom-demo
yarn init -y
yarn add parcel-bundler
scripts:
dev: parcel index.html --open
build: parcel build index.html
import from 'snabbdom'
// 1. hello world
// 引數：陣列，模組
// 返回值：patch函式，作用對比兩個vnode的差異更新到真實dom
let patch = init()
// 第乙個引數：標籤+選擇器
// 第二個引數：如果是字串的話就是標籤中的內容
let vnode = h('div#container.cls', ,
create (emptyvnode, vnode)
}}, 'hello world')
// 第乙個引數：可以是dom元素，內部會把dom元素轉換成vnode
// 第二個引數：vnode
// 返回值：vnde
//此時頁面上是hello world
vnode = h('div', 'hello snabbdom')
patch(oldvnode, vnode)
//此時頁面上是hello snabbdom，對比了oldvnode和vnode的差異，然後更新
// 2. div中放置子元素 h1,p
import from 'snabbdom'
let patch = init()
let vnode = h('div#container', [
h('h1', 'hello snabbdom'),
h('p', '這是乙個p標籤')
])settimeout(() => , 2000);
props
class
dataset
eventlisteners
style
以style和eventlisteners為例
import from 'snabbdom'
// 1. 匯入模組
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
// 2. 註冊模組
let patch = init([
style,
eventlisteners
])// 3. 使用 h() 函式的第二個引數傳入模組需要的資料（物件）
let vnode = h('div', ,
on:
}, [
h('h1', 'hello snabbdom'),
h('p', '這是p標籤')
對比節點時是對比sel key，如果沒有key，就認為兩個li是一樣的，此時直接更新text
運用diff演算法的Virtual DOM
百科解釋 把樹形結構按照層級分解，只比較同級元素。給列表結構的每個單元新增唯一的 key 屬性，方便比較。傳統的diff演算法根據大o推導法 具體演算法的問題不做細解 的時間複雜度為o n 3 在正常傳統diff演算法的大o推導法算出來的時間複雜度不適和現有的要求。在此時有乙個叫virtual do...
8 14 免費的午餐 2692
為了增加顧客,sally的店鋪決定提供免費午餐,頓時門庭若市,但是不久sally的原材料不足了 因此sally決定公布一項決定 凡是來本店吃免費午餐的,一天吃能吃一次,吃的數量必須比上一次吃的少,點的必須在上一次後面，且免費午餐將只有n個種類任君選擇,為了能吃到最多的免費午餐,你將如何安排每日吃的數...
GDOI2018模擬8 14 神奇的矩陣
輸出一行表示答案 3 3 2 1 2 3 4 5 6 7 8 9 真是神奇的一道題 為了避免絕對值的影響，讓每個數字從小到大加入，對於每個數字考慮貢獻 設f i j 表示以 i,j 為左上角的k k的矩陣中有數的個數 那麼乙個數在加入時，所有包括它的k k矩陣的f的和，就是這個數對答案做的正貢獻 那...