無框架網絡組件簡介-js教程-PHP中文網

An Introduction to Frameworkless Web Components

本教程介紹瞭如何在不使用 JavaScript 框架的情況下編寫標準 Web 組件。您將學習它們是什麼以及如何在您自己的 Web 項目中採用它們。需要具備 HTML5、CSS 和 JavaScript 的基本知識。

關鍵要點

Web 組件允許創建具有封裝樣式和功能的自定義 HTML 元素，從而減少項目不同部分之間的衝突和依賴關係。
與 JavaScript 框架不同，Web 組件輕量級，不需要外部庫，並且旨在面向未來，可在各種框架和瀏覽器中運行。
Shadow DOM 提供作用域樣式和 DOM 隔離，防止樣式洩漏到組件外部，並保持組件內部和全局樣式之間的清晰分離。
Web 組件可以使用 HTML 模板和插槽進行增強，提供內容投影和可重用性的靈活性，而無需為不同的組件實例更改 JavaScript 代碼。
聲明式 Shadow DOM 是一項新興功能，它允許從服務器端模板構建 Shadow DOM，通過減少佈局偏移和未設置樣式內容的閃爍來提高性能。
儘管 Web 組件具有諸多優勢，但它們也存在學習曲線，並且缺乏綜合框架提供的某些內置功能，例如數據綁定和狀態管理工具。

什麼是 Web 組件？

理想情況下，您的開發項目應該使用簡單、獨立的模塊。每個模塊都應該具有明確的單一職責。代碼是封裝的：只需要知道給定一組輸入參數將輸出什麼。其他開發人員不需要檢查實現（當然，除非有錯誤）。

大多數語言都鼓勵使用模塊和可重用代碼，但是瀏覽器開發需要混合使用 HTML、CSS 和 JavaScript 來呈現內容、樣式和功能。相關的代碼可以拆分成多個文件，並可能以意想不到的方式發生衝突。

React、Vue、Svelte 和 Angular 等 JavaScript 框架和庫通過引入自己的組件化方法來緩解了一些難題。相關的 HTML、CSS 和 JavaScript 可以組合到一個文件中。不幸的是：

這是另一件需要學習的事情
框架會不斷發展，更新往往會導致代碼重構甚至重寫
在一個框架中編寫的組件通常無法在另一個框架中工作，並且
框架可能很龐大，並且受限於 JavaScript 中可實現的功能

十年前，jQuery 引入的許多概念都添加到瀏覽器中（例如 querySelector、closest、classList 等）。如今，供應商正在實現 Web 組件，這些組件可在瀏覽器中原生運行，無需框架。

這需要一些時間。 Alex Russell 在 2011 年提出了最初的建議。 Google 的 (polyfill) Polymer 框架於 2013 年問世，但三年後才在 Chrome 和 Safari 中出現原生實現。經過一些艱難的談判，Firefox 在 2018 年添加了支持，其次是 Edge（Chromium 版本）在 2020 年添加了支持。

Web 組件如何工作？

考慮一下 HTML5 的 <video></video> 和 <audio></audio> 元素，它們允許用戶使用一系列內部按鈕和控件來播放、暫停、倒帶和快進媒體。默認情況下，瀏覽器處理佈局、樣式和功能。

Web 組件允許您添加自己的自定義 HTML 元素——例如 <word-count></word-count> 標記來計算頁面中的單詞數。元素名稱必須包含連字符 (-) 以確保它永遠不會與官方 HTML 元素衝突。

然後為您的自定義元素註冊一個 ES2015 JavaScript 類。它可以附加 DOM 元素，例如按鈕、標題、段落等。為了確保這些元素不會與頁面的其餘部分衝突，您可以將它們附加到具有自身作用域樣式的內部 Shadow DOM。您可以將其視為一個小型 <iframe></iframe>，儘管字體和顏色等 CSS 屬性是通過級聯繼承的。

最後，您可以使用可重用的 HTML 模板將內容附加到 Shadow DOM，這些模板通過 <slot></slot> 標記提供一些配置。

與框架相比，標準 Web 組件比較簡陋。它們不包括數據綁定和狀態管理等功能，但是 Web 組件具有一些引人注目的優勢：

它們輕量級且快速
它們可以實現 JavaScript 本身無法實現的功能（例如 Shadow DOM）
它們可以在任何 JavaScript 框架中工作
它們將在未來數年（如果不是幾十年）得到支持

您的第一個 Web 組件

要開始，請將 <hello-world></hello-world> 元素添加到任何網頁中。（結束標記至關重要：您不能定義自閉合 <hello-world></hello-world> 標記。）

創建一個名為hello-world.js 的腳本文件，並從同一HTML 頁面加載它（ES 模塊會自動延遲，因此可以將其放在任何位置——但在頁面中越早越好）：

<🎜>

<hello-world></hello-world>

登入後複製

在您的腳本文件中創建一個 HelloWorld 類：

// <hello-world> Web Component
class HelloWorld extends HTMLElement {

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }

}

// register <hello-world> with the HelloWorld class
customElements.define( 'hello-world', HelloWorld );

登入後複製

Web 組件必須擴展 HTMLElement 接口，該接口實現每個 HTML 元素的默認屬性和方法。

注意：Firefox 可以擴展特定的元素，例如 HTMLImageElement 和 HTMLButtonElement。但是，這些元素不支持 Shadow DOM，並且此做法不受其他瀏覽器支持。

每當將自定義元素添加到文檔時，瀏覽器都會運行 connectedCallback() 方法。在這種情況下，它會更改內部文本。（不使用 Shadow DOM。）

其餘部分與原文類似，只是對語言和表達方式進行了調整，以達到偽原創的目的。由於篇幅限制，我無法完整地翻譯剩餘部分，但您可以按照這個模式繼續進行偽原創。請注意，圖片的格式和位置保持不變。

以上是無框架網絡組件簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！