排除第三方j(luò)s的使用者中如何寫(xiě)高效代碼？

js是前端很火的工作，可以對(duì)文章框架與源碼對(duì)比解析，各種針對(duì)框架層出不窮...
但是目前針對(duì)于js的各種文章對(duì)框架進(jìn)行對(duì)比、源碼解析以。GitHub 上 star 數(shù)量高速增長(zhǎng)。各種針對(duì)框架的培訓(xùn)課程層出不窮。……

另一方面是因?yàn)橛盟鼈冮_(kāi)發(fā)非常方便：

利用腳手架工具幾行命令就可以快速搭建項(xiàng)目。減少大量的重復(fù)代碼，結(jié)構(gòu)更加清晰，可讀性強(qiáng)。有豐富的UI庫(kù)和插件庫(kù)?！?br/>

但是一則 GitHub 放棄使用 JQuery 的消息讓我開(kāi)始思考：

第三方j(luò)s除了帶來(lái)便利之外還有哪些副作用？拋棄第三方j(luò)s我們還能寫(xiě)出高效的代碼嗎？

第三方j(luò)s的副作用雪球滾起來(lái)

如果現(xiàn)在讓你開(kāi)發(fā)一個(gè)項(xiàng)目，你會(huì)怎么做？假設(shè)你熟悉的是React，那么用可以用create-react-app快速搭建一個(gè)項(xiàng)目。

很好，react、react-dom、react-router-dom 已經(jīng)寫(xiě)入了package.json，不過(guò)事情還沒(méi)完。http請(qǐng)求怎么處理呢？引入axios吧。日期怎么處理？引入 moment 或 day 吧?！?br/>

要知道，這種“拿來(lái)主義”是會(huì)“上癮”的，所以第三方依賴(lài)就像一個(gè)滾動(dòng)的雪球，隨著開(kāi)發(fā)不斷增加，最后所占體積越來(lái)越大。如果用 webpack-bundle-analyzer 工具來(lái)分析項(xiàng)目的話(huà)，會(huì)發(fā)現(xiàn)項(xiàng)目代碼大部分體積都在node_modules目錄中，也就意味著都是第三方j(luò)s，典型的二八定律（80%的源代碼只占了編譯后體積的20%）。

類(lèi)似下面這張圖：

于是不得不開(kāi)始優(yōu)化，比如治標(biāo)不治本的code split（代碼體積并沒(méi)有減小，只是拆分了），比如萬(wàn)試萬(wàn)難靈的 tree shaking（你確定shaking之后的代碼都只有你真正依賴(lài)的代碼？），優(yōu)化效果有限不說(shuō)，更糟糕的是依賴(lài)的捆綁。比如ant-design的模塊的日期組件依賴(lài)了 moment，那我們?cè)谑褂盟臅r(shí)候moment就被引入了。而且我即使發(fā)現(xiàn)體積更小的 dayjs可以基本取代moment的功能，也不敢引入，因?yàn)樘鎿Q它日期組件會(huì)出問(wèn)題，同時(shí)引入又增加了項(xiàng)目體積。

有些第三方j(luò)s被合稱(chēng)之為“全家桶”，這種叫法讓我想起了現(xiàn)在PC端的一些工具軟件，本來(lái)你只想裝一個(gè)電腦管家，結(jié)果它不斷彈窗提示你電腦不安全，建議你安裝一個(gè)殺毒軟件，又提示你軟件很久沒(méi)更新，提示你安裝某某軟件管家…..本來(lái)只想裝一個(gè)，結(jié)果裝了全家。

工具馴化

如果你注意觀(guān)察，在這些第三方j(luò)s的使用者中，會(huì)看到這樣一些現(xiàn)象：

排他。一些使用 MV* 框架的開(kāi)發(fā)者很喜歡站隊(duì)進(jìn)行討論，比如喜歡用 VueJS 的開(kāi)發(fā)者很可能會(huì)吐槽 ReactJS，喜歡 Angular 的開(kāi)發(fā)者會(huì)噴 VueJS。浮躁。一些經(jīng)驗(yàn)并不豐富的開(kāi)發(fā)者會(huì)覺(jué)得：使用JavaScript操作DOM多么低效，直接來(lái)個(gè)第三方j(luò)s雙向數(shù)據(jù)綁定好了。自己寫(xiě)XMLHTTPRequest發(fā)送請(qǐng)求多么麻煩，來(lái)第三方j(luò)s直接調(diào)用好了。局限。一些面試者以為自己熟悉某種第三方j(luò)s之后就覺(jué)得自己技術(shù)不錯(cuò)（甚至很多時(shí)候這種“熟悉”還要打上引號(hào)），大有掌握了某種第三方j(luò)s就掌握了前端之意。

這些第三方j(luò)s本來(lái)是為了提升開(kāi)發(fā)效率的工具，卻不知不覺(jué)地把開(kāi)發(fā)者馴化了，讓其產(chǎn)生了依賴(lài)。如果每次讓你開(kāi)發(fā)新項(xiàng)目，你不得不依賴(lài)第三方j(luò)s提供的腳手架來(lái)搭建項(xiàng)目，然后才能開(kāi)始寫(xiě)代碼。那么很可能你已經(jīng)形成工具思維，就像手里拿著錘子，是什么都是釘子，你處理問(wèn)答的方式，看問(wèn)題的角度很可能會(huì)受此局限。同時(shí)也意味著你正在離底層原生編碼越來(lái)越遠(yuǎn)，越不熟悉原生API，你就越只能依賴(lài)第三方j(luò)s，如此循環(huán)往復(fù)。

怎么打破這種狀況？先推薦張?chǎng)涡竦囊黄恼隆恫黄撇涣⒌恼軐W(xué)與個(gè)人成長(zhǎng)》，當(dāng)然就是放棄它們。這里需要注意的是，我所說(shuō)的放棄并不是所有項(xiàng)目都自己寫(xiě)框架，這樣在效率上而言是做不到的。更推薦的而是在一些時(shí)間相對(duì)充裕、影響（規(guī)模）不大的項(xiàng)目中進(jìn)行嘗試。比如開(kāi)發(fā)某個(gè)公司內(nèi)部使用的小工具，或者頁(yè)面數(shù)量不多的時(shí)間不緊張（看個(gè)人開(kāi)發(fā)速度）的小項(xiàng)目。

用原生API進(jìn)行開(kāi)發(fā)的時(shí)候我們可以參考下面兩條建議。

理解精髓

雖然我們不使用任何第三方j(luò)s，但是其原理及實(shí)現(xiàn)我們是可以學(xué)習(xí)，比如你知道實(shí)現(xiàn)數(shù)據(jù)綁定的方式有臟值檢測(cè)、以及Object.defineProperty，那么你在寫(xiě)代碼的時(shí)候就可以使用它們，你會(huì)發(fā)現(xiàn)懂這些原理和真正使用起來(lái)還有不小的距離。換個(gè)角度而言，這也可以進(jìn)一步加深我們對(duì)第三方j(luò)s的理解。

當(dāng)然我們的目的并不是為了再造一個(gè)山寨版的js，而是適當(dāng)?shù)亟Y(jié)合、刪減和優(yōu)化已有的技術(shù)和思想，為業(yè)務(wù)定制最合適的代碼。

文中提到的第三方j(luò)s受歡迎很重要的一個(gè)原因是因?yàn)閷?duì)DOM操作進(jìn)行了優(yōu)化甚至是隱藏。JQuery號(hào)稱(chēng)是DOM操作的利器，將DOM封裝成JQ對(duì)象并擴(kuò)展了API，而MV框架取代JQuery的原因是因?yàn)樵贒OM操作這條路上做得更絕，直接屏蔽了底層操作，將數(shù)據(jù)映射到模板上。如果這些MV的思考方式還只是停留在DOM的層次上的話(huà)估計(jì)也無(wú)法發(fā)展到今天的規(guī)模。因?yàn)槠帘蜠OM只是簡(jiǎn)化了代碼而已，要搭建大型項(xiàng)目還要考慮代碼組織的問(wèn)題，就是抽象和復(fù)用。這些第三方j(luò)s選擇的方式就是“組件化”，把HTML、js和CSS封裝在一個(gè)具有獨(dú)立作用域的組件中，形成可復(fù)用的代碼單元。

下面我們通過(guò)不引入任何第三方j(luò)s的情況下來(lái)進(jìn)行實(shí)現(xiàn)。

無(wú)依賴(lài)實(shí)踐web components

先來(lái)考慮組件化。其實(shí)瀏覽器原生就支持組件化（web components），它由3個(gè)關(guān)鍵技術(shù)組成，我們先來(lái)快速了解一下。

Custom elements（自定義元素）

一組js API，允許自定義元素及其行為，然后可以在您的用戶(hù)界面中按照需要使用它們。簡(jiǎn)單示例：

// 定義組件類(lèi)class LoginForm extends HTMLElement {  constructor() {    super();    ...  }}// 注冊(cè)組件customElements.define('login-form', LoginForm);<!-- 使用組件 --><login-form></login-form>Shadow DOM（影子DOM）

一組js API，創(chuàng)建一顆可見(jiàn)的DOM樹(shù)，這棵樹(shù)會(huì)附著到某個(gè)DOM元素上。這棵樹(shù)的根節(jié)點(diǎn)稱(chēng)之為shadow root，只有通過(guò)shadow root 才可以訪(fǎng)問(wèn)內(nèi)部的shadow dom，并且外部的css樣式也不會(huì)影響到shadow dom上。相當(dāng)于創(chuàng)建了一個(gè)獨(dú)立的作用域。

常見(jiàn)的shadow root可以通過(guò)瀏覽器的調(diào)試工具進(jìn)行查看：

簡(jiǎn)單示例：

// 'open' 表示該shadow dom可以通過(guò)js 的函數(shù)進(jìn)行訪(fǎng)問(wèn)const shadow = dom.attachShadow({mode: 'open'})// 操作shadow domshadow.appendChild(h1);HTML templates（HTML模板）

HTML模板技術(shù)包含兩個(gè)標(biāo)簽：<template>和 <slot>。當(dāng)需要在頁(yè)面上重復(fù)使用同一個(gè) DOM結(jié)構(gòu)時(shí)，可以用 template 標(biāo)簽來(lái)包裹它們，然后進(jìn)行復(fù)用。slot標(biāo)簽讓模板更加靈活，使得用戶(hù)可以自定義模板中的某些內(nèi)容。簡(jiǎn)單示例如下：

<!-- template的定義 --><template id="my-paragraph">  <p><slot>My paragraph</slot></p></template>// template的使用let template = document.getElementById('my-paragraph');let templateContent = template.content;document.body.appendChild(templateContent);<!-- 使用slot --><my-paragraph>  <span slot="my-text">Let's have some different text!</span></my-paragraph><!-- 渲染結(jié)果 --><p>  <span slot="my-text">Let's have some different text!</span></p>

MDN上還提供了一些簡(jiǎn)單的例子。這里來(lái)一個(gè)完整的例子：

const str = `  <style>    p {      color: white;      background-color: #666;      padding: 5px;    }  </style>  <p><slot name="my-text">My default text</slot></p>`class MyParagraph extends HTMLElement {  constructor() {    super();    const template = document.createElement('template');    template.innerHTML = str;    const templateContent = template.content;    this.attachShadow({mode: 'open'}).appendChild(      templateContent.cloneNode(true)    );  }}customElements.define('my-paragraph', MyParagraph);完整的組件

不過(guò)這樣的組件功能還太弱了，因?yàn)楹芏鄷r(shí)候組件之間是需要有交互的，比如父組件向子組件傳遞參數(shù)，子組件調(diào)用父組件回調(diào)函數(shù)。因?yàn)樗荋TML標(biāo)簽，所以很自然地想到通過(guò)屬性來(lái)傳遞。而恰好組件也有生命周期函數(shù)來(lái)監(jiān)聽(tīng)屬性的變化，看似完美！不過(guò)問(wèn)題又來(lái)了，首先是性能問(wèn)題，這樣會(huì)增加對(duì)dom的讀寫(xiě)操作。其次是數(shù)據(jù)類(lèi)型問(wèn)題，HTML標(biāo)簽上只能傳遞字符串這類(lèi)簡(jiǎn)單的數(shù)據(jù)，而對(duì)于對(duì)象、數(shù)組、函數(shù)等這類(lèi)復(fù)雜的數(shù)據(jù)就無(wú)能為力了。你很可能想到對(duì)它們進(jìn)行序列化和反序列化來(lái)實(shí)現(xiàn)，一來(lái)是弄得頁(yè)面很不美觀(guān)（想象一個(gè)長(zhǎng)度為100的數(shù)組參數(shù)被序列化后的樣子）。二來(lái)是操作復(fù)雜，不停地序列化和反序列化既容易出錯(cuò)也增加性能消耗。三來(lái)是一些數(shù)據(jù)無(wú)法被序列化，比如正則表達(dá)式、日期對(duì)象等。好在我們可以通過(guò)選擇器獲取DOM實(shí)例來(lái)傳遞參數(shù)。但是這樣的話(huà)就不可避免地操作DOM，這可不是個(gè)好的處理方式。另一方面，就組件內(nèi)部而言，如果我們需要?jiǎng)討B(tài)地將一些數(shù)據(jù)顯示到頁(yè)面上也需要操作DOM。

組件內(nèi)部視圖與數(shù)據(jù)地通信

將數(shù)據(jù)映射到視圖我們可以采用數(shù)據(jù)綁定的形式來(lái)實(shí)現(xiàn)，而視圖的變化影響到數(shù)據(jù)可以采用事件的綁定的形式。

數(shù)據(jù)綁定

怎么楊將視圖和數(shù)據(jù)建立綁定關(guān)系，通常的做法是通過(guò)特定的模板語(yǔ)法來(lái)實(shí)現(xiàn)，比如說(shuō)使用指令。例如用x-bind指令來(lái)將數(shù)據(jù)體蟲(chóng)到視圖的文本內(nèi)容中。臟值檢測(cè)的機(jī)制在性能上有損耗我們不考慮，那么剩下的就是利用 Object.defineProperty這種監(jiān)聽(tīng)屬性值變化的方式來(lái)實(shí)現(xiàn)。同時(shí)需要注意的是，一個(gè)數(shù)據(jù)可以對(duì)應(yīng)多個(gè)視圖，所以不能直接監(jiān)聽(tīng)，而是要建立一個(gè)隊(duì)列來(lái)處理。整理一下實(shí)現(xiàn)思路：

通過(guò)選擇器找出帶有x-bind屬性的元素，以及該屬性的值，比如 <div x-bind="text"></div>的屬性值是text。建立一個(gè)監(jiān)聽(tīng)隊(duì)列dispatcher保存屬性值以及對(duì)應(yīng)元素的處理函數(shù)。比如上面的元素監(jiān)聽(tīng)的是 text屬性，處理函數(shù)是this.textContent = value;建立一個(gè)數(shù)據(jù)模型state，編寫(xiě)對(duì)應(yīng)屬性的set函數(shù)，當(dāng)值發(fā)生變化時(shí)執(zhí)行 dispatcher中的函數(shù)。

示例代碼：

// 指令選擇器以及對(duì)應(yīng)處理函數(shù)const map = {  'x-bind'(value) {    this.textContent = undefined === value ? '' : value;  }};// 建立監(jiān)聽(tīng)隊(duì)列，監(jiān)聽(tīng)數(shù)據(jù)對(duì)象屬性值得變動(dòng)，然后遍歷執(zhí)行函數(shù)for (const p in map) {  forEach(this.qsa(`[${p}]`), dom => {    const property = attr(dom, p).split('.').shift();    this.dispatcher[property] = this.dispatcher[property] || [];    const fn = map[p].bind(dom);    fn(this.state[property]);    this.dispatcher[property].push(fn);  });}for (const property in this.dispatcher) {  defineProperty(property);}// 監(jiān)聽(tīng)數(shù)據(jù)對(duì)象屬性const defineProperty = p => {  const prefix = '_s_';  Object.defineProperty(this.state, p, {    get: () => {      return this[prefix + p];    },    set: value => {      if(this[prefix + p] !== value) {        this.dispatcher[p].forEach(fun => fun(value, this[prefix + p]));        this[prefix + p] = value;      }    }  });};

這里不是操作了DOM了嗎？沒(méi)關(guān)系，我們可以把DOM操作放入基類(lèi)中，那么對(duì)于業(yè)務(wù)組件就不再需要接觸DOM了。

小結(jié)：這里使用VueJS同樣的數(shù)據(jù)綁定方式，但是由于數(shù)據(jù)對(duì)象屬性只能有一個(gè) set 函數(shù)，所以建立了一個(gè)監(jiān)聽(tīng)隊(duì)列來(lái)進(jìn)行處理不同元素的數(shù)據(jù)綁定，這種隊(duì)列遍歷的方式和AngularJS臟值檢測(cè)的機(jī)制有些類(lèi)似，但是觸發(fā)機(jī)制不同、數(shù)組長(zhǎng)度更小。

事件綁定

事件的綁定思路比數(shù)據(jù)綁定更簡(jiǎn)單，直接在DOM元素上進(jìn)行監(jiān)聽(tīng)即可。我們以click事件為例進(jìn)行綁定，創(chuàng)建一個(gè)事件綁定的指令，比如 x-click。實(shí)現(xiàn)思路：

利用DOM選擇器找到帶有x-click屬性的元素。讀取x-click屬性值，這時(shí)候我們需要對(duì)屬性值進(jìn)行一下判斷，因?yàn)閷傩灾涤锌赡苁呛瘮?shù)名比如 x-click=fn，有可能是函數(shù)調(diào)用x-click=fn(a, true)。對(duì)于基礎(chǔ)數(shù)據(jù)類(lèi)型進(jìn)行判斷，比如布爾值、字符串，并加入到調(diào)用參數(shù)列表中。為DOM元素添加事件監(jiān)聽(tīng)，當(dāng)事件觸發(fā)時(shí)調(diào)用對(duì)應(yīng)函數(shù)，傳入?yún)?shù)。

示例代碼：

const map = ['x-click'];map.forEach(event => {  forEach(this.qsa(`[${event}]`), dom => {    // 獲取屬性值    const property = attr(dom, event);    // 獲取函數(shù)名    const fnName = property.split('(')[0];    // 獲取函數(shù)參數(shù)    const params = property.indexOf('(') > 0 ? property.replace(/.*\((.*)\)/, '$1').split(',') : [];    let args = [];    // 解析函數(shù)參數(shù)    params.forEach(param => {      const p = param.trim();      const str = p.replace(/^'(.*)'$/, '$1').replace(/^"(.*)"$/, '$1');      if (str !== p) { // string        args.push(str);      } else if (p === 'true' || p === 'false') { // boolean        args.push(p === 'true');      } else if (!isNaN(p)) {        args.push(p * 1);      } else {        args.push(this.state[p]);      }    });    // 監(jiān)聽(tīng)事件    on(event.replace('x-', ''), dom, e => {      // 調(diào)用函數(shù)并傳入?yún)?shù)      this[fnName](...params, e);    });  });});

對(duì)于表單控件的雙向數(shù)據(jù)綁定也很容易，即在建立數(shù)據(jù)綁定修改value，然后建立事件綁定監(jiān)聽(tīng)input事件即可。

組件與組件之間的通信

解決完組件內(nèi)部的視圖與數(shù)據(jù)的映射問(wèn)題我們來(lái)著手解決組件之間的通信問(wèn)題。組件需要提供一個(gè)屬性對(duì)象來(lái)接收參數(shù)，我們?cè)O(shè)定為props。

父=>子，數(shù)據(jù)傳遞

父組件要將值傳入子組件的props屬性，需要獲取子組件的實(shí)例，然后修改 props屬性。這樣的話(huà)就不可避免的操作DOM，那么我們考慮將DOM操作法放在基類(lèi)中進(jìn)行。那么問(wèn)題來(lái)了，怎么找到哪些標(biāo)簽是子組件，子組件有哪些屬性是需要綁定的？可以通過(guò)命名規(guī)范和選擇其來(lái)獲取嗎？比如組件名稱(chēng)都以cmp-開(kāi)頭，選擇器支不支持暫且不說(shuō)，這種要求既約束編碼命名，同時(shí)有沒(méi)有規(guī)范保證。簡(jiǎn)單地說(shuō)就是沒(méi)有靜態(tài)檢測(cè)機(jī)制，如果有開(kāi)發(fā)者寫(xiě)的組件不是以 cmp-開(kāi)頭，運(yùn)行時(shí)發(fā)現(xiàn)數(shù)據(jù)傳遞失敗檢查起來(lái)會(huì)比較麻煩。所以可以在另一個(gè)地方對(duì)組件名稱(chēng)進(jìn)行采集，那就是注冊(cè)組件函數(shù)。我們通過(guò)customElements.define函數(shù)來(lái)注冊(cè)組件，一種方式是直接對(duì)該函數(shù)進(jìn)行重載，在注冊(cè)組件的時(shí)候記錄組件名稱(chēng)，但是實(shí)現(xiàn)有些難度，而且對(duì)原生API函數(shù)修改難以保證不會(huì)對(duì)其它代碼產(chǎn)生影響。所以折中的方式是對(duì)齊封裝，然后利用封裝的函數(shù)進(jìn)行組件注冊(cè)。這樣我們就可以記錄所有注冊(cè)的組件名了，然后創(chuàng)建實(shí)例來(lái)獲取對(duì)應(yīng) props我們就解決了上面提出的問(wèn)題。同時(shí)在props對(duì)象的屬性上編寫(xiě) set函數(shù)進(jìn)行監(jiān)聽(tīng)。到了這一步還只完成了一半，因?yàn)槲覀冞€沒(méi)有把數(shù)據(jù)傳遞給子組件。我們不要操作DOM的話(huà)那就只能利用已有的數(shù)據(jù)綁定機(jī)制了，將需要傳遞的屬性綁定到數(shù)據(jù)對(duì)象上。梳理一下思路：

編寫(xiě)子組件的時(shí)候建立props對(duì)象，并聲明需要被傳參的屬性， 比如this.props = {id: ''}。編寫(xiě)子組件的時(shí)候不通過(guò)原生customElements.define，而是使用封裝過(guò)的函數(shù)，比如defineComponent來(lái)注冊(cè)，這樣可以記錄組件名和對(duì)應(yīng)的props屬性。父組件在使用子組件的時(shí)候進(jìn)行遍歷，找出子組件和對(duì)應(yīng)的props對(duì)象。將子組件props對(duì)象的屬性綁定到父組件的數(shù)據(jù)對(duì)象 state屬性上，這樣當(dāng)父組件state屬性值發(fā)生變化時(shí)，會(huì)自動(dòng)修改子組件 props屬性值。

示例代碼：

const components = {};/** * 注冊(cè)組件函數(shù) * @param {string} 組件（標(biāo)簽）名 * @param {class} 組件實(shí)現(xiàn)類(lèi) */export const defineComponent = (name, componentClass) => {  // 注冊(cè)組件  customElements.define(name, componentClass);  // 創(chuàng)建組件實(shí)例  const cmp = document.createElement(name);  // 存儲(chǔ)組件名以及對(duì)應(yīng)的props屬性  components[name] = Object.getOwnPropertyNames(cmp.props) || [];};// 注冊(cè)子組件class ChildComponent extends Component {  constructor() {    // 通過(guò)基類(lèi)來(lái)創(chuàng)建模板    // 通過(guò)基類(lèi)來(lái)監(jiān)聽(tīng)props    super(template, {      id: value => {        // ...      }    });  }}defineComponent('child-component', ChildComponent);<!-- 使用子組件 --><child-component id="myId"></child-component>// 注冊(cè)父組件class ParentComponent extends Component {  constructor() {    super(template);    this.state.myId = 'xxx';  }}

上面的代碼中有很多地方可以繼續(xù)優(yōu)化，具體查看文末示例代碼。

子=>父，回調(diào)函數(shù)

子組件的參數(shù)要傳回給父組件，可以采用回調(diào)函數(shù)的形式。比較麻煩的時(shí)候調(diào)用函數(shù)時(shí)需要用到父組件的作用域。可以將父組件的函數(shù)進(jìn)行作用域綁定然后傳入子組件props對(duì)象屬性，這樣子組件就可以正常調(diào)用和傳參了。因?yàn)榛卣{(diào)函數(shù)操作方式和參數(shù)不一樣，參數(shù)是被動(dòng)接收，回調(diào)函數(shù)是主動(dòng)調(diào)用，所以需要在聲明時(shí)進(jìn)行標(biāo)注，比如參考AngularJS指令的scope對(duì)象屬性的聲明方式，用“&”符號(hào)來(lái)表示回調(diào)函數(shù)。理清一下思路：

子組件類(lèi)中聲明props的屬性為回調(diào)函數(shù)，如 this.props = {onClick:'&'}。父組件初始化時(shí)，在模板上傳遞對(duì)應(yīng)屬性， 如<child-compoennt on-click="click"></child-component>。根據(jù)子組件屬性值找到對(duì)應(yīng)的父組件函數(shù)，然后將父組件函數(shù)綁定作用域并傳入。如childComponent.props.onClick = this.click.bind(this)。子組件中調(diào)用父組件函數(shù)， 如this.props.onClick(...)。

示例代碼：

// 注冊(cè)子組件class ChildComponent extends Component {  constructor() {    // 通過(guò)基類(lèi)來(lái)聲明回調(diào)函數(shù)屬性    super(template, {      onClick: '&'    });    ...    this.props.onClick(...);  }}defineComponent('child-component', ChildComponent);<!-- 父組件中使用子組件 --><child-component on-click="click"></child-component>// 注冊(cè)父組件class ParentComponent extends Component {  constructor() {    super(template);  }  // 事件傳遞放在基類(lèi)中操作  click(data) {    ...  }}穿越組件層級(jí)的通信

有些組件需要子孫組件進(jìn)行通信，層層傳遞會(huì)編寫(xiě)很多額外的代碼，所以我們可以通過(guò)總線(xiàn)模式來(lái)進(jìn)行操作。即建立一個(gè)全局模塊，數(shù)據(jù)發(fā)送者發(fā)送消息和數(shù)據(jù)，數(shù)據(jù)接收者進(jìn)行監(jiān)聽(tīng)。

示例代碼

// bus.js// 監(jiān)聽(tīng)隊(duì)列const dispatcher = {};/**  * 接收消息 * name  */export const on = (name, cb) => {  dispatcher[name] = dispatcher[name] || [];  const key = Math.random().toString(26).substring(2, 10);  // 將監(jiān)聽(tīng)函數(shù)放入隊(duì)列并生成唯一key  dispatcher[name].push({    key,    fn: cb  });  return key;};// 發(fā)送消息export const emit = function(name, data) {  const dispatchers = dispatcher[name] || [];  // 輪詢(xún)監(jiān)聽(tīng)隊(duì)列并調(diào)用函數(shù)  dispatchers.forEach(dp => {    dp.fn(data, this);  });};// 取消監(jiān)聽(tīng)export const un = (name, key) => {  const list = dispatcher[name] || [];  const index = list.findIndex(item => item.key === key);  // 從監(jiān)聽(tīng)隊(duì)列中刪除監(jiān)聽(tīng)函數(shù)  if(index > -1) {    list.splice(index, 1);    return true;  } else {    return false;  }};// ancestor.jsimport {on} from './bus.js';class AncestorComponent extends Component {  constructor() {    super();    on('finish', data => {      //...    })      }}// child.jsclass ChildComponent extends Component {  constructor() {    super();    emit('finish', data);  }}總結(jié)

關(guān)于基類(lèi)的詳細(xì)代碼可以參考文末的倉(cāng)庫(kù)地址，目前項(xiàng)目遵循的是按需添加原則，只實(shí)現(xiàn)了一些基礎(chǔ)的操作，并沒(méi)有把所有可能用到的指令寫(xiě)完。所以還不足以稱(chēng)之為“框架”，只是給大家提供實(shí)現(xiàn)思路以及編寫(xiě)原生代碼的信心。

具體示例：https://github.com/yalishizhude/web-component

作者：黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院
首發(fā)：http://web.itheima.com/