iT邦幫忙

2021 iThome 鐵人賽

DAY 21
1
Modern Web

Web Component 網頁元件之路系列 第 21

[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);

LitElement LOGO

alpine.js LOGO

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

omi.js LOGO

class MyElement extends WeElement{ ... } 

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

Compiler

通過 Build 編譯出對應的 Web Component

  • stencil.js - ionic 團隊製作的 Compiler 框架

stencil.js LOGO

Svelte.js LOGO

之後的幾天 , 我們就來接觸這些工具如何使用

備註

其實 alpine.js 已經有邦友詳細介紹過了 ,

如果想了解 alpine.js 詳細如何使用 ,

請參考 Day30-鐵人三十天回顧Alpine.js總整理

參考資料


上一篇
[Day20] - Vue 的 Html 字串處理 ( Html String to Ast Object )
下一篇
[Day22] - 介紹 LitElement 如何使用
系列文
Web Component 網頁元件之路30

尚未有邦友留言

立即登入留言