目錄
- 一. tapable概述
- 二. tapable-0.2原始碼決議
- 2.1 代碼結構
- 2.2 事件監聽方法
- 2.3 事件觸發方法
- 三. tapable1.0概述
一. tapable概述
tapable地址：【tapable-0.2】
tapable是webpack的核心框架（4.0以上版本的API已經發生了變化），是一個基于事件流的框架，或者叫做發布訂閱模式，或觀察者模式，webpack的整個生命周期及其開放的自定義插件系統都離不開tapable的支持，研究其運行原理是閱讀webpack源代碼的第一步，官方倉庫master分支的代碼是經過ES6重構的，模塊化拆分非常細，且加入了很多非核心邏輯，閱讀難度較大，建議先從官方倉庫中0.2版本的分支開始學習，整個原始碼只有400行，相對容易理解，
二. tapable-0.2原始碼決議
2.1 代碼結構
//類定義
function Tapable() {
this._plugins = {};
}
//模塊匯出
module.exports = Tapable;
//定義了許多內部方法和原型方法
...
Tapable實際上就是一個類定義的模塊，
2.2 事件監聽方法
tapable通過原型方法Tapable.prototype.plugin來注冊事件監聽，
這段代碼并不復雜，呼叫plugin方法來注冊一個事件，參考瀏覽器環境中的addEventListener()方法就很容易理解了，其邏輯就是將回呼函式按照事件名稱進行歸類存盤，在tapable實體中統一調度管理，
//__plugin屬性上掛載了各個注冊事件的回呼函式
tapable.__plugins = {
'click':[fn1, fn2, fn3],
'mousedown':[fn21,fn22,fn23]
...
}
2.3 事件觸發方法
tapable提供了許多事件觸發的方式，其基本功能可以參考瀏覽器環境中的dispatchEvent( )，
tapable中的事件觸發方式可以按命名分為如下幾個大組：
- waterfall方法會將上一個監聽的執行結果傳給下一個
- bailResult方法只會執行到第一個回傳結果不是undefined的監聽器
- Series方法會線性執行異步監聽器，上一個結束后下一個才會開始
- Parallel方法會并行執行所有異步監聽
tapable中的典型方法如下：
Tapable.prototype.applyPlugins( )
同步方法，該方法接受任意引數，以第一個引數為事件名查找監聽器陣列，依次執行監聽器的apply( )方法，觸發時將呼叫時除名稱以外的其他引數傳入apply( )方法，
Tapable.prototype.applyPluginsWaterfall( )
同步方法，該方法接受任意引數，如果指定事件沒有注冊監聽器，則回傳第二個引數(init)，否則依次執行監聽器的apply( )方法，傳入的args是前一個執行前一個監聽器apply( )方法的回傳值，瀑布流這個方法名很形象，
Tapable.prototype.applyPluginsBailResult( )
同步方法，該方法接受任意引數，依次執行監聽器的apply( )方法并取得回傳值，直到某個apply( )回傳一個不為undefined的結果，則停止執行并將這個結果回傳，
Tapable.prototype.applyPluginsAsync( )
異步執行監聽回呼的方法，這個方法是順序執行，等到第一個插件執行結束后才會執行下一個插件，實作的方式就是將下一個插件當做回呼函式傳入第一個插件，在第一個插件的apply( )方法的方法體最后（或是異步方法最后）來呼叫下一個監聽插件的執行，這里利用閉包實作了一個迭代器，變數記錄在applyPluginsAsync( )方法中（就是變數i）,并在回呼中函式next( )中保持了對i的參考，
例如需要用applyPluginsAsync( )方法執行的插件需要在apply方法中顯式執行回呼函式：
class Plugin1{
apply(info){
var callback = Array.prototype.pop.call(arguments[1]);
//這里取到的callback,實際上就是原始碼中的具名函式next()
callback();
}
}
其他的異步方法大同小異，不再贅述，
原始碼的異步方法定義中使用copyProperties( )來處理兩個函式，筆者嘗試了很多情況這個方法都并未執行，實際情況就是將next函式加入了引數陣列并繼續執行，希望對此有研究的讀者能夠點明一下，
三. tapable1.0概述
tapable地址：【tapable-1.0】
tapable在1.0版本做了很大改進，使用ES6語法重寫了整個框架，除了更換了API外，在插件定義方面進行了明顯升級，原來只通過plugin( )方法來定義插件，不閱讀原始碼很難知道插件的規范格式，新版本的tapable提供了基本樣例，細分的事件鉤子(*Hook)，新的觸發事件的方法(tap,tapAsync,tapPromise)等等，但實作的基本需求是一致的，感興趣的讀者可以自行學習，
作者：大史不說話
鏈接：Webpack4.0各個擊破（8）tapable篇
來源：博客園
著作權歸作者所有，商業轉載請聯系作者獲得授權，非商業轉載請注明出處，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/245596.html
標籤：JavaScript
上一篇：一行 CSS 代碼的魅力