開發(fā)你的第一個(gè) Web 組件
Web 組件是一系列開源技術(shù)（例如 JavaScript 和 HTML）的集合，你可以用它們創(chuàng)建一些 Web App 中可重用的自定義元素。你創(chuàng)建的組件是獨(dú)立于其他代碼的，所以這些組件可以方便地在多個(gè)項(xiàng)目中重用。
首先，它是一個(gè)平臺標(biāo)準(zhǔn)，所有主流的瀏覽器都支持它。
Web 組件中包含什么？
- 定制元素：JavaScript API 支持定義 HTML 元素的新類別。
- 影子 DOM：JavaScript API 提供了一種將一個(gè)隱藏的、獨(dú)立的??文檔對象模型??（DOM）附加到一個(gè)元素的方法。它通過保留從頁面的其他代碼分離出來的樣式、標(biāo)記結(jié)構(gòu)和行為特征對 Web 組件進(jìn)行了封裝。它會(huì)確保 Web 組件內(nèi)樣式不會(huì)被外部樣式覆蓋，反之亦然，Web 組件內(nèi)樣式也不會(huì)“泄露”到頁面的其他部分。
- HTML 模板：該元素支持定義可重用的 DOM 元素。可重用 DOM 元素和它的內(nèi)容不會(huì)呈現(xiàn)在 DOM 內(nèi)，但仍然可以通過 JavaScript 被引用。
開發(fā)你的第一個(gè) Web 組件
你可以借助你最喜歡的文本編輯器和 JavaScript 寫一個(gè)簡單的 Web 組件。本指南使用 Bootstrap 生成簡單的樣式，并創(chuàng)建一個(gè)簡易的卡片式的 Web 組件，給定了位置信息，該組件就能顯示該位置的溫度。該組件使用了 ??Open Weather API??，你需要先注冊，然后創(chuàng)建 APPID/APIKey，才能正常使用。
調(diào)用該組件，需要給出位置的經(jīng)度和緯度：
創(chuàng)建一個(gè)名為 ??weather-card.js?? 的文件，這個(gè)文件包含 Web 組件的所有代碼。首先，需要定義你的組件，創(chuàng)建一個(gè)模板元素，并在其中加入一些簡單的 HTML 標(biāo)簽：
定義 Web 組件的類及其構(gòu)造函數(shù)：
構(gòu)造函數(shù)中，附加了 ??shadowRoot?? 屬性，并將它設(shè)置為開啟模式。然后這個(gè)模板就包含了 shadowRoot 屬性。
接著，編寫獲取屬性的函數(shù)。對于經(jīng)度和緯度，你需要向 Open Weather API 發(fā)送 GET 請求。這些功能需要在 ??connectedCallback?? 函數(shù)中完成。你可以使用 ??getAttribute?? 方法訪問相應(yīng)的屬性，或定義讀取屬性的方法，把它們綁定到本對象中。
現(xiàn)在定義 ??connectedCallBack?? 方法，它的功能是在需要時(shí)獲取天氣數(shù)據(jù)：
一旦獲取到天氣數(shù)據(jù)，附加的 HTML 元素就添加進(jìn)了模板。至此，完成了類的定義。
最后，使用 ??window.customElements.define?? 方法定義并注冊一個(gè)新的自定義元素：
其中，第一個(gè)參數(shù)是自定義元素的名稱，第二個(gè)參數(shù)是所定義的類。這里是 ??整個(gè)組件代碼的鏈接??。
你的第一個(gè) Web 組件的代碼已完成！現(xiàn)在應(yīng)該把它放入 DOM。為了把它放入 DOM，你需要在 HTML 文件（??index.html??）中載入指向 Web 組件的 JavaScript 腳本。
這就是顯示在瀏覽器中的 Web 組件：
Web component displayed in a browser
由于 Web 組件中只包含 HTML、CSS 和 JavaScript，它們本來就是瀏覽器所支持的，并且可以無瑕疵地跟前端框架（例如 React 和 Vue）一同使用。下面這段簡單的代碼展現(xiàn)的是它跟一個(gè)由 ??Create React App?? 引導(dǎo)的一個(gè)簡單的 React App 的整合方法。如果你需要，可以引入前面定義的 ??weather-card.js??，把它作為一個(gè)組件使用：
Web 組件的生命周期
一切組件都遵循從初始化到移除的生命周期法則。每個(gè)生命周期事件都有相應(yīng)的方法，你可以借助這些方法令組件更好地工作。Web 組件的生命周期事件包括：
- ?
?Constructor??：Web 組件的構(gòu)造函數(shù)在它被掛載前調(diào)用，意味著在元素附加到文檔對象前被創(chuàng)建。它用于初始化本地狀態(tài)、綁定事件處理器以及創(chuàng)建影子 DOM。在構(gòu)造函數(shù)中，必須調(diào)用??super()??，執(zhí)行父類的構(gòu)造函數(shù)。 - ?
?ConnectedCallBack??：當(dāng)一個(gè)元素被掛載（即，插入 DOM 樹）時(shí)調(diào)用。該函數(shù)處理創(chuàng)建 DOM 節(jié)點(diǎn)的初始化過程中的相關(guān)事宜，大多數(shù)情況下用于類似于網(wǎng)絡(luò)請求的操作。React 開發(fā)者可以將它與??componentDidMount?? 相關(guān)聯(lián)。 ?attributeChangedCallback??：這個(gè)方法接收三個(gè)參數(shù)：??name??,??oldValue?? 和??newValue??。組件的任一屬性發(fā)生變化，就會(huì)執(zhí)行這個(gè)方法。屬性由靜態(tài)??observedAttributes?? 方法聲明：
- 一旦屬性名或?
?_id?? 改變，就會(huì)調(diào)用??attributeChangedCallback?? 方法。 - ?
?DisconnectedCallBack??：當(dāng)一個(gè)元素從 DOM 樹移除，會(huì)執(zhí)行這個(gè)方法。它相當(dāng)于 React 中的??componentWillUnmount??。它可以用于釋放不能由垃圾回收機(jī)制自動(dòng)清除的資源，比如 DOM 事件的取消訂閱、停用計(jì)時(shí)器或取消所有已注冊的回調(diào)方法。 - ?
?AdoptedCallback??：每次自定義元素移動(dòng)到一個(gè)新文檔時(shí)調(diào)用。只有在處理 IFrame 時(shí)會(huì)發(fā)生這種情況。
模塊化開源
Web 組件對于開發(fā) Web App 很有用。無論你是熟練使用 JavaScript 的老手，還是初學(xué)者，無論你的目標(biāo)客戶使用哪種瀏覽器，借助這種開源標(biāo)準(zhǔn)創(chuàng)建可重用的代碼都是一件可以輕松完成的事。
