Web Components實(shí)踐：如何搭建一個(gè)框架無關(guān)的AI組件庫

作者：京東科技牛志偉

一、讓人又愛又恨的Web Components

Web Components是一種用于構(gòu)建可重用的Web元素的技術(shù)。它允許開發(fā)者創(chuàng)建自定義的HTML元素，這些元素可以在不同的Web應(yīng)用程序中重復(fù)使用，并且具有自己的樣式、行為和功能。

Web Components并非一項(xiàng)新技術(shù)，而是一組持續(xù)演進(jìn)的、由W3C標(biāo)準(zhǔn)化的組件化API。最早可以追溯到2011年左右，大約在2016年左右各個(gè)瀏覽器才實(shí)現(xiàn)了Custom Element V1版本。然而，在同一時(shí)期，諸如Vue和React等組件化框架已經(jīng)開始主導(dǎo)前端開發(fā)生態(tài)。

盡管近幾年Web Components標(biāo)準(zhǔn)和技術(shù)都趨于成熟，但早期面臨的兼容性問題以及后來Vue和React等MVVM框架的崛起，導(dǎo)致Web Components領(lǐng)域一直處于低調(diào)狀態(tài)。接下來，我們將從Web Components的發(fā)展歷程、優(yōu)勢以及開發(fā)中面臨的挑戰(zhàn)三個(gè)方面更深入地了解Web Components。

1、Web Components發(fā)展歷程

?2011年：Google發(fā)布了Chrome瀏覽器，并提出了“Shadow DOM”概念，這是Web Components的一個(gè)重要組成部分。

?2013年：谷歌工程師Alex Komoroske在Google I/O大會(huì)上首次提出了Web Components的概念，并推動(dòng)了相關(guān)標(biāo)準(zhǔn)的制定。

?2014年：W3C發(fā)布了Web Components的規(guī)范草案，其中包括四個(gè)主要技術(shù)：Custom Elements、Shadow DOM、HTML Templates和HTML Imports。

?2015年：Web Components的規(guī)范逐漸得到瀏覽器廠商的支持，Chrome、Firefox、Safari等主流瀏覽器開始逐步實(shí)現(xiàn)相關(guān)功能。

?2018年：Web Components逐漸成為前端開發(fā)的主流技術(shù)之一，越來越多的開發(fā)者開始使用Web Components來構(gòu)建可重用的組件。

?至今：Web Components技術(shù)不斷發(fā)展和完善，越來越多的框架和庫開始支持Web Components，使其在前端開發(fā)中發(fā)揮更大的作用。

2、Web Components有哪些優(yōu)勢

?封裝性：Web Components 具有良好的封裝性，可以將頁面中的功能和樣式封裝在一個(gè)自定義元素內(nèi)部，避免全局作用域的污染，提高了代碼的可維護(hù)性和可重用性。

?跨框架兼容：Web Components 是基于 Web 標(biāo)準(zhǔn)的技術(shù)，可以在任何支持 Custom Elements 和 Shadow DOM 的現(xiàn)代瀏覽器中使用，與各種前端框架和庫兼容性良好。

?標(biāo)準(zhǔn)化：Web Components 的規(guī)范由 W3C 組織制定，具有較高的標(biāo)準(zhǔn)化程度，有利于統(tǒng)一前端開發(fā)的規(guī)范和實(shí)踐，提高了代碼的可維護(hù)性和可移植性。

?性能優(yōu)勢：通過使用 Shadow DOM 技術(shù)，Web Components 可以實(shí)現(xiàn)更好的性能優(yōu)化，避免不必要的重繪和重排，提高頁面的渲染效率和用戶體驗(yàn)。

目前，前端開發(fā)中有許多流行的框架可供選擇，如React、Vue、Angular、Solid、Svelte、Preact等。框架的選擇是一個(gè)復(fù)雜的決策過程。當(dāng)框架版本升級時(shí)，項(xiàng)目可能需要面臨重構(gòu)的問題。例如，從Vue2升級到Vue3可能需要付出較大的改造成本。如果不進(jìn)行升級，就無法使用最新特性，甚至可能面臨框架舊版本不再維護(hù)的尷尬局面。在這種情況下，Web Components 的框架無關(guān)性可以在一定程度上改善這種局面。

就性能而言，以將 React 組件轉(zhuǎn)換為 Web Components 為例，可以優(yōu)化執(zhí)行過程，減少阻塞，提高頁面性能。在普通的 React 組件中，初次執(zhí)行時(shí)需要一次性完成所有必須的節(jié)點(diǎn)邏輯，這些邏輯的執(zhí)行會(huì)同步占用在 JavaScript 的主線程上。當(dāng)頁面變得足夠復(fù)雜時(shí)，一些非核心邏輯可能會(huì)阻塞后面核心邏輯的執(zhí)行。而通過使用 Web Components 優(yōu)化 React 組件，執(zhí)行過程會(huì)變得更簡潔。例如，注冊一個(gè)復(fù)雜的邏輯組件時(shí)，在 React 執(zhí)行時(shí)只需執(zhí)行一個(gè) createElement 語句，創(chuàng)建組件只需要 1-2 微秒即可完成。真正的邏輯不會(huì)立即執(zhí)行，而是等到“核心任務(wù)”執(zhí)行完畢后再執(zhí)行，甚至可以在合適的時(shí)機(jī)再執(zhí)行，從而降低 Diff 成本。

3、使用Web Components開發(fā)的痛點(diǎn)

雖然Web Components具有許多令人喜歡的優(yōu)點(diǎn)，但在實(shí)際開發(fā)中也存在一些棘手的問題。以下是幾個(gè)典型問題：

?原生開發(fā)難題：Web Components是一項(xiàng)原生技術(shù)，因此在組件編寫過程中需要回歸到原生開發(fā)。事件處理、狀態(tài)管理等方面都需要自行處理。盡管大多數(shù)框架都提供了對Web Components的封裝方案，但使用這些方案又需要引入相應(yīng)框架的運(yùn)行時(shí)，這導(dǎo)致脫離了框架無關(guān)性這一最大優(yōu)勢。

?Form表單問題：在Shadow DOM中，包含、或