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

内部机制

bandicam 2019-03-03 16-01-23-195.jpg

我们看一下上面的模版中${}表达式，这些表达式都将被{{}}所代替。

bandicam 2019-03-03 16-01-29-658.jpg

然后将字符串生成一个 template。

bandicam 2019-03-03 16-01-36-086.jpg

然后我们可以在 template 找到可变的部分。记住这些占位符，标记为 Parts

bandicam 2019-03-03 16-01-43-996.jpg
接下来移除占位符{{}},创建元素。
bandicam 2019-03-03 16-02-00-947.jpg

因为我们记忆了 parts

bandicam 2019-03-03 16-02-07-875.jpg

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）引用。

lit001.JPG

其实模板在是在两次调用时是共享的，我们共享 Template 以达到节省资源提供效率的效果

lit002.JPG

对静态和动态节点区分

我们的模板会生产一个 dom 树，然后将 dom 树接入到页面的某个节点下。在渲染之后并不意味我们数据是一层不变。部分数据会进行更新。随意根据数据是否更新我们 dom 树中节点划分为两类，静态的和动态的。在下面的 dom 树中，用蓝色表示静态的节点而用绿色表示动态的节点。

lit003.JPG lit005.JPG

当数据发生改变我们更新节点相对位置。我们是如何有效更新数据到节点上的，在开始讲解 lit-html 之前我们先看一看 polymer 和 VDOM（虚拟dom）是如何实现动态更新数据到节点。

• polymer 是通过对节点和数据建立关系来实现的，当数据发生改变根据这个关系来更新数据。
• VDOM 是会遍历整个虚拟 dom 来查找发生变化节点后进行更新的

lit009.JPG

lit-html 是介于两者之前，首选通过表达式来实现，根据表达式仅对动态节点进行遍历来检查变化来更新数据到节点上。所以 lit-html 不会遍历整个 dom 树来更新数据，也是 lit-html 优于 VDOm 原因