摘要：純原生的組件化模塊化的一次小小的嘗試，用到了如下幾個(gè)新特性對標(biāo)簽結(jié)構(gòu)的一個(gè)封裝，真正意義上的組件，能保證中的元素不會(huì)被外界影響，內(nèi)部也不會(huì)影響到外部的行為，變成了一個(gè)獨(dú)立的模塊。

純原生的組件化、模塊化的一次小小的嘗試，用到了如下幾個(gè)新特性：
shadown-DOM 對HTML標(biāo)簽結(jié)構(gòu)的一個(gè)封裝，真正意義上的組件，能保證 shadow-DOM 中的DOM元素不會(huì)被外界影響，內(nèi)部也不會(huì)影響到外部的行為，變成了一個(gè)獨(dú)立的模塊。  
custom-elements 可以在瀏覽器中注冊自定義的標(biāo)簽來使用，類似這樣的效果，標(biāo)簽內(nèi)容基于兩種形式：1. 普通子元素 2. shadow-DOM  
custom-events 使用各種自定義事件輔助完成組件之間的通訊  
ES-module 為瀏覽器原生支持的模塊化的一種方案，直接在瀏覽器里使用import和export這類語法，以 module 的方式來引入 js 文件。  
幾個(gè)算是比較新的事物，聚集在一起確實(shí)可以做點(diǎn)兒好玩的東西出來。

想象有這樣的一個(gè)場景，類似資料卡的東東，需要在頁面中展示頭像和用戶的名稱。
頭像在左，寬高100px，圓形；
姓名在右，字號(hào)16px，垂直居中。

這算是一段很簡單的CSS了，實(shí)現(xiàn)起來大概是這樣的：

  
  
Jarvis

此時(shí)，我們完成了需求，一切都沒有什么不對的，但是一個(gè)很現(xiàn)實(shí)的問題。
不會(huì)有這么簡單的頁面存在的，就算簡潔如 Google 首頁，也用到了400左右的DOM元素。
很難保證其他資源文件中的CSS、JS會(huì)不會(huì)對上邊的DOM產(chǎn)生影響。
就比如如果有一個(gè)main.css文件中寫了一行：p { color: red;}，那么這條CSS就會(huì)對我們上邊所寫的.info-name元素產(chǎn)生影響，導(dǎo)致文本顏色變?yōu)榧t色。

這種問題經(jīng)常會(huì)出現(xiàn)在一些需要用到第三方插件的頁面中，很可能對方提供的CSS會(huì)影響到你的DOM元素，也很有可能你的CSS會(huì)對插件中的DOM造成影響。

解決這個(gè)問題有一種簡單的辦法，那就是All with !important，使用shadow-DOM。

目前瀏覽器中就有一些shadow-DOM的例子：

甚至

這些元素在 Chrome 上的構(gòu)建都是采用了shadow-DOM的方式，但是默認(rèn)情況下在開發(fā)者工具中是看不到這些元素的。

開啟shadow-DOM的流程： Chrome DevTools -> Settings -> 默認(rèn) Preferences 面板中找到 Elements -> 點(diǎn)擊勾選 Show user agent shadow DOM 即可

這時(shí)候就可以通過開發(fā)者工具查看到shadow-DOM的實(shí)際結(jié)構(gòu)了。

shadow-DOM的一個(gè)特點(diǎn)，shadow 里邊所有的DOM元素不會(huì)被外界的代碼所影響，這也就是為什么video和audio的 UI 難以自定義的原因了-.-。

shadow-DOM的創(chuàng)建必須要使用JavaScript才能完成，我們需要在文檔中有一個(gè)用于掛在shadow-DOM的真實(shí)元素，也被稱為host。
除此之外的創(chuàng)建過程，就可以像普通DOM樹那樣的增刪改子元素了。

let $tag = document.querySelector("XXX") // 用于掛載的真實(shí)元素

let shadow = $tag.attachShadow({ mode: "open" }) // 掛載shadow-DOM元素，并獲取其根元素

attachShadow中的mode參數(shù)有兩個(gè)有效的取值，open和closed，用來指定一個(gè) shadow-DOM 結(jié)構(gòu)的封裝模式。

當(dāng)值為open時(shí)，則我們可以通過掛載時(shí)使用的真實(shí)元素獲取到shadow-DOM。

$tag.shadowRoot; // shadow-DOM的root元素

當(dāng)值為closed時(shí)，則表示外層無法獲取shadow-DOM。

$tag.shadowRoot; // null

后續(xù)的操作就與普通的DOM操作一致了，各種append、remove、innerHTML都可以了。

let $shadow = $tag.attachShadow({ mode: "open" })

let $img = document.createElement("img")
$shadow.appendChild($img)  // 添加一個(gè)img標(biāo)簽到shadow-DOM中

$shadow.removeChild($img) // 將img標(biāo)簽從shadow-DOM中移除

$img.addEventListener("click", _ => console.log("click on img"))

$shadow.innerHTML = `
  

    
Some Text
  
`

需要注意的一點(diǎn)是，shadow-DOM本身并不是一個(gè)實(shí)際的標(biāo)簽，不具備定義CSS的能力。
但是綁定事件是可以的

$shadow.appendChild("
") // 假裝add了一個(gè)標(biāo)簽
$shadow.appendChild("
") // 假裝add了一個(gè)標(biāo)簽

// 最后得到的結(jié)構(gòu)就是
// <外層容器>
//   

//   

// 

// 沒有class相關(guān)的屬性
$shadow.classList // undefined
$shadow.className // undefined
$shadow.style     // undefined
// 綁定事件是沒問題的
$shadow.addEventListener("click", console.log)

shadow-DOM也會(huì)有CSS的屬性繼承，而不是完全的忽略所有外層CSS

  #shadow
    
Text
    
Text
  #shadow

所以說，對于shadow-DOM，CSS只是屏蔽了直接命中了內(nèi)部元素的那一部分規(guī)則。
比如說寫了一個(gè)* { color: red; }，這個(gè)規(guī)則肯定會(huì)生效的，因?yàn)?b>*代表了全部，實(shí)際上shadow-DOM是從外層host元素繼承過來的color: red，而不直接是命中自己的這條規(guī)則。

我們使用shadow-DOM來修改上邊的資料卡。

在線demo  
源碼地址

P.S. 在 shadow-DOM 內(nèi)部的 css，不會(huì)對外界所產(chǎn)生影響，所以使用 shadow-DOM 就可以肆意的對 class 進(jìn)行命名而不用擔(dān)心沖突了。

如果現(xiàn)在在一個(gè)頁面中要展示多個(gè)用戶的頭像+姓名，我們可以將上邊的代碼進(jìn)行封裝，將 className，appendChild之類的操作放到一個(gè)函數(shù)中去，類似這樣的結(jié)構(gòu)：

在線demo  
源碼地址

function initShadow($host, { isOpen, avatar, name }) {
  let $shadow = $host.attachShadow({ mode: isOpen ? "open" : "closed" });

  // ...省略各種操作
  $avatar.src = avatar
  $name.innerHTML = name
}

initShadow(document.querySelector("#info1"), {
  avatar: "https://avatars1.githubusercontent.com/u/9568094?v=4",
  name: "Jarvis"
});
initShadow(document.querySelector("#info2"), { 
  isOpen: true,
  avatar: "https://avatars1.githubusercontent.com/u/9568094?v=4",
  name: "Jarvis" 
})

這樣就實(shí)現(xiàn)了一個(gè)簡單的組件，可以在需要用到的地方，直接傳入一個(gè)掛載的DOM即可。

就像上邊的shadow-DOM，已經(jīng)在文檔樹中看不到組件的細(xì)節(jié)了，任何代碼也都不會(huì)影響到它的結(jié)構(gòu)（open模式下的獲取root操作除外）。
但是，這樣在文檔中是存在一個(gè)用來掛在shadow-DOM的根元素，這個(gè)根元素依然是一個(gè)普通的HTML標(biāo)簽。
如果是一個(gè)大型頁面中，存在了N多類似的組件，搜索一下，全是

custom-elements支持同時(shí)支持普通標(biāo)簽的封裝以及shadow-DOM的封裝，但兩者不能共存。

首先我們需要有一個(gè)繼承了HTMLElement的類。
然后需要將其注冊到當(dāng)前環(huán)境中。

class Info extends HTMLElement {}

customElements.define(
  "cus-info", // 標(biāo)簽名
  Info        // 標(biāo)簽對應(yīng)的構(gòu)造函數(shù)
)

在調(diào)用define時(shí)還有一個(gè)可選的第三個(gè)參數(shù)，用來設(shè)置自定義標(biāo)簽繼承自某個(gè)原生標(biāo)簽。
兩者在后續(xù)的標(biāo)簽使用上稍微有些區(qū)別：

P.S. 自定義的標(biāo)簽的注冊名至少要包含一個(gè)-
結(jié)合場景來選擇是否使用extends，個(gè)人不建議使用，因?yàn)榭雌饋頃?huì)舒服一些

如果是針對普通的一組標(biāo)簽進(jìn)行封裝，就是解決了一些相同功能的組件需要在頁面中粘來粘去的問題。

在線demo  
源碼地址

  
native text
  

實(shí)現(xiàn)類似這樣的效果：

P.S. 當(dāng)一個(gè)元素激活了shadow-DOM以后，里邊的普通子元素都會(huì)變得不可見，但是使用DOM API依然可以獲取到

在線demo  
源碼地址

  
native text
  

自定義標(biāo)簽并不只是一個(gè)讓你多了一個(gè)標(biāo)簽可以用。
注冊的自定義標(biāo)簽是有一些生命周期函數(shù)可以設(shè)置的，目前有效的事件為：

connectedCallback 標(biāo)簽被添加到文檔流中觸發(fā)

disconnectedCallback 標(biāo)簽被從文檔流中移除時(shí)觸發(fā)

adoptedCallback 標(biāo)簽被移動(dòng)時(shí)觸發(fā)，現(xiàn)有的API貌似沒有一個(gè)可以觸發(fā)這個(gè)事件的，因?yàn)橄?b>appendChild或者insertBefore這一類的，對于已經(jīng)存在的DOM元素都是先移除后新增的，所以不存在有直接移動(dòng)的行為

attributeChangedCallback 增刪改元素屬性時(shí)會(huì)觸發(fā) 需要提前設(shè)置observedAttributes，才能監(jiān)聽對應(yīng)的屬性變化

一個(gè)觸發(fā)各種事件的簡單示例：

在線demo  
源碼地址

P.S. 如果需要處理DOM結(jié)構(gòu)以及綁定事件，推薦在connectedCallback回調(diào)中執(zhí)行
想要attributeChangedCallback生效，必須設(shè)置observedAttributes來返回該標(biāo)簽需要監(jiān)聽哪些屬性的改變

接下來就是使用custome-elements結(jié)合著shadow-DOM來完成資料卡的一個(gè)簡單封裝。
因?yàn)?b>shadow-DOM版本的組件相對更獨(dú)立一些，所以這里采用的是shadow-DOM的方式進(jìn)行封裝。
大致代碼如下：

在線demo  
源碼地址

針對上邊的initShadow調(diào)用也只是更換了avatar和name字段的來源罷了。
現(xiàn)在，我們需要在頁面中使用封裝好的資料卡，僅僅需要注冊一個(gè)自定義標(biāo)簽，然后在HTML中寫對應(yīng)的標(biāo)簽代碼即可

因?yàn)槭遣捎昧俗?b>html標(biāo)簽的方式，其實(shí)這個(gè)是對采用Server端模版渲染特別友好的一件事兒。
如果有使用服務(wù)端渲染的頁面，可能會(huì)動(dòng)態(tài)的拼接一些DOM元素到請求的返回值中。
為了應(yīng)用一些樣式，可能需要在模版中添加各種className，也很有可能手一抖之類的就會(huì)導(dǎo)致標(biāo)簽沒有閉合、結(jié)構(gòu)錯(cuò)亂，或者某些屬性拼寫出錯(cuò)，各種233的問題。
比如插入一些表單元素，之前可能是這樣的代碼：

router.get("/", ctx => {
  ctx.body = `
    
      

        

          Account
          
        
        

          Account
          
        
        Login
      
    
  `
})

在使用了custom-elements以后，Server端的記憶成本也會(huì)降低很多。
Server端只需要表明這里有一個(gè)表單元素就夠了，具體渲染成什么樣，還是交由前端來決定。

router.get("/", ctx => {
  ctx.body = `
    
      

        
        
        
      
    
  `
})

如果在頁面中使用很多的自定義組件，必然會(huì)遇到組件之間的通訊問題的。
比如我一個(gè)按鈕點(diǎn)擊了以后如何觸發(fā)其他組件的行為。
因?yàn)槭羌冊陌姹?，所以天然的支?b>addEventListener，我們可以直接使用custom-events來完成組件之間的通訊。

使用自定義事件與原生DOM事件唯一的區(qū)別就在于需要自己構(gòu)建Event實(shí)例并觸發(fā)事件：

document.body.addEventListener("ping", _ => console.log("pong")) // 設(shè)置事件監(jiān)聽

document.body.dispatchEvent(new Event("ping")) // 觸發(fā)事件

現(xiàn)在頁面中有兩個(gè)組件，一個(gè)容器，容器中包含一個(gè)文本框和數(shù)個(gè)按鈕，點(diǎn)擊按鈕以后會(huì)將按鈕對應(yīng)的文字輸出到文本框中：

在線demo  
源碼地址

上邊是在List中循環(huán)了自己的子節(jié)點(diǎn)，然后依次綁定事件，這種處理是低效的，而且是不靈活的。
如果有新增的子元素，則無法觸發(fā)對應(yīng)的事件。
所以，我們可以開啟事件的冒泡來簡化上邊的代碼：

在線demo  
源碼地址

class CusList extends HTMLElement {
  connectedCallback() {
    let $output = this.querySelector("#output")

    this.addEventListener("check", event => { // 注冊自定義事件的監(jiān)聽
      $output.value = event.target.innerText // 效果一樣，因?yàn)閑vent.target就是觸發(fā)dispatchEvent的那個(gè)DOM對象
    })
  }
}
class CusBtn extends HTMLElement {
  connectedCallback() {
    let { text } = this.dataset

    let $text = document.createElement("p")
    $text.innerHTML = text

    $text.addEventListener("click", _ => {
      this.dispatchEvent(new Event("check"), {
        bubbles: true // 啟用事件冒泡
      }) // 觸發(fā)自定義事件
    })

    this.appendChild($text)
  }
}

ES-module是原生模塊化的一種實(shí)現(xiàn)，使用ES-module可以讓我們上邊組件的調(diào)用變得更方便。
這里有之前的一篇講解ES-module的文章：傳送陣
所以，不再贅述一些module相關(guān)的基礎(chǔ)，直接將封裝好的組件代碼挪到一個(gè)js文件中，然后在頁面中引用對應(yīng)的js文件完成調(diào)用。

在線demo  
源碼地址

module.js

export default class InfoCard extends HTMLElement { }

customElements.define("info-card", InfoCard)

index.html

第一眼看上去，這樣做好像與普通的js腳本引入并沒有什么區(qū)別。
確實(shí)單純的寫這一個(gè)組件的話，是沒有什么區(qū)別的。

但是一個(gè)現(xiàn)實(shí)中的頁面，不會(huì)只有這么一個(gè)組件的，假設(shè)有這樣的一個(gè)頁面，其中包含了三個(gè)組件：

我們在使用list時(shí)要保證card已經(jīng)加載完成，在使用tab時(shí)要保證list已經(jīng)加載完成。
最簡單的方法就是等到所有的資源全部加載完成后再執(zhí)行代碼，主流的webpack打包就是這么做的。
但是，這樣做帶來的后果就是，明明list和card加載完畢后就可以處理自己的邏輯，注冊自定義標(biāo)簽了，卻還是要等外層的tab加載完畢后再執(zhí)行代碼。
這個(gè)在使用webpack打包的React和Vue這類框架上邊就是很明顯的問題，如果打包完的js文件過大，幾百k，甚至數(shù)兆。
需要等到這個(gè)文件全部下載完畢后才會(huì)開始運(yùn)行代碼，構(gòu)建頁面。

我們完全可以利用下載其他組件時(shí)的空白期來執(zhí)行當(dāng)前組件的一些邏輯，而使用webpack這類打包工具卻不能做到，這很顯然是一個(gè)時(shí)間上的浪費(fèi)，而ES-module已經(jīng)幫忙處理了這件事兒，module代碼的執(zhí)行是建立在所有的依賴全部加載完畢的基礎(chǔ)上的。

當(dāng)card和list加載完畢后，list就會(huì)開始執(zhí)行代碼。而此時(shí)的tab可能還在加載過程中，等到tab加載完畢開始執(zhí)行時(shí)，list已經(jīng)注冊到了document上，就等著被調(diào)用了，從某種程度上打散了代碼執(zhí)行過于集中的問題。
可能之前頁面加載有200ms在下載文件，有50ms在構(gòu)建組件，50ms渲染頁面（數(shù)值純屬扯淡，僅用于舉例）。
有些組件比較輕量級，可能用了20ms就已經(jīng)下載完了文件，如果它沒有依賴其他的module，這時(shí)就會(huì)開始執(zhí)行自身組件的一些代碼，生成構(gòu)造函數(shù)、注冊自定義組件到文檔中，而這些步驟執(zhí)行的過程中可能瀏覽器還在下載其他的module，所以這就是兩條并行的線了，讓一部分代碼執(zhí)行的時(shí)間和網(wǎng)絡(luò)請求消耗的時(shí)間所重疊。

舉一個(gè)現(xiàn)實(shí)中的例子：  
你開了一家飯店，雇傭了三個(gè)廚師，一個(gè)做番茄炒蛋、一個(gè)做皮蛋豆腐、還有一個(gè)做拍黃瓜，因?yàn)閳龅赜邢?，所以三個(gè)廚師共用一套炊具。（單線程）  
今天第一天開業(yè)，這時(shí)候來了客人點(diǎn)了這三樣菜，但是菜還在路上。  
webpack：「西紅柿、雞蛋、皮蛋、豆腐、黃瓜」全放到一塊給你送過來，送到了以后，三個(gè)廚師輪著做，然后給客人端過去。
ES-module：分撥送，什么菜先送過來就先做哪個(gè)，哪個(gè)先做完給客人端哪個(gè)。

在線demo  
源碼地址

cus-elements-info-list.js

import InfoCard from "./cus-elements-info-card.js"

export default class InfoList extends HTMLElement {
  connectedCallback() {
    // load data
    let data = [
      {
        avatar: "https://avatars1.githubusercontent.com/u/9568094?v=4",
        name: "Jarvis"
      },
      {
        avatar: "https://avatars1.githubusercontent.com/u/9568094?v=4",
        name: "Jarvis"
      },
      {
        avatar: "https://avatars1.githubusercontent.com/u/9568094?v=4",
        name: "Jarvis"
      }
    ]
    // laod data end

    initShadow(this, { data })
  }
}

function initShadow($host, { data, isOpen }) {
  let $shadow = $host.attachShadow({ mode: isOpen ? "open" : "closed" })

  let $style = document.createElement("style")
  let $wrap = document.createElement("div")

  $style.textContent = `
    .list { display: flex; flex-direction: column; }
  `

  $wrap.className = "list"

  // loop create
  data.forEach(item => {
    let $item = new InfoCard()
    $item.setAttribute("avatar", item.avatar)
    $item.setAttribute("name", item.name)

    $wrap.appendChild($item)
  })

  $shadow.appendChild($style)
  $shadow.appendChild($wrap)
}

customElements.define("info-list", InfoList)

new Component與document.createElement效果一樣，用于在不知道組件的注冊名的情況下使用

shadow-DOM無法與普通的子元素共存，設(shè)置attachShadow以后會(huì)導(dǎo)致普通子元素在頁面不可見，但是DOM依然保留

custom-elements的注冊名必須要包含一個(gè)-

custom-elements的constructor函數(shù)觸發(fā)時(shí)不能保證DOM已經(jīng)正確渲染完畢，對DOM進(jìn)行的操作應(yīng)該放到connectedCallback中

custom-elements組件的屬性變化監(jiān)聽需要提前配置observedAttributes，沒有通配符之類的操作

ES-module相關(guān)的操作只能在type="module"中進(jìn)行

ES-module的引用是共享的，即使十個(gè)文件都import了同一個(gè)JS文件，他們拿到的都是同一個(gè)對象，不用擔(dān)心浪費(fèi)網(wǎng)絡(luò)資源

一個(gè)簡單的TODO-LIST的實(shí)現(xiàn)：

在線demo  
源碼地址

瀏覽器原生支持的功能越來越豐富，ES-module、custom-elements、shadow-DOM以及各種新鮮的玩意兒；
web原生的組件化、模塊化，期待著普及的那一天，就像現(xiàn)在可以放肆的使用qsa 、fetch，而不用考慮是否需要引入jQuery來幫助做兼容一樣（大部分情況下）。

shadow-DOM | MDN

custom-elements | MDN

custom-events | MDN

ES-module | MDN

倉庫地址