Javascript 從星球軌道的高度講起

這一部分我們將會(huì)講述關(guān)于「Web Components」的一系列現(xiàn)代標(biāo)準(zhǔn)。

到目前為止，這些標(biāo)準(zhǔn)仍然在制定中。其中一些特性已經(jīng)被很好地支持并集成到了現(xiàn)代 HTML/DOM 標(biāo)準(zhǔn)中，但是還有部分特性仍然處在草案階段。你可以在任何瀏覽器中嘗試一些例子，Google Chrome 可能是對(duì)這些新特性支持得最好的瀏覽器。猜測(cè)可能是因?yàn)?Google 公司的人本身就是很多相關(guān)標(biāo)準(zhǔn)的支持者。

共通之處在于……

整個(gè)組件化的概念并不是最新才提出的。很多框架和其他地方已經(jīng)廣泛地應(yīng)用了組件化的設(shè)計(jì)。

在我們開始探討實(shí)現(xiàn)細(xì)節(jié)之前，先讓我們看看人類的偉大成就：

這是國(guó)際空間站（ISS）。

這是其組成結(jié)構(gòu)（大致的）：

這個(gè)國(guó)際空間站：

• 由許多組件構(gòu)成。
• 各個(gè)組件都由很多的更小的部分組成，
• 組件都非常復(fù)雜，遠(yuǎn)比大部分網(wǎng)站更復(fù)雜。
• 國(guó)際化的組件開發(fā)團(tuán)隊(duì)，整個(gè)工作由不同國(guó)家、說(shuō)著不同語(yǔ)言的人共同完成。

……并且這個(gè)家伙能飛，它讓人類在太空中能夠生存！

這些復(fù)雜的設(shè)備是如何被創(chuàng)建的？

我們可以從中借鑒哪些原則，讓我們的開發(fā)項(xiàng)目同樣的可靠并且可大規(guī)?；?？或者至少讓我們可以接近這些目標(biāo)。

組件化架構(gòu)

眾所周知，開發(fā)復(fù)雜軟件的原則是：不要讓軟件復(fù)雜。

如果某個(gè)部分變得復(fù)雜了 —— 將其拆分成更簡(jiǎn)單的部分，再以最簡(jiǎn)明的方式組合起來(lái)。

只有讓復(fù)雜的事情簡(jiǎn)單化的架構(gòu)才是好架構(gòu)。

我們可以把用戶界面拆分為若干可視化組件：每個(gè)組件都在頁(yè)面上占有一塊位置，可以執(zhí)行一個(gè)明確的任務(wù)，并且可以和其他組件區(qū)分開。

接下來(lái)看一個(gè)實(shí)際的網(wǎng)站的例子，比如 Twitter。

非常自然地，可以拆分為幾個(gè)組件：

1. 頂部導(dǎo)航欄。
2. 用戶信息。
3. 關(guān)注推薦。
4. 提交表格。
5. （6，7也是） —— 消息。

組件也可以包含子組件，比如消息組件可能是更高階組件「消息列表」的子組件。可點(diǎn)擊的用戶頭像可能也是一個(gè)組件，這樣的例子還有很多。

我們?nèi)绾蝿澐忠粋€(gè)組件呢？直覺(jué)、經(jīng)驗(yàn)和常識(shí)可以幫助我們完成這件事。通常情況下，如果一個(gè)獨(dú)立可視化實(shí)體，我們可以描述其可以做什么和如何在頁(yè)面上交互，那么就可以將其劃分為一個(gè)組件。在上面的例子中，這個(gè)頁(yè)面存在幾個(gè)模塊，每個(gè)模塊都有自己的角色，所以把它們劃分為組件是合理的。

一個(gè)組件有：

• 自己的 JavaScript 類。
• DOM 結(jié)構(gòu)，并且只由自己的類管理，無(wú)法被外部代碼操作。（「封裝」原則）。
• CSS 樣式，作用在這個(gè)組件上。
• API：事件，類方法等等，讓組件可以與其他組件交互。

再說(shuō)一遍，整個(gè)「組件化」的概念并不是什么特別的東西。

現(xiàn)在已經(jīng)有了很多框架和開發(fā)方法論可以實(shí)現(xiàn)組件化，它們各個(gè)都有自己的賣點(diǎn)。通常情況下，采用特殊的 CSS 類命名和一些規(guī)范，已經(jīng)可以帶來(lái)「組件化的感覺(jué)」 —— 即 CSS 作用域和 DOM 封裝。

而現(xiàn)在瀏覽器已經(jīng)原生支持了「Web Components」，我們就可以不用再自己去模擬組件化的結(jié)構(gòu)了。

• Custom elements —— 用于自定義 HTML 元素.
• Shadow DOM —— 為組件創(chuàng)建內(nèi)部 DOM，它對(duì)外部是不可見(jiàn)的。
• CSS Scoping —— 申明僅應(yīng)用于組件的 Shadow DOM 內(nèi)的樣式。
• Event retargeting 以及更多的小東西，讓自定義組件更適用于開發(fā)工作。

在下一篇中我們將會(huì)更細(xì)致地講述「Custom Elements」 —— 一個(gè)已經(jīng)被很廣泛支持的 Web Components 重要組成部分。