本文轉載自：衆成翻譯
譯者：morning
鏈接：http://www.zcfy.cc/article/695
原文：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 通過一個不受外界 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 的使用變得超級簡單，流行的有 Polymer、X-Tag 和 Bosonic。它們提供了一系列能夠被使用和拓展的組件。正如所有流行的項目一樣，它們有健全的文檔、範例和穩定的社區。
但是，這些庫會讓組件擁有一個重要的依賴，使用這些組件的用戶必須去確保這個依賴的存在。
隨着 web component 標準的日益清晰，以及一些優秀的例子的出現，我會鼓勵任何人去嘗試原版的 web components，並讓他們確認所需的特性。
總結
Web components 是如此的重要，因爲它讓我們應用的構建方式可以迅速地適應變化。我們能在項目裏使用令人興奮的前端新技術，只要它能滿足市場或客戶的需求，而不需要重構我們龐大的應用。
web components 是基於最新的 web 標準，所以它的的互操作性，可以讓我們的代碼擁有更長的壽命。最終，因爲更少的依賴和前置條件，我們的組件可以滿足更多人的需求。
Web components 萬事俱備只欠東風，讓我們馬上就使用吧。我正在努力寫更多的例子和教程，來幫助社區更快地接受 web components。
聯繫我 @RevillWeb 。