Web Components系列（一） —— 概述详情 - 前端,組件化,component 編程三昧日志

前言

如果我們選擇不使用任何框架的情況下來進行前端開發，那麼針對一個完整的網頁，我們需要開發以下代碼：

就幾年之前來説，HTML 部分的代碼基本不存在複用的可能，這就導致我們可能需要開發大量重複的 HTML 代碼，即使使用 CV 法，代碼的冗餘卻是不可避免的。

近幾年，我們在使用前端框架（比如 Vue）時，都知道有個“組件”的概念，通過使用組件可以提高代碼複用率，一次創建多處使用，在一定程度上簡化了開發流程。

既然組件化開發這麼流行，又能給開發帶來極大的便利，那麼瀏覽器就當然有理由來原生支持組件化，Web Components 就應運而生，它的誕生使得瀏覽器有了原生支持組件化的能力。

何為 Web Components ？顧名思義，就是“網頁組件”，引用 MDN 上的話來説就是：

Web Components 是一套不同的技術，允許您創建可重用的定製元素（它們的功能封裝在您的代碼之外）並且在您的web 應用中使用它們。

注意其中的關鍵詞：可重用、定製，這也是我們樂於使用第三方框架中組件功能的理由。

Web Components不是單一的規範，而是一系列的技術組成，包括Custom Element、Shadow DOM、HTML templates 三種技術規範。它們可以一起使用來創建封裝功能的定製元素，可以在你喜歡的任何地方重用，不必擔心代碼衝突。

一組JavaScript API，允許您定義custom elements及其行為，然後可以在您的用户界面中按照需要使用它們。

一組JavaScript API，用於將封裝的“影子”DOM樹附加到元素（與主文檔DOM分開呈現）並控制其關聯的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔心與文檔的其他部分發生衝突。

<templete> 和 <slot> 元素使您可以編寫不在呈現頁面中顯示的標記模板。然後它們可以作為自定義元素結構的基礎被多次重用。

兼容性是檢驗一項技術能否用於生產環境的標準，我們來看一下 Web Components 各項技術的兼容性：

通過上圖可以看到，Web Components 在主流瀏覽器上的支持已經極其良好，如果對向下兼容要求不嚴格的話，完全可以在生產環境中使用了。

技術的發展總是以“提供便利”為方向的，Web Components 的出現可以説是前端技術發展的必然結果，而我們需要做的就是想辦法善用它為自己服務。

~ 本文完，感謝閲讀！

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！