 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/webcomponent-introduction-3/photo-1507787090700-dea2089be848.webp)
Web Components 介紹與實作說明 (3) | 模組化開源與 CDN
前情 先前我們介紹了如何實作一個 Tooltips 的 WebComponenet 元件， 今天我們來說明如何將我們辛苦寫好的 UI 元件模組化並上傳到 NPM 套件庫， 方便之後可以重複使用。 模組化 在先前 CodePen 的範例中， 其實我們就使用了 立即調用函式 IIFE (Immediately Invoked Function Expression) 的方式來宣告我們的 Custom Element。 使用 IIFE 來執行模組化除了可以在網頁載入時執行我們定義的函式外，也可以透過局部作用域的創建來避免變數汙染與命名衝突等問題， 是前端模組化常常使用的模式，他的基本語法如下: 1 2 3 (function () { // 要執行的程式碼 })(); 而宣告與定義一個 WebComponent 主要是使用 window.customElements.define 來宣告我們自定義的 HTML 標籤，所以語法會像下面這樣: 1 2 3 4 5 6 7 8 9 // my-tag.js (function () { window.customElements.define( "my-tag", class extends HTMLElement { // 定義 Custom Element 參數、行為等 } ); })(); 完成上述的 IIFE 的程式碼後，我們可以將這段程式碼儲存在一個自訂的檔案，如: my-tag....
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/webcomponent-introduction-2/photo-1530811761207-8d9d22f0a141.webp)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/my-webcomponents/maik-jonietz-_yMciiStJyY-unsplash.jpg)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/webcomponent-introduction-1/photo-1508921340878-ba53e1f016ec.webp)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/dark-mode-and-css-color-scheme/photo-1552862750-746b8f6f7f25.webp)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/passkey-and-webauthn-passwordless-authentication/0_1zYBySFcoREDdevX.jpg)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/introduction-to-basic-cryptography/0_Li0quUCV8yxJl8dT.jpg)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/offline-image-storage-using-indexeddb/0_SE5YTSIGxPUrOgGS.jpg)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/self-hosted-dns-with-coredns/0_bBPydoEQM7H452gu.jpg)
 on [Unsplash](https://unsplash.com/)](https://yishiashia.github.io/posts/switch-themes-with-css-variable/joanna-kosinska-bF2vsubyHcQ-unsplash.jpg)