[Day21] - 制作 Web component 的一些工具

前几天我们花费心力 , 说明 Web Component 如何制作 ,

与当资料变换时 , 我们需要使用的 _render

还有就是全部更新太耗效能 , 而需要采取的分区块 _render 的机制 ,

进而提出 vNode 与 Html String to AST 的技巧 ,

其实这些东西我们可以不用自己处理 ,

已经有框架帮我们处理好 Web Component 的 render 那些事 ,

因此我们可以用 MVVM 的思考方式 + 下述的框架 , 来轻松制作 Web Component

当然 , 每个技术用不同的方式实现 , 大体分为 2 类

Libraries

extend 设定好的 HTMLElement 来建立 Web Component

• LitElement - Google 制作的 Web Component 框架

export class MyElement extends LitElement { ... } 

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

• alpine.js

• omi.js - Tencent 制作的 Web Component 框架

class MyElement extends WeElement{ ... } 

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

Compiler

通过 Build 编译出对应的 Web Component

• stencil.js - ionic 团队制作的 Compiler 框架

• Svelte.js

之後的几天 , 我们就来接触这些工具如何使用

备注

其实 alpine.js 已经有邦友详细介绍过了 ,

如果想了解 alpine.js 详细如何使用 ,

请参考 Day30-铁人三十天回顾Alpine.js总整理

参考资料

• 9 Web Components UI Libraries You Should Know in 2021
• WebComponents.dev