對於組件化本身的理解

組件化

這裏首先介紹WebComponents標準，如下爲騰訊alloyteam團隊的一篇文章裏的內容。

1. <template>模板能力，WebComponent提供原生的模板能力

2. ShadowDOm封裝組件獨立的內部結構，ShadowDOm能夠理解爲一份有獨立做用域的html片斷。這些html片斷的css環境和主文檔隔離的，各自保持內部的獨立性。也是ShadowDOm的獨特性，使得組件化成爲了可能。

3. 自定義原生標籤

4. imports解決組件間的依賴

5. <link rel="import" href="datapciker.html">

咱們簡單來回顧一下WebCompoents的四部分功能：

1. <template>定義組件的HTML模板能力

2. Shadow Dom封裝組件的內部結構，而且保持其獨立性

3. Custom Element 對外提供組件的標籤，實現自定義標籤

4. import解決組件結合和依賴加載

由此咱們能看出一個真正成熟可靠的組件化方案，須要具有的能力:

• 資源高內聚---- 組件資源內部高內聚，組件資源由自身加載控制

• 做用域獨立----內部結構密封，不與全局或其餘組件產生影響

• 自定義標籤----定義組件的使用方式

• 可相互組合----組件真正強大的地方，組件間組裝整合

• 接口規範化----組件接口有統一規範，或者是生命週期的管理

如今流行的React算是很好的實現了組件化，這裏我想談的是本身對於組件化的理解，探究和嘗試。 我認爲組件化可分爲UI組件化和JS方面的組件化(名字沒有想好)。如下是對於這兩方面的想法:

組件化之UI組件化

所謂UI組件化，能夠想到這裏涉及到了HTML和CSS。

在HTML上，咱們應該保證組件內部的標籤要語義化。組件的自定義標籤具備語義，是對組件的一種說明，概況。簡單的說就是,組件內部標籤對內語義化，組件自定義標籤對外語義化

對內語義化保存自定義標籤具備正確的語義，自定義標籤對外語義是對內部標籤組合出的功能歸納。

在CSS上，保證代碼上的模塊化，具備獨立做用域；內部的佈局，字體的變化(不包括顏色這類是不可控的)只由其最外層容器影響。歸納的說就是，組件內部的佈局只受容器變化影響。在容器不受外部影響變化的前提下，內部容器的樣式不被外部所影響

_可是實際上_，我認爲CSS是這裏最不可控的。咱們能保證在代碼上模塊化，獨立做用域，這是在寫less(或者使用sass)上獲得的體驗，好比下面:

#header{
  h1{
    a{

    }
  }
  nav {
    ul {
      li {

      }
    }
  }
}

在寫less的時候，能感覺到全部的樣式都在#header的做用域下發揮做用。實際上也是這樣的，可是我爲何說CSS是最不可控的呢？這也是我對於CSS畏懼的地方----同一個組件結構是能夠具備不同的樣式的，也就是說在咱們的html結構相同，js實現的一些功能也相同的時候，可是咱們的樣式是能夠不一樣的，佈局，顏色，字體等等。因此一樣是一個導航組件，可能會有不一樣的樣子。這裏我認爲他們算是不一樣的組件，由於組件是由結構，樣式和邏輯構成的。我把沒有樣式的組件叫作 無樣式組件 或 可重複利用用組件 ，而具備樣式的組件叫作 徹底體組件 或者 一次性組件。

PS：這裏只是一個菜鳥(目前實習還未找到)的見解，缺乏實踐，只能本身去想和嘗試，可能內容有"胡言亂語",請大牛能指出問題，虛心求教。明天會繼續探求和嘗試。