Web Components

原因

探討使用Web Components的原因，我們已經(jīng)知道像 Vue 和 React 這樣的成熟框架存在，但是有沒有深入思考過為什么選擇使用這些框架？核心理由無非是為了減少編碼工作量，通過框架減少代碼重復(fù)，盡管這同時引入了一些原生不支持的特性，從而增加了一定的復(fù)雜性。當我了解到Web Components時，我開始思考是否可以用它來取代 Vue，因為 Vue 的主要優(yōu)勢之一就是能夠?qū)崿F(xiàn)組件的封裝和復(fù)用gqC28資訊網(wǎng)——每日最新資訊28at.com

構(gòu)成

Web Components 由三個主要部分構(gòu)成，與Vue的模板非常相似：gqC28資訊網(wǎng)——每日最新資訊28at.com

• 自定義元素（Custom Element）： 這是一組JavaScript API，使你能夠定義自定義元素及其行為，以便根據(jù)需要在用戶界面中使用它們
• 影子DOM（Shadow DOM）： 這也是一組JavaScript API，用于將一個封閉的“影子”DOM樹附加到元素上（與主文檔DOM分開渲染），并管理其相關(guān)功能。這樣，你可以確保元素的功能是私有的，因此它們可以被腳本化和樣式化，而不會與文檔的其他部分產(chǎn)生沖突
• HTML模板（HTML Template）： template 和 slot 元素讓你能夠創(chuàng)建不會立即顯示在渲染頁面中的標記模板。然后，這些模板可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)，被反復(fù)使用

使用

接下來說一下 Web Components 的基本使用~gqC28資訊網(wǎng)——每日最新資訊28at.com

自定義組件

創(chuàng)建一個基礎(chǔ)的自定義組件包含以下步驟：gqC28資訊網(wǎng)——每日最新資訊28at.com

• 1、繼承： 自定義元素需要通過繼承HTMLElement類（或其子類）來創(chuàng)建
• 2、創(chuàng)建模板： 使用document.createElement('template')來創(chuàng)建一個新的模板元素
• 3、獲取影子DOM： 通過元素的attachShadow方法獲取影子DOM，為元素提供封裝的DOM結(jié)構(gòu)
• 4、添加內(nèi)容： 將模板內(nèi)容通過appendChild方法添加到影子DOM中。使用cloneNode方法克隆節(jié)點，避免對原始模板的污染。
• 5、定義組件： 使用customElements.define('component-tag-name', ComponentClassName)來定義組件，使其可在頁面中使用

至此，一個最基礎(chǔ)的自定義組件創(chuàng)建完成gqC28資訊網(wǎng)——每日最新資訊28at.com

圖片gqC28資訊網(wǎng)——每日最新資訊28at.com

拓展點：gqC28資訊網(wǎng)——每日最新資訊28at.com

• 在最初階段，我嘗試通過WebComponent.html的形式編寫自定義組件，這樣可以直接在標簽中寫樣式和HTML，便于編輯器提供代碼提示和格式化。然而，由于當前標簽不支持直接導(dǎo)入HTML文件，除非通過HTTP GET請求加載外部HTML，但這種方法似乎違背了初衷。
• 要監(jiān)聽屬性的變化，必須通過static get observedAttributes靜態(tài)方法聲明哪些屬性是被監(jiān)聽的。之后，就可以在attributeChangedCallback回調(diào)函數(shù)中捕獲屬性變化。
• 自定義元素也擁有簡化的生命周期鉤子，雖然只有三個，但它們的存在使得狀態(tài)管理變得簡單。
• 支持使用插槽（slots），類似于Vue，可以通過的方式來實現(xiàn)內(nèi)容的插入。

在html中使用

• 當引入自定義組件時，建議使用defer屬性，這樣可以確保腳本在文檔解析完成后再執(zhí)行，避免潛在的執(zhí)行順序問題。自定義組件的標簽使用方式與Vue非常相似，即使用組件在define時指定的名稱，并通過slot="slot-name"來指定插槽的名稱。在Vue項目中，可以通過簡單地導(dǎo)入組件的JavaScript文件（例如import "./components/WebComponent/WebComponent.js";）來使用這些自定義元素。

圖片gqC28資訊網(wǎng)——每日最新資訊28at.com

在實際使用中，可能會遇到一些挑戰(zhàn)：gqC28資訊網(wǎng)——每日最新資訊28at.com

• 通常情況下，自定義組件內(nèi)部和父組件都會包含一些業(yè)務(wù)邏輯，這可能需要父組件向子組件暴露某些方法。例如，在自定義組件被加入到頁面（即在connectedCallback被調(diào)用）之后，可能需要通知父組件，這時可以通過調(diào)用在父組件中定義的this.ready()方法。為了避免connectedCallback在ready方法定義之前執(zhí)行而導(dǎo)致錯誤，推薦在引入自定義組件的腳本標簽中加上defer
• 若需調(diào)用自定義組件的方法，必須確保自定義組件已經(jīng)完全創(chuàng)建好。因此，在示例中通過定義一個ready方法，并在connectedCallback調(diào)用之后執(zhí)行它，或者等待頁面的onload事件觸發(fā)后執(zhí)行。這意味著定義和調(diào)用之間的執(zhí)行順序需要特別注意，以避免由于執(zhí)行順序引起的問
• 監(jiān)聽屬性變化時，應(yīng)使用setAttribute方法來修改屬性值，因為直接修改屬性（如extendP.attributes['size']=200）不會觸發(fā)屬性監(jiān)聽回調(diào)
• 關(guān)于插槽（slot）傳值的問題，目前似乎沒有直接的方法來實現(xiàn)

簡而言之，雖然自定義組件的使用看似簡單直接，但在實際開發(fā)中還是需要注意腳本加載順序、組件通信和屬性監(jiān)聽等細節(jié)問題，以確保組件能夠正確無誤地運行gqC28資訊網(wǎng)——每日最新資訊28at.com

參考文章：https://juejin.cn/post/7309693162368565299gqC28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-87013-0.htmlWeb Components 取代 Vue？我覺得不太行！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： SpringBatch高階應(yīng)用：大數(shù)據(jù)批處理框架實戰(zhàn)指南

下一篇： 用Golang做一個永久阻塞，有哪些小技巧 ？