Linux中國

開發你的第一個 Web 組件

Web 組件是一系列開源技術(例如 JavaScript 和 HTML)的集合,你可以用它們創建一些 Web App 中可重用的自定義元素。你創建的組件是獨立於其他代碼的,所以這些組件可以方便地在多個項目中重用。

首先,它是一個平台標準,所有主流的瀏覽器都支持它。

Web 組件中包含什麼?

  • 定製元素:JavaScript API 支持定義 HTML 元素的新類別。
  • 影子 DOM:JavaScript API 提供了一種將一個隱藏的、獨立的 文檔對象模型(DOM)附加到一個元素的方法。它通過保留從頁面的其他代碼分離出來的樣式、標記結構和行為特徵對 Web 組件進行了封裝。它會確保 Web 組件內樣式不會被外部樣式覆蓋,反之亦然,Web 組件內樣式也不會「泄露」到頁面的其他部分。
  • HTML 模板:該元素支持定義可重用的 DOM 元素。可重用 DOM 元素和它的內容不會呈現在 DOM 內,但仍然可以通過 JavaScript 被引用。

開發你的第一個 Web 組件

你可以藉助你最喜歡的文本編輯器和 JavaScript 寫一個簡單的 Web 組件。本指南使用 Bootstrap 生成簡單的樣式,並創建一個簡易的卡片式的 Web 組件,給定了位置信息,該組件就能顯示該位置的溫度。該組件使用了 Open Weather API,你需要先註冊,然後創建 APPID/APIKey,才能正常使用。

調用該組件,需要給出位置的經度和緯度:

<weather-card longitude=&apos;85.8245&apos; latitude=&apos;20.296&apos; />

創建一個名為 weather-card.js 的文件,這個文件包含 Web 組件的所有代碼。首先,需要定義你的組件,創建一個模板元素,並在其中加入一些簡單的 HTML 標籤:

const template = document.createElement(&apos;template&apos;);

template.innerHTML = `
  <div class="card">
    <div class="card-body"></div>
  </div>
`

定義 Web 組件的類及其構造函數:

class WeatherCard extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ &apos;mode&apos;: &apos;open&apos; });
    this._shadowRoot.appendChild(template.content.cloneNode(true));
  }
  ......
}

構造函數中,附加了 shadowRoot 屬性,並將它設置為開啟模式。然後這個模板就包含了 shadowRoot 屬性。

接著,編寫獲取屬性的函數。對於經度和緯度,你需要向 Open Weather API 發送 GET 請求。這些功能需要在 connectedCallback 函數中完成。你可以使用 getAttribute 方法訪問相應的屬性,或定義讀取屬性的方法,把它們綁定到本對象中。

get longitude() {
  return this.getAttribute(&apos;longitude&apos;);
}

get latitude() {
  return this.getAttribute(&apos;latitude&apos;);
}

現在定義 connectedCallBack 方法,它的功能是在需要時獲取天氣數據:

connectedCallback() {
  var xmlHttp = new XMLHttpRequest();
  const url = `http://api.openweathermap.org/data/2.5/weather?lat=${this.latitude}&lon=${this.longitude}&appid=API_KEY`
  xmlHttp.open("GET", url, false);
  xmlHttp.send(null);
  this.$card = this._shadowRoot.querySelector(&apos;.card-body&apos;);
  let responseObj = JSON.parse(xmlHttp.responseText);
  let $townName = document.createElement(&apos;p&apos;);
  $townName.innerHTML = `Town: ${responseObj.name}`;
  this._shadowRoot.appendChild($townName);
  let $temperature = document.createElement(&apos;p&apos;);
  $temperature.innerHTML = `${parseInt(responseObj.main.temp - 273)} °C`
  this._shadowRoot.appendChild($temperature);
}

一旦獲取到天氣數據,附加的 HTML 元素就添加進了模板。至此,完成了類的定義。

最後,使用 window.customElements.define 方法定義並註冊一個新的自定義元素:

window.customElements.define(&apos;weather-card&apos;, WeatherCard);

其中,第一個參數是自定義元素的名稱,第二個參數是所定義的類。這裡是 整個組件代碼的鏈接

你的第一個 Web 組件的代碼已完成!現在應該把它放入 DOM。為了把它放入 DOM,你需要在 HTML 文件(index.html)中載入指向 Web 組件的 JavaScript 腳本。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <weather-card longitude=&apos;85.8245&apos; latitude=&apos;20.296&apos;/>
  <script src=&apos;./weather-card.js&apos;></script>
</body>

</html>

這就是顯示在瀏覽器中的 Web 組件:

![Web component displayed in a browser](/data/attachment/album/202210/17/101137ki5ra5qigrepep16.png "Web component displayed in a browser")

由於 Web 組件中只包含 HTML、CSS 和 JavaScript,它們本來就是瀏覽器所支持的,並且可以無瑕疵地跟前端框架(例如 React 和 Vue)一同使用。下面這段簡單的代碼展現的是它跟一個由 Create React App 引導的一個簡單的 React App 的整合方法。如果你需要,可以引入前面定義的 weather-card.js,把它作為一個組件使用:

import &apos;./App.css&apos;;
import &apos;./weather-card&apos;;

function App() {
  return (
  <weather-card longitude=&apos;85.8245&apos; latitude=&apos;20.296&apos;></weather-card>
  );
}

export default App;

Web 組件的生命周期

一切組件都遵循從初始化到移除的生命周期法則。每個生命周期事件都有相應的方法,你可以藉助這些方法令組件更好地工作。Web 組件的生命周期事件包括:

  • Constructor:Web 組件的構造函數在它被掛載前調用,意味著在元素附加到文檔對象前被創建。它用於初始化本地狀態、綁定事件處理器以及創建影子 DOM。在構造函數中,必須調用 super(),執行父類的構造函數。
  • ConnectedCallBack:當一個元素被掛載(即,插入 DOM 樹)時調用。該函數處理創建 DOM 節點的初始化過程中的相關事宜,大多數情況下用於類似於網路請求的操作。React 開發者可以將它與 componentDidMount 相關聯。
  • attributeChangedCallback:這個方法接收三個參數:name, oldValuenewValue。組件的任一屬性發生變化,就會執行這個方法。屬性由靜態 observedAttributes 方法聲明:
static get observedAttributes() {
  return [&apos;name&apos;, &apos;_id&apos;];
} 

一旦屬性名或 _id 改變,就會調用 attributeChangedCallback 方法。

  • DisconnectedCallBack:當一個元素從 DOM 樹移除,會執行這個方法。它相當於 React 中的 componentWillUnmount。它可以用於釋放不能由垃圾回收機制自動清除的資源,比如 DOM 事件的取消訂閱、停用計時器或取消所有已註冊的回調方法。
  • AdoptedCallback:每次自定義元素移動到一個新文檔時調用。只有在處理 IFrame 時會發生這種情況。

模塊化開源

Web 組件對於開發 Web App 很有用。無論你是熟練使用 JavaScript 的老手,還是初學者,無論你的目標客戶使用哪種瀏覽器,藉助這種開源標準創建可重用的代碼都是一件可以輕鬆完成的事。

插圖:Ramakrishna Pattnaik, CC BY-SA 4.0

via: https://opensource.com/article/21/7/web-components

作者:Ramakrishna Pattnaik 選題:lujun9972 譯者:cool-summer-021 校對:wxy

本文由 LCTT 原創編譯,Linux中國 榮譽推出


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國