这是lit框架的系列学习文章，跳转查看其他章节

在补充了web component的一些基础性现状，明确了lit应用的一些适配现状之后，我们进一步来看看代码部分。

初始化安装之后，在目标目录会生成如下结构的初始化页面

│  index.html  //主页面文件
│  package.json
│  vite.config.js  //vite编译配置文件
│  
├─public  //html中直接调用的图片等其他媒体文件
│      vite.svg 
│      
└─src //参与编译的源码文件
    │  index.css //主css样式文件
    │  my-element.js //名为my-element的自定义模块
    │  
    └─assets  //在模块中引用的图片等其他媒体文件
            lit.svg

index.html部分内容

index.html的内容其实就很简单了，主要是两个部分的内容。

首先在头部引用组件的js文件和样式文件

    <link rel="stylesheet" href="./src/index.css" />
    <script type="module" src="/src/my-element.js"></script>

然后就是像使用普通的a或者div元素一样使用这个自定义组件

<my-element>
   <h1>Vite + Lit</h1>
</my-element>

组件的定义

回过头我们再来看这个my-element.js文件的定义（ts部分请参考官网，官网主体是使用ts来写的，这里就换个思路，主用js）：

import { LitElement, css, html } from 'lit'
import litLogo from './assets/lit.svg'

/**
 * An example element.
 *
 * @slot - This element has a slot
 * @csspart button - The button
 */
export class MyElement extends LitElement {
  static get properties() {
    return {
      /**
       * Copy for the read the docs hint.
       */
      docsHint: { type: String },

      /**
       * The number of times the button has been clicked.
       */
      count: { type: Number },
    }
  }

  constructor() {
    super()
    this.docsHint = 'Click on the Vite and Lit logos to learn more'
    this.count = 0
  }

  render() {
    return html`
      ………………
      <slot></slot>
      <div class="card">
        <button @click=${this._onClick} part="button">
          count is ${this.count}
        </button>
      </div>
      <p class="read-the-docs">${this.docsHint}</p>
    `
  }

  _onClick() {
    this.count++
  }

  static get styles() {
    return css`
      :host {
        max-width: 1280px;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
      }

      ………………
    `
  }
}

window.customElements.define('my-element', MyElement)

不重要的部分我已省略，大体上面的部分就是定义一个自定义组件需要的最小集内容，除了最开始的引用部分和类定义之外分为这几个部分：

类中定义properties（static get properties函数），properties是所有页面中需要参与动态渲染过程的变量的统称，用过vue的可类比vue的props，但范围更广，私有的内部的变量也需要在这里定义（类比vue的data），不定义的变量不能做到动态刷新页面的效果
类的初始化（constructor函数），除了调用super之外，最主要的内容是完成properties的默认值赋值，也就是说properties定义并不完成初始化值赋值，只有此时赋值才有用处。
类中渲染函数（render函数），返回一个html对象，其内容就是这个自定义组件对应的html代码。
类中定义功能函数（例子中为_onClick函数），组件对应的动态功能函数，可参考例子使用_作为函数名称开头，标识是内部函数。
类中定义样式（styles），自定义组建的自有样式，经实际使用发现，样式仅适用于本组件。
声明，在window.customElements里声明这个组件，名称和对应的类名称，有了这一行，index里面才可以使用<my-element>。

整体风格和react比较类似，和vue相比区别很大。

一些和普通html不太像的地方

有这么几个细节可能以后会逐步展开讲：

css定义中的:host指代本对象，在html中，自定义组件也是一级对象，因此可以设置自有的css属性。

part="button"，例子中html部分button的属性中有part="button"的定义，这表示该部分是调用方可以使用my-element::part(button)来自定义css样式的部分，当然最好也有对应的头部注释 @csspart button - The button

render函数的写法

今天主要展开讲render函数的写法

render() {
    return html`
      ………………
      <slot></slot>
      <div class="card">
        <button @click=${this._onClick} part="button">
          count is ${this.count}
        </button>
      </div>
      <p class="read-the-docs">${this.docsHint}</p>
    `
  }

从生成的示例文件可以看到，render函数主要返回了一个html模板，写法是固定使用html开头，后跟(``)包裹的模板字符串，模板中以${和}括起来的部分是动态部分，其他则是静态html。

动态部分主要分为两个部分。

一个是渲染的变量值，比如例子中的count is ${this.count}，这个例子主要展示了两种变量，一个是内部变量this.count，该值主要和onClick函数配合，用于内部计数；另外一个是docsHint，主要是外部可传入的附加内容，可以通过修改index.html来试试

    <my-element docsHint="中文Lit教程">
      <h1>Vite + Lit</h1>
    </my-element>

另外就是回调函数的声明，例如例子中的@click=${this._onClick}，vue的同学注意了，不需要多个引号。

这个示例通过yarn dev运行之后，点击按钮会动态数值进行增长

下一步工作

了解到这些信息之后，我们对于lit的使用有了一个初步的概念，从我们自己的角度出发，我们做了以下的工作，这个过程应该是比较通顺的：

1）替换render中的静态部分内容

2）尝试增加更多的properties

3）尝试将新的properties用在render中

以上两步不要搞反了，如果render中用到了没有定义的properties，是不会触发动态渲染的

大家可以初步设想一个页面目标，尝试将示例页面进行上述修改来练手，下一讲将properties的详细定义方法。

不用vdom的lit框架学习3：代码结构初步解析

index.html部分内容

组件的定义

一些和普通html不太像的地方

render函数的写法

下一步工作

猜你喜欢