lit-html 神奇的 JS 模板引擎周下载量超百万！

说到模版语法，之前使用过的大部分模板插件，基本上都是基于字符串拼接封装。而本文说的 lit-html 就有点意思，虽然它的写法很像字符串，但其内部在更新模板时，不会全量更新，而是通过规则进行增量更新，只修改有变化的内容，在渲染速度上那是飞起。

可以简单理解为：lit-html 会给每个变量位置打上标记，在有修改时，直接找到要修改的变量位置进行更新，而其他没修改的静态内容不做任何改动。有兴趣可以去瞅瞅源码，实现原理还是挺巧妙的。

github 链接：点击这里

lit-html

lit-html 是 lit 开发框架的模版引擎，而 lit 是一个用于快速构建 Web Components 的轻量级框架。

安装

1. npm 安装

npm i lit-html

# 如果使用 Web Components 则需要安装 litnpm i lit

导入依赖

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

2. 浏览器端引入

<!-- ESM 引入 -->
<script type="module">
  import { html, render } from 'https://cdn.jsdelivr.net/npm/lit-html@3.3.1/+esm';
</script>

示例

1、最简单用法

<div id="app"></div>
<script type="module">
  import { html, render } from 'https://cdn.jsdelivr.net/npm/lit-html@3.3.1/+esm';

  const container = document.getElementById('app');
  const state = ['apple', 'banana'];

  const template = state => html`
    <h3>程序员学习天地：码云笔记--前端开发测试案例</h3>

    <h4>列表循环：</h4>
    ${state.map(i => html`<div>${i}</div>`)}
  `;

  render(template(state), container);
</script>

效果如下：

截图中渲染后的注释节点，可以理解为一个个的锚点位置，lit-html 更新模版字符串中的变量时就需要依赖于这些注释锚点。

2、使用 setInterval 重复更新变量

<div id="app"></div>
<script type="module">
import { html, render } from 'https://cdn.jsdelivr.net/npm/lit-html@3.3.1/+esm';

const container = document.getElementById('app');
const name = '执行次数'let count = 0;

const template = () => html`
  <h3>程序员学习天地：码云笔记--前端开发测试案例</h3>
  <div>${name}：${count}</div>
`;

render(template(), container);

setInterval(() => {
  count++;
  render(template(), container);
}, 1000);
</script>

效果如下：

从上图我们可以看到程序每次都在执行 render 函数，但更新内容仅是变量部分在更新，其他未改变的内容不会重新渲染！

3、结合 lit 框架封装组件

注意：这里需要使用 lit 框架了，可前往官方文档学习更多知识！！

<div id="app">
    <!-- 传入的属性值将会覆盖默认值 -->
    <test-web-component name="码云笔记" />
</div>
<script type="module">
    import {html, css, LitElement} from 'https://cdn.jsdelivr.net/npm/lit@3.3.1/+esm';
    // 使用指令
    import {createRef, ref} from 'https://cdn.jsdelivr.net/npm/lit-html@3.3.1/directives/ref.js';

    export class SimpleGreeting extends LitElement {
        // 设置样式
        static styles = css`p { color: blue }`;

        // 类似 Vue ref  
        inputRef = createRef();

        static properties = {
            name: {type: String},
            count: {type: Number},
            result: {type: String},
            inputRef: {state: true}
        };

        constructor() {
            super();
            this.count = 0;
            // 默认值，会被组件的 name 属性覆盖    this.name = '默认值';
        }

        render() {
            // 动态属性必须使用 .value 语法
            return html`
            <input type="text" ${ref(this.inputRef)} .value="${this.name}" @input=${this._input}>
            <div>${this.result}</div>  `;
        }

        _input() {
            // 动态属性必须使用 .value 语法
            this.name = this.inputRef?.value?.value;    
            // 动态属性必须使用 .value 语法
            this.result = html`Hello, ${this.name}`;
        }
    }
    customElements.define('test-web-component', SimpleGreeting);
</script>

效果如下：

TypeScript 中可使用 装饰器 语法：

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('test-web-component')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = '默认值';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

其他高阶用法请参考官方文档：比如说 插槽、自定义指令、声明周期、控制器、shadowDOM 等等。

结语

lit 这个框架，extends 语法有点像 React，事件绑定 @xxx 语法又有点像 Vue，所以对于大家上手还是不难的。

实际应用时如果只是想使用模板，就直接使用 lit-html 就行了，如果要体验完整的 Web Components 就直接上 lit 框架。

当然它也有不足的地方，就是 lit 不再支持 script 直接引入，需要使用 ESM 模块，这对浏览器兼容性有要求，在使用中需注意。

以上关于lit-html 神奇的 JS 模板引擎周下载量超百万！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。