Web组件构建库-Lit

446次阅读  |  发布于2年以前

认识Lit

抽象与封装

在《你真的了解Web Component吗[1]》的分享中，我们在介绍web组件前，从理解框架和职责范围的出发点与角度，探究了框架存在和发展的意义及目标，了解到了框架可以使快速开发和基础性能之间达成平衡，进而让开发者的开发体验得到较大的提升。

而一个框架的组成，离不开优秀的设计思想，和对这些设计思想的最终实现。实现的整个过程，其实就是一个抽象与封装的过程。但是这个过程并非是框架独属的，我们可以回忆一下，日常的开发中，可以对某些频繁、重复使用的逻辑进行函数式封装；可以将某个到处使用的模版进行组件式封装；甚至我们会引用一些高质量的库去支持开发，而这些库，也是一个抽象与封装的结果。既然抽象与封装应用如此广泛，那么web component的创建与使用是不是也可以形成一个抽象与封装的产物呢？

Lit的介绍

Lit是一个轻量的库，用来快速构建web组件。其核心是LitElement基类，可以提供响应式状态、作用域样式以及高效灵活的模版系统。尽管它也是一个基于原生web组件而封装的库，但它依然保留了web组件的所有特性。不必依赖框架便可以实现组件化，并且它的使用不受框架的制约，甚至可以没有框架。

基本特点

Lit的应用及基本原理

Demo示例

暂时无法在文档外展示此内容

基本组成及应用

基类

基类(LitElement)是lit最核心的组成，它继承了原生的HTMLElement类，并在此基础上进行了丰富的扩展。包括响应式状态、生命周期以及一些诸如控制器和混入等高级用法的提供。

装饰器

可以理解为一些语法糖，用于修改类、类方法及属性的特殊函数。

window.customElements.define('my-element')。
element')。<br></br>
dom.addEventListener(eventName,func,{capture: true，passive：true，once：true})。

  constructor() {

    super();

    this.test = 'Somebody'; 

  }



  static get properties() {

    return {

      test: {type: String},

    }

  }

options是一个配置对象，其中包含：

constructor() {

    super();

    this._active = false;

  }



  static get properties() {

    return {

      _active: {state: true}

    }

  }

options是一个配置对象，其中包含：

document.querySelector('todo-list');

document.querySelectorAll('todo-lists');

html模版

我们来看这样一段关于html模版的代码

。。。

  render() {

    if(this.listItems.filter(item => !item.completed).length === 0) {

      return html`<p>anything was done!</p>`;

    }

    return html`

      <ul>

        ${this.listItems.map((item) => html`

          <li

              class=${item.completed ? 'completed' : ''}

              @click=${() => this.toggleCompleted(item)}>

            ${item.text}

          </li>`,

  )}

      </ul>

    `;

  }

  。。。

可以看到Lit的html渲染是在render函数中进行的。通过html方法和模版字符串的结合，实现渲染。并且语法类似jsx/tsx。可以直接在render函数和html模版中写js逻辑。非常的灵活与方便。

样式

//只有一组style

import {customElement, css} from 'lit-element';

@customElement('my-element')

export class MyElement extends LitElement {

  static styles = css`

    p {

      color: green;

    }

  `;

  。。。

}



//多组style

import {css} from 'lit-element';

static styles = [ 

    css`h1 {

      color: green;

    } `, 

    css`h2 {

      color: red;

    }`

];



//引入样式文件

import {css，unsafeCSS} from 'lit-element';

import style from './my-elements.less';//需要使用编译工具编译后倒入

  static styles = [

    css`:host {

    width:500px;

  }`,

    css`${unsafeCSS(style)}`

    ];

这就意味着你可以在某个ts文件中声明一组样式，然后引入到多个文件中使用：

//样式中使用表达式

static get styles() {

  const mainColor = 'red';

  return css`

    div { color: ${unsafeCSS(mainColor)} }

  `;

}

可以想vue或react中一样，动态的使用class和style。

import {customElement, property，LitElement, html, css} from 'lit-element';

import {classMap} from 'lit/directives/class-map.js';

import {styleMap} from 'lit/directives/style-map.js';



@customElement('my-element')

export class MyElement extends LitElement {

  @property()

  classes = { someclass: true, anotherclass: true };

  @property()

  styles = { color: 'lightgreen', fontFamily: 'Roboto' };

  protected render() {

    return html`

      <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>

        content

      </div>

    `;

  }

}

slot插槽

关于插槽的概念理解，其实可以直接类比vue中的slot插槽，因为lit本身是一个纯js库，所以lit的插槽完全是来源于原生web component技术所提供的规范，而vue的slot功能，参考来源正是原生的slot。

  <my-element test-word="test-word" testWord="testWord">

    <div>我是子元素</div>

  </my-element>

  //html

    <my-element test-word="test-word" testWord="testWord">

    <div>我是子元素1</div>

    <div>我是子元素2</div>

    <div>我是子元素3</div>

  </my-element>

  //ts

  render() {

    return html`

      <slot></slot>

    `;

  }

  //html

  <my-element test-word="test-word" testWord="testWord">

    <div slot="child1">我是子元素1</div>

    <div>我是子元素2</div>

    <div>我是子元素3</div>

  </my-element>



  //ts

    render() {

    return html`

      <slot name="child1"></slot>

    `;

  }

可以通过在slot元素上面绑定slotchange事件，来获取slot被插入或删除的时机，以及对应的事件对象。

  //html

  <my-element test-word="test-word" testWord="testWord">

    <div slot="child1">我是子元素1</div>

  </my-element>

  //ts



  handleSlotchange(e:Event) {

    console.log(e);

  }



  render() {

    return html`

      <slot name="child1"  @slotchange=${this.handleSlotchange}></slot>

    `;

  }

}

事件通信

在Lit中，也是内置了事件通信的逻辑。事件通信主要是两部分组成，注册监听和调度触发。

。。。

  private addList(e: CustomEvent){

    this.listItems = [...this.listItems,{

      text:e.detail,

      completed: false,

    } as ToDoItem];

    this.todoList.requestUpdate();

  }

。。。

  render() {

    return html`

    。。。

      <controls-area @addList=${this.addList}></controls-area>

    。。。

    `;

  }

  。。。
...

  private sendText(){

    const options = {

      detail: this.inputText,

    };

    this.dispatchEvent(new CustomEvent('addList', options));

    this.inputText = '';

  }

...

生命周期及更新流程

Lit采用批量更新的方式来提高性能和效率。一次设置多个属性只会触发一次更新，然后在微任务定时异步中执行。

状态更新时，只渲染 DOM 中发生改变的部分。由于 Lit 只解析并创建一次静态 HTML ，并且后续只更新表达式中更改的值，所以更新非常高效。

lit中的生命周期分为两类，一类是原生组件化提供的生命周期，一般不需要开发者主动去使用。另一类是lit的状态更新提供的生命周期，如下：

执行了requestUpdateInternal方法，并返回了更新结果的promise。requestUpdateInternal方法中主要进行了两个操作，一个是将更新的属性存在一个map中，以备后续使用。另一个是进行一些比较判断，决定是否调用_enqueueUpdate方法。而_enqueueUpdate调用了performUpdate方法。

performUpdate方法中执行了shouldUpdate，shouldUpdate返回false则中断，若返回true，则依次执行willUpdate、update、firstUpdated和updated。

ts中不存在willUpdate，是js的polyfill-support 的覆盖点，源码中函数内容为空。

主要执行了_propertyToAttribute函数，将property向attribute映射，覆盖render渲染出来的html。

render函数只执行一次,用来解析并创建静态 HTML。

是一个覆盖点，源码中为空。元素首次更新完毕触发，只执行一次。此方法中设置属性，会在本次更新完毕后再次触发更新。

是一个覆盖点，源码中为空。元素每次更新完毕触发。此方法中设置属性，会在本次更新完毕后再次触发更新。

是函数_getUpdateComplete的返回值，本质上是一个promise对象，表示当前更新全部完毕。

 protected _getUpdateComplete() {

    return this.getUpdateComplete();

  }

 protected getUpdateComplete() {

    return this._updatePromise;

 }

高阶应用

指令

如上面的动态样式一样，classMap和styleMap属于应用在html模版中的指令。开发者可以直接使用内置指令进行开发；也可以根据自己的需要，进行自定义指令的开发。

自定义指令的功能很强大，尽管在使用中看起来只是调用了一个函数，但实际上，内部包含了自己的生命周期(constructor、render、update)，不仅如此，指令还能获得与它关联的底层 DOM 的特殊访问。

这里我们实现一个简单的指令：

//自定义指令的文件

import {Directive, directive} from 'lit/directive.js';



class FormatStr extends Directive {

  render(test:string) {

    return `${test}!!!`;

  }

}

export const formatStr = directive(FormatStr);
//使用自定义指令的文件

import {formatStr} from '../directives/formatStr';

import {html} from 'lit';

。。。

render(){

    html`<div>${formatStr('hellow')}</div>`

}

。。。

混和

混合本身的作用，是为了在类之间共享代码。而类混合，本质上是属于原生类的一种行为，由于Lit是一个原生的js库，所以它可以拿来直接使用。目的也很简单，为了封装抽象。在Lit中使用类混合，我们可以在复用代码的同时，做一些定制化的扩展。下面我们实现一个混合。

这里我们声明一个混合类的方法，使得调用这个函数后生成的类，拥有公共的方法，就是在组件连接主文档后进行一次打印，打印的结果，是当前组件自己的name属性。

/* eslint-disable no-unused-vars */

import {LitElement} from 'lit';



type Constructor<T = {}> = new (...args: any[]) => T;



export const TestMixin = <S extends Constructor<LitElement>>(superClass: S) => {

  class MyMixinClass extends superClass {

    constructor(...args: any[]) {

      super();

      this.name = 'TestMixin';

    }

    name:string;

    connectedCallback() {

      super.connectedCallback();

      setTimeout(()=>{

        console.log(this.name);

      },3000)

    }

  }

  return MyMixinClass as S;

}

这里是使用的文件：

//TodoList.ts

export class TodoList extends TestMixin(LitElement) {

  constructor() {

    super();

    this.name = 'TodoList';

  }

  name:string;

  }



 //ControlsArea.ts

 export class ControlsArea extends TestMixin(LitElement) {

  constructor() {

    super();

    this.name = 'ControlsArea';

  }

  name:string;

  }

这里是打印结果，分别会在连接到主文档3s后打印各自的name。

控制器

控制器是Lit中，又一个封装抽象的概念，它区别于组件和混合。它没有视图，也不封装视图；它拥有同宿主绑定的生命周期，但是不存在状态更新的机制。相对于混合的代码共用，它更像是实现功能共用。

与宿主交互的相关方法：

有四个可以与宿主绑定的生命周期：

实现一个简单的控制器：

//声明控制器

import {ReactiveControllerHost} from 'lit';



export class MouseController {

  private host: ReactiveControllerHost;

  pos = {x: 0, y: 0};



  _onMouseMove = ({clientX, clientY}: MouseEvent) => {

    this.pos = {x: clientX, y: clientY};

    this.host.requestUpdate();

  };



  constructor(host: ReactiveControllerHost) {

    this.host = host;

    host.addController(this);

  }



  hostConnected() {

    window.addEventListener('mousemove', this._onMouseMove);

  }



  hostDisconnected() {

    window.removeEventListener('mousemove', this._onMouseMove);

  }

}



//使用控制器

import {MouseController} from '../controller/mouseController';

export class ControlsArea extends TestMixin(LitElement) {

  constructor() {

    super();

  }



  private mouse = new MouseController(this);



  render() {

    return html`

    <pre>

        x: ${this.mouse.pos.x as number}

        y: ${this.mouse.pos.y as number}

      </pre>

    `;

  }

}

生态相关

Github star issue数量（未解决/总数） npm下载量 被依赖数量 维护团队 开源协议 文档 年龄 背书公司
8.7k 171/2084 lit团队 BSD-3-Clause https://lit.dev/ 4 无

路由

Lit官方并未提供路由，但是社区提供了：

lit-element-router传送门：https://www.npmjs.com/package/lit-element-router

共享状态管理

Lit官方并未提供共享状态管理，但是社区提供了：

lit-element-state传送门：https://www.npmjs.com/package/lit-element-state

开发插件(vscode)

语法高亮（lit-plugin）

高亮前 高亮后

代码片段（LitElement Snippet）

js下代码片段提示 ts下代码片段提示

SSR

支持ssr，并且官方提供了对应的工具包：

@lit-labs/ssr ：https://www.npmjs.com/package/@lit-labs/ssr

github地址

https://github.com/lit/lit/

测试工具

lit是标准的js工具库，可以使用任何js测试工具。

https://lit.dev/docs/tools/testing/

依赖Lit的组织及项目

同类框架/库比较

可以看到lit的下载量遥遥领先。当然，这并不意味着lit就是最好的，毕竟不同的场景，有不同的选型。但至少可以确定一点，lit的应用场景相对是比较多的，这也是下载量不断飙升的原因。

依赖Lit的开源组件库

名称 官网 github 开源协议 背书公司
Spectrum Web Components https://opensource.adobe.com/spectrum-web-components/ https://github.com/adobe/spectrum-web-components Apache License adobe
Momentum UI Web Components https://momentum-design.github.io/momentum-ui/?path=/story/components-accordion--accordion https://github.com/momentum-design/momentum-ui/tree/master/web-components MIT cisco
material-components https://github.com/material-components/material-components-web#readme https://github.com/material-components/material-web Apache License 2.0 google
frontend ui https://github.com/home-assistant/frontend/blob/dev/README.md https://github.com/home-assistant/frontend Apache License home-assistant
carbon-web-components https://web-components.carbondesignsystem.com/ https://github.com/carbon-design-system/carbon-web-components Apache License 2.0 IBM
Lion Web Components https://lion-web.netlify.app/ https://github.com/ing-bank/lion MIT License ING
PWA Starter https://github.com/pwa-builder/pwa-starter/blob/main/README.md https://github.com/pwa-builder/pwa-starter MIT License microsoft

其他相关参考

lit项目所有者：https://github.com/orgs/lit/people =》https://github.com/e111077

lit项目被依赖关系：https://github.com/lit/lit/network/dependents

Lit-element npm包地址：https://www.npmjs.com/package/lit-element

框架对比网站：https://www.npmtrends.com/lit-element-vs-svelte-vs-@stencil/core

参考资料

[1] 你真的了解Web Component吗: https://juejin.cn/post/7010580819895844878

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8