What is Lit?

日富一日
641 阅读3分钟

博客主要用来总结最近学的一些新东西，也想分享给大家，同时也欢迎大家指正不足之处～

什么是Lit？

刚看到 Lit 的时候，一脸茫然（懵逼），随着对 Lit 的学习，通过下面三个问题可以更好的认识 Lit。

  1. 为什么（Why）：通常我们会看到一些组件库（如：Element），针对不同框架封装了不同的组件。那么问题就是为什么不实现一个通用的组件库呢？

    image-20211031132928156.png

  2. 怎么做（How）：我们要想实现一次开发，多处使用的效果，似乎就是通过最通用、最基础的原生语法。 （先别急，没让你写原生🐶）

  3. 做什么（What）：上面的组件库都用到了框架的特性，如声明式、组件化、模版语法等，大大提高了开发的效率（开发者体验），另一个角度就是原生语法是降低开发的效率的，那还等什么，欢迎 Lit 闪亮登场吧！！！（beng beng beng beng~）

关于 Lit 的一些概念：

  • Lit 组件在浏览器环境中注册成自定义元素来使用。
  • Lit 组件具有渲染方法，在 render 方法中定义模版并渲染（跟 react 像不像）
  • Lit 组件是响应式组件，当组件的状态发生变化时会重新渲染。
  • Lit 支持生命周期。

总的来说，Lit 组件就是一个自定义 HTML 元素。

官网说：Build anything with Lit，可见 owner 对 Lit 有多满意和自信。

举个例子（栗子）

先看效果

屏幕录制2021-10-31 下午4.gif

实现一个头像组件

我们来实现一个跟稀土掘金的头像一样会旋转的Avatar组件，具体看代码和注释：

// 引入Lit的API
import { LitElement, html, css } from "lit";
// 创建 Avatar 组件
class Avatar extends LitElement {
  // 声明响应式的变量
  static properties = {
    url: {},
  };
  constructor() {
    super();
    this.url = "https://i.ibb.co/8M5HTys/default-Avatar.png";
  }
  // 定义模版并渲染
  render() {
    return html`<img class="avatar" src="${this.url}" alt="旋转的小头像" />`;
  }
}
// 为组件添加样式
Avatar.styles = css`
  .avatar {
    width: 5rem;
    height: 5rem;
    margin-right: 2rem;
    border-radius: 50%;
  }
  .avatar:hover {
    animation: 2s cubic-bezier(0.34, 0, 0.84, 1) 10 alternate both rotate;
  }
  @keyframes rotate {
    0%,
    20% {
      transform: rotate(0turn);
    }
​
    80%,
    100% {
      transform: rotate(6turn);
    }
  }
`;
// 将 Avatar 组件注册为一个自定义 html 元素
// 自定义HTML元素的命名规范：必须包括一个连字符（-）
customElements.define("lit-avatar", Avatar);
// 导出组件
export default Avatar;

引入到React

import React, { Component } from "react";
// 引入Avatar组件，注册 lit-avatar 自定义元素
import "./LitComponents/Avatar";
import "./App.css";
​
class App extends Component {
  render() {
    return (
      <div className="App">
        <!-- <lit-avatar />是Avatar组件中自定义的html元素 -->
        <lit-avatar url="./avatar.png" />
        <h3>我是旋转的Lit组件</h3>
      </div>
    );
  }
}
​
export default App;

引入到Vue

<template>
  <div class="App">
    <!-- <lit-avatar />是Avatar组件中自定义的html元素 -->
    <lit-avatar url="./avatar.png" />
    <h3>我是旋转的Lit组件</h3>
  </div>
</template>
​
<script>
// 引入Avatar组件，注册 lit-avatar 自定义元素
import "./LitComponents/Avatar/index";
​
export default {
  name: "App",
  components: {},
};
</script>
​
<style></style>

引入到Angular

angular在使用自定义元素的时候需要在module中添加配置schemas: [CUSTOM_ELEMENTS_SCHEMA]

import { Component } from '@angular/core';
// 引入Avatar组件，注册 lit-avatar 自定义元素
import './LitComponents/Avatar';
​
@Component({
  selector: 'app-root',
  template: `  
    <div class="App">
      <!-- <lit-avatar />是Avatar组件中自定义的html元素 -->
      <lit-avatar url="./avatar.png"></lit-avatar>
      <h3>我是旋转的Lit组件</h3>
    </div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'ng-app';
}

发布npm包

写到这里当然不算最好，在不同框架的项目中都 copy 一份组件有点...

所以我们可以将我们的 Lit 组件库发布到 npm 上，这样在用到的项目中 install 就可以了！发布的过程可以看参考链接。

参考链接

avatar
文章
阅读
粉丝