編寫您的第一個 Web 元件（學習 Modulo.js - 第 f 部分

？歡迎所有新訂閱者和返回的組件編碼者！我即將開始一個新的 10 部分教程系列。雖然我的其他教程使用Modulo.js 構建特定的、有趣的小應用程序，例如口袋妖怪舞會、復古擠壓文本編輯器或視頻遊戲畫廊，但本教程系列將建立在基本原則上，從第一部分開始：什麼是Web 元件嗎？

HTML 與 CSS 之後的下一步

您是否剛學習了 HTML 和 CSS 的基礎知識，並對下一步感到好奇，想要建立更大、更完整的 Web 應用程式？或者，您已經是 Web 開發人員或 JavaScript 專業人士，只想建立快速、輕量級的 Web 應用程序，而無需過多的臃腫、工具或過多的依賴項？

如果是這樣，Web Components 就適合您！它們允許您建立可重複使用的程式碼部分。透過學習本教學課程，您將學習如何修復重複的、難以維護的 HTML 和 CSS。它也只使用最少的工具和函式庫，這意味著您不需要 Node.js、NPM 或大量的 node_modules。它還可以讓您磨練現代前端Web 開發技能：在本系列的後續教程中，您將學習諸如slots、shadowDOM、props 等概念、模板、狀態管理等等！這些概念可以轉移到使用其他流行框架，而 Modulo 簡單的聲明性方法可能是一種更有吸引力的方式來學習核心概念，而無需陷入複雜的設定。

模數框架簡介

什麼是 Modulo？ Modulo 是一個用 JavaScript 編寫的免費軟體/開源、小而強大的 Web 框架。它沒有依賴項，並使用 HTML 語法，因此可以在頁面加載時自行設置，無需 Node.js 或編譯。您可以在純 HTML「靜態網站」（例如，當您在目錄中組裝 HTML、CSS 和其他靜態資源以在靜態 Web 主機上啟動時）或任何其他現有 Web 應用程式中使用它。本教學是關於使用 Modulo 作為建立 Web 元件的工具。

第 1 部分介紹

在第 1 部分中，我們將學習如何建立一個簡單的「Hello World」元件。在以後的部分中，我們將學習如何添加樣式、道具、狀態、響應式表單、插槽、API 等等，但現在，我們將從基礎知識開始：超越基本的HTML 和透過使用Modulo 創建和重複使用Web 元件來實作CSS。

第 1 步：包含模數

在使用 Modulo 之前，我們必須包含該框架。整個框架包含在「Modulo.js」中，該檔案包含 2000 行 JavaScript。 這表示啟動 Modulo 專案實際上不需要瀏覽器和編輯器以外的任何相依性。 因此，只需開啟一個空白 HTML 檔案並開始使用以下非常簡單的起始程式碼：

<template Modulo>
    <!-- our stuff will go here eventually... -->
</template>
<script src="https://unpkg.com/mdu.js"></script>

第 2 步：定義您的第一個元件

現在我們已經包含了它，我們可以開始編寫模定義並一般使用該框架。我們透過創建 Modulo 來定義我們的第一個元件。定義，並在其中放入一個

<Component name="HelloWorld">
    <Template>
        Hello <strong>Modulo</strong> World!
    </Template>
</Component>

這個「模板」因此成為我們元件的「模板」：每次我們的元件出現在頁面上時，它都會在其中呈現給定的模板。

第 3 步：使用您的第一個組件

定義後，您可以透過引用其名稱來使用元件，就好像它是純 HTML 標籤一樣：

<x-HelloWorld></x-HelloWorld>

這將導致螢幕上顯示以下內容：

你好模世界！

請注意，註冊後，元件可以到達普通 HTML 標籤可以到達的任何地方，並且也可以以相同的方式使用 CSS 進行樣式設定。換句話說，建立元件就像建立一個全新類型的 HTML 標籤，可以在任何地方使用，就像原始的

、 等 HTML 標籤一樣。例如，我們可以將我們的元件到其他標籤中，如下所示：

<p>One time: <x-HelloWorld></x-HelloWorld></p>
<div>Another time: <x-HelloWorld></x-HelloWorld></div>

第 4 步：增強您的第一個組件

如果我們願意，「模板」可以有更進階的程式碼。我們可以混合使用 CSS 和類別。例如：

<Component name="HelloWorld">
    <Template>
        Hello <strong style="color: goldenrod">Modulo</strong> World!
        <p class="neat">Any HTML can be here!</p>
    </Template>
</Component>

請注意，如果您在 CSS 中使用 .neat 選擇器，這將應用於該 span 元素，就像正常情況一樣。

- 完整範例

綜合起來，我們得到以下結果。請注意如何使用和重複使用我們的自訂 Web 元件，就好像它是普通的 HTML 標籤一樣：

<template Modulo>
    <Component name="HelloWorld">
        <Template>
            Hello <strong style="color: goldenrod">Modulo</strong> World!
            <p class="neat">Any HTML can be here!</p>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<h1>Learning Modulo Part 1</h1>
<h2>Your first Web Component</h2>
<main style="border: 3px solid violet; padding: 10px; margin: 10px; border-radius: 3px">
    <section>One time: <x-HelloWorld></x-HelloWorld></section>
    <div>Another time: <x-HelloWorld></x-HelloWorld></div>
</main>

Conclusion

That's all for Part 1! There's another 9 parts to go, so follow for more tutorials like this, and, as always, feel free to ask questions or suggestions in the comments. Next time... we're getting stylish!

以上是編寫您的第一個 Web 元件（學習 Modulo.js - 第 f 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！