【翻譯】爲何web components 如此重要

原文連接： https://blog.revillweb.com/why-web-components-are-so-important-66ad0bd4807a#.gq0m0tt0q

這幾年，關於 web components 的爭論一直不絕於耳。有人說 web components 能夠改變咱們構建網頁的方式，這是爲何呢，是什麼讓 web components 如此重要？

 

web component 是一種建立封裝的、可複用的網頁UI (user interface) 組件的標準化方式。

 

不是一個新概念

 

網頁組件其實很早以前就存在了，其目的是構建可複用且可移植的代碼，這並無什麼新鮮的。

jQuery 插件

 

jQuery 插件多是最先流行的對構建複用代碼的嘗試。咱們能夠很方便地根據它規定的結構來構建一個 jQuery 插件。可是，它存在一些問題。

 

不一樣插件之間常常會形成衝突，並且咱們還要搞明白哪些樣式須要單獨地引入。

 

AngularJS 指令

 

接下來就到了指令，它帶來了另一些好處。隔離每一個組件的 JS 做用域，以防止命名衝突。經過良好的框架支持，更加清晰地建立一個指令。但問題依然存在，樣式仍然須要單獨引入，API 複雜且難以學習。

 

框架組件

 

目前，以 Angular 2 和 React 爲表明的現代框架組件成爲了最新的網頁組件解決方案。它們基於最新的 JavaScript 特性進行構建，例如classes， 這將提供更加優雅的 API。在 Angular 2 裏，開發者能夠利用元數據 (metadata) 來裝飾組件，以告訴框架其它人應該如何使用這個組件。最後，使用Shadow DOM 爲組件提供完整的封裝。

 

---

 

爲何組件化？

 

想要理解爲何 web components 如此重要，必需要先完全明白組件化的目的何在。

 

封裝

 

組件在主應用中應該是徹底獨立的。這樣能夠增長組件的複用性、可測試性和可靠性，由於組件只需負責它的內部，而無需關心外部應用的狀態。

 

組件的做者和用戶均可以輕鬆地更新組件，而無需擔憂會影響到應用的其它部分。

 

拓展性

 

組件之間應該可以互相拓展，好比 web components 和 其它 DOM 元素。這意味着組件做者不須要重複造輪子，而且輕鬆地複用某些功能。

 

組合性

 

利用一些組件能夠構建更復雜的組件甚至是一個完整的應用。減小對 「global」 的依賴可使架構設計更加良好，bug 出現的機率更小，由於應用（或是混合組件）的每一個獨立部分都更好地設計過。

 

複用性

 

最重要的一點，組件應該具備儘量少的依賴和定義清晰的 API ，並可以被輕鬆地複用。

 

---

 

上面提到的三種組件，只有框架組件擁有全部這些特性，可是這還須要使用 Shadow DOM 進行完整的封裝。

利用 Shadow DOM 封裝組件

Shadow DOM 經過一個不受外界 style 影響的子 DOM 樹來提供完整的組件封裝。這意味着，組件做者可以完全控制組件的外觀和用戶的操做。

 

雖然，咱們能夠幸運地使用 Shadow DOM 來封裝 Angular 和 React 組件。

 

---

 

爲何使用web components？

 

若是框架組件已經擁有了這些特性，爲何咱們還須要 web components 呢？有個很重要的緣由：互操做性。

 

框架組件確實很棒，可是也就僅限於它們的生態以內。你不能（輕鬆地）在 React裏 使用 Angular 組件，反之亦然。

 

爲何互操做性很重要？

 

前端開發社區是個異常活躍，天天都在創造大量新工具、新框架、新庫和新技術的地方。可是，這讓咱們難以緊跟他們的步伐。

 

做爲開發者，咱們須要緊跟潮流，改變咱們構建應用的方式，使用那些知足市場或用戶需求的最新技術。可是在過去，某些項目可能已經由於一些舊技術而糾纏不清，升級它們要付出昂貴的代價，甚至須要重寫整個項目。

 

由於 web components 僅僅構建於 web 標準，因此它們在任何生態中都能運行良好。這帶來了許多好處：

 

• 互操做性 — 組件超越框架而存在，能夠在不一樣的技術棧中使用
• 壽命 — 由於組件的互操做性，它們將有更長的壽命，基本不須要爲了適應新的技術而重寫
• 移植性 — 組件能夠在任何地方使用，由於不多甚至沒有依賴，組件的使用障礙要明顯低於依賴庫或者框架的組件

 

不只僅以上這些優勢，一個組件還應該具備如 web components 的交叉兼容性，這在不斷前進變化的 web 世界裏是相當重要的

 

Web Component 庫

 

web component 的標準暫時仍是不穩定的，而且缺乏文檔、範例、教程，想要入門是一件至關困難的事情，尤爲是若是要支持舊式瀏覽器

流行的 web component 庫

由於這些 web component 庫，讓 web component 的使用變得超級簡單，流行的有 Polymer、X-Tag 和Bosonic。它們提供了一系列可以被使用和拓展的組件。正如全部流行的項目同樣，它們有健全的文檔、範例和穩定的社區。

 

可是，這些庫會讓組件擁有一個重要的依賴，使用這些組件的用戶必須去確保這個依賴的存在。

 

隨着 web component 標準的日益清晰，以及一些優秀的例子的出現，我會鼓勵任何人去嘗試原版的 web components，並讓他們確認所需的特性。

 

總結

 

Web components 是如此的重要，由於它讓咱們應用的構建方式能夠迅速地適應變化。咱們能在項目裏使用使人興奮的前端新技術，只要它能知足市場或客戶的需求，而不須要重構咱們龐大的應用。

 

web components 是基於最新的 web 標準，因此它的的互操做性，可讓咱們的代碼擁有更長的壽命。最終，由於更少的依賴和前置條件，咱們的組件能夠知足更多人的需求。

 

Web components 萬事俱備只欠東風，讓咱們立刻就使用吧。我正在努力寫更多的例子和教程，來幫助社區更快地接受 web components。

 

聯繫我 @RevillWeb 。