一个轻量的模版引擎 lit-html

什么是lit-html

lit-html是谷歌开发的一个模板引擎，lit-html 的出现就尽可能的规避了之前模板引擎的问题，通过现代浏览器原生的能力来构建模板。lit/packages/lit-html at main · lit/lit · GitHub

lit-html利用es6的模板字符串来进行模板的书写，利用浏览器的原生的能力进行模板渲染，相较于之前的模板引擎理论上更加高效

lit-html使用

lit-html 提供了两个基本函数 html 和 render 分别负责模版的解析和渲染

import {html, render} from 'lit-html';

// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;

// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);

// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);