lit-html

将带数据的 HTML 模板字符串渲染成 DOM,没有组件的概念。
和直接渲染的区别是寻找了一种最少更新 DOM 的途径。
// 每次 render 进行对应 node 或者属性的修改
// 一些对 DOM 相同值的操作浏览器不会认为修改,但是 prop 尽管值相同也会被认为修改:
// 有副作用的原生 prop (如 video.srcObject)应该使用 guard 指令

render(html`<h1>${Date.now()}</h1>`, document.body)

`<input
class=${class}
.prop=${prop}
?autofocus
@change=${onChange} // onclick 需要在 window 监听
/>`

渲染列表,优化插入列表项:
repeat(employees, (employee) => employee.id, (employee) =>
html`<li>${employee.familyName}, ${employee.givenName}</li>`)
// https://github.com/Polymer/lit-html/blob/9bdf622e1aaaf7f82ccf9d19989a3bd7c13febba/src/directives/repeat.ts

自己 de 实现:

API 一致,`html` 解析模版,`render` 实例化、挂载和更新 DOM
  1. 解析成 vDOM
  2. 将 vDOM 实例化成 DOM
  3. 根据映射关系设置 attr, prop, listener
  4. 插入 host
  5. 再次调用 `render` 时,判断 host 内容是否是模版的实例
  • 已经是模版实例
  • 模版相同时执行 3
  • 模版不相同则执行 1~4
  • 不是模版实例则执行 1~4

添加一个模版命令,有值渲染值,无值不渲染属性:
!pattern=${pattern}
渲染动态属性:
${attr}=${value}