javascript 下一代模版 — lit html (中）

摘要： 內部機制 bandicam 2019-03-03 16-01-23-195.jpg 我們看一下上面的模版中${}表示式，這些表示式都將被{{}}所代替。 bandicam 2019-03-03 16-01-2...

內部機制

我們看一下上面的模版中${}表示式，這些表示式都將被{{}}所代替。

然後將字串生成一個 template。

然後我們可以在 template 找到可變的部分。記住這些佔位符，標記為 Parts

接下來移除佔位符{{}},建立元素。

因為我們記憶了 parts

template 語法

這裡給大家分析一下我們的 html 之所以快的原因，從兩個方面進行改善提供模板速度。

對模板進行快取

之前提及到 html 是一個純函式，接受模板字串和資料，我們會對相同的模板進行快取，區別不去額外地建立相同的模板。

export function html(strings,...values){
let template = templateCache.get(strings);
}

我們看一看下面示例，通過示例給大家解釋。建立模板

let sayHi = (name) => html`
<h1>hello ${name}</h1>
`
然後我們兩次呼叫這個模板，之前以及到呼叫模板sayHi 會返回一個 TemplateResult 的物件他具有模板（template） 和資料（data）引用。

其實模板在是在兩次呼叫時是共享的，我們共享 Template 以達到節省資源提供效率的效果

對靜態和動態節點區分

我們的模板會生產一個 dom 樹，然後將 dom 樹接入到頁面的某個節點下。在渲染之後並不意味我們資料是一層不變。部分資料會進行更新。隨意根據資料是否更新我們 dom 樹中節點劃分為兩類，靜態的和動態的。在下面的 dom 樹中，用藍色表示靜態的節點而用綠色表示動態的節點。

當資料發生改變我們更新節點相對位置。我們是如何有效更新資料到節點上的，在開始講解 lit-html 之前我們先看一看 polymer 和 VDOM（虛擬dom）是如何實現動態更新資料到節點。

• polymer 是通過對節點和資料建立關係來實現的，當資料發生改變根據這個關係來更新資料。
• VDOM 是會遍歷整個虛擬 dom 來查詢發生變化節點後進行更新的

lit-html 是介於兩者之前，首選通過表示式來實現，根據表示式僅對動態節點進行遍歷來檢查變化來更新資料到節點上。所以 lit-html 不會遍歷整個 dom 樹來更新資料，也是 lit-html 優於 VDOm 原因