我为什么要为 Web Components 编写一个微型库

挑战自己

消除疼痛

完全控制

分配

装饰器

进入 Readymade

一个例子

Readymade 现已升级至 v1

我知道似乎每个人都在构建这个微型计算机，那个微型计算机。

微服务、微前端，现在还有微库？！

目前已经有了开发 Web 组件的优秀解决方案。

• 模版
• lit-element
• 混合动力车
• slim.js
• SkateJS

一些主流的 JavaScript 框架，例如 Svelte 和 Angular，甚至可以编译为自定义元素。不过，考虑到将现代 JavaScript 框架编译为 Web 组件所需的工具数量，这可能有点过头了。

那么我为什么要编写另一个库呢？

挑战自己

构建一个现代的、零依赖的框架。我想要一个只使用浏览器中 API 的解决方案。这意味着某些功能需要 polyfill，但这没问题。事实证明，浏览器中存在一些 API，可以让你构建一个支持数据绑定、高级事件处理、动画等功能的 UI 微型库！

• 自定义元素
• 创建TreeWalker
• 代理人
• 自定义事件
• 广播频道
• 网络动画

消除疼痛

开发 Web 组件是该项目的另一个目标。自定义元素的编码涉及大量可精简的样板代码。在允许ShadowDOM和不允许的自定义元素之间切换可能很困难。自主自定义元素的处理方式与自定义内置元素不同。事件处理仅与典型的 DOM 一样好，需要调用addEventListener和dispatchEvent，即使这样，您也只能遵循事件通常冒泡的方式。此外，更新自定义元素的模板也存在问题，需要选择 DOM 并更新属性和内部内容。这为工程师提供了做出性能不佳的选择的机会。如果一个库可以处理所有这些，那会怎样？

完全控制

这正是我想要的。如果我想改变这个库的行为方式，我可以做到。Readymade 可以将其构建为开箱即用的 SVG 支持（它确实如此），但如果我想支持 GL 对象，它也可以渲染。只需更换状态引擎，WebGL 支持就来了。我一直在尝试不同的 UI，需要一个可塑性强的 UI。

分配

这是我长期以来一直在做的另一个项目的关键方面。我希望找到一种不依赖任何框架的方法来分发 UI 组件库。该项目的目标是提供一个小于 20KB 的 UI 库。Readymade 本身的大小约为 3KB，导入了所有必要的功能。使用 Readymade 构建的组件可以像任何其他 DOM 元素一样，在任何使用 JavaScript 框架构建的项目中使用，前提是该框架支持自定义元素。

装饰器

在 Angular 中，这些功能对我来说是理所当然的，我想了解这些高阶函数是如何工作的。我构建的微库高度依赖于这个未来的规范，但这也没问题。使用 TypeScript 从头构建这个库还提供了类型检查、IntelliSense 等额外优势，并且让我能够使用优秀的 TypeScript 编译器。

进入 Readymade

Readymade 是一个用于处理 Web 组件开发常见任务的微型库。其 API 与 Angular 或 Stencil 类似，但内部机制有所不同。Readymade 使用上面列出的浏览器 API，为您提供丰富的开发体验。

• 🎰 声明 CSS 和 HTML ShadowDOM 模板的元数据
• ☕️“自主定制”和“定制内置”元素的单一界面
• 🏋️‍ ‘Hello World’（gzip 压缩）大小约为 1Kb
• 1️⃣ 单向数据绑定
• 🎤 事件发射器模式
• 🌲 可摇树

一个例子

下面的按钮示例展示了 Readymade 的一些优势。

import { ButtonComponent, Component, Emitter, Listen } from '@readymade/core';

@Component({
    template:`
    <span>{{buttonCopy}}</span>
    `,
    style:`
        :host {
            background: rgba(24, 24, 24, 1);
            cursor: pointer;
            color: white;
            font-weight: 400;
        }
    `,
})
class MyButtonComponent extends ButtonComponent {
    constructor() {
        super();
    }
    @State() 
    getState() {
      return {
        buttonCopy: 'Click'
      }
    } 
    @Emitter('bang')
    @Listen('click')
    public onClick(event) {
        this.emitter.broadcast('bang');
    }
    @Listen('keyup')
    public onKeyUp(event) {
        if (event.key === 'Enter') {
            this.emitter.broadcast('bang');
        }
    }
}

customElements.define('my-button', MyButtonComponent, { extends: 'button'});

• ButtonComponent是一个预定义的 ES2015 类，它扩展HTMLButtonElement并链接了一些支持装饰器中定义的函数template，style并Component调用其他装饰器添加到该类原型的任何方法。这里有趣的部分是它ButtonComponent是可组合的。以下是其定义。

export class ButtonComponent extends HTMLButtonElement {
  public emitter: EventDispatcher;
  public elementMeta: ElementMeta;
  constructor() {
    super();
    attachDOM(this);
    attachStyle(this);
    if (this.bindEmitters) { this.bindEmitters(); }
    if (this.bindListeners) { this.bindListeners(); }
    if (this.onInit) { this.onInit(); }
  }
  public onInit?(): void;
  public bindEmitters?(): void;
  public bindListeners?(): void; public bindState?(): void;
  public setState?(property: string, model: any): void;
  public onDestroy?(): void;
}

• State允许您为按钮实例定义本地状态，并且状态中定义的任何属性都可以绑定到模板。Readymade 在底层使用document.createTreeWalker和Proxy来监视更改并独立地更新attributes和textContent。

• Emitter定义一个 EventEmitter 模式，该模式可以使用BroadcastChannel API，因此事件不再只是冒泡，它们甚至可以跨浏览器上下文发出。

• Listen是一个为您连接的装饰器addEventListener，因为谁愿意一直输入这个？

Readymade 现已升级至 v1

所以去GitHub上看看吧。文档门户是用 Readymade 构建的，可以在Github Pages上找到。