【のWebPACK]深い研究tapableフック関数

手動同期フック関数

1、SyncHook

クラスSyncHook { 
    //钩子是同步的
    コンストラクタ（引数）{ 
        this.tasks = []; 
    } 
    （名前、タスク）{タップ
        this.tasks.push（タスク）
    } 
    コール（...引数）{ 
        （this.tasks.forEach 
            ）...引数を（タスク）=>タスクを（
        ）
    } 
} 

//绑定事件就是订阅
フックは=新しいSyncHook（[ '名前']）しましょう。

hook.tap（ '反応'、関数（名前）{ 
    にconsole.log（ '反応'、名前）
}）。
hook.tap（ 'ノード'、関数（名前）{ 
    にconsole.log（ 'ノード'、名前）
}）。

hook.call（ 'dellyoung'）;

2、SyncWaterfallHook

SyncWaterfallHook {クラス
    //フック同期
    コンストラクタ（引数）{ 
        this.tasks = []; 
    } 
    TAP（名前、タスク）{ 
        this.tasks.push（タスク）
    } 
    コール（...引数）{ 
        LET [まず、他...] = this.tasks; 
        LET RET =最初の（引数...）; 
        （others.reduce 
            ）=>（{B 
                B //次に
                、戻りB（A）
            、RET} 
        ）
    } 
} 

//結合イベントをサブスクライブすることである
せ、新しい新しいSyncWaterfallHookフック=（[ '名前']）; 

hook.tap（ 'REACT'、関数（名前）{ 
    にconsole.log（ 'React1'、名前）; 
    戻り「reactOk ' 
}）。

hook.tap（ 'ノード'、関数（名前）{ 
    にconsole.log（ 'NODE2'、名前）; 
    戻り'nodeOk' 
}）。

hook.tap（ 'のWebPACK'、関数（名前）{ 
    にconsole.log（ 'のWebPACK'、名前）
}）。

hook.call（ 'dellyoung'）;

3、SyncLoopHook

SyncLoopHook {クラス
    //フックが同期される
    //未定義されてきたものよりも長い周期返す
    コンストラクタ（引数）を{ 
        ; this.tasks = [] 
    } 
    TAP（名前、タスク）{ 
        this.tasks.push（タスク）
    } 
    コール（引数...）{ 
        this.tasks.forEach（
            タスク=> { 
                のlet RET; 
                {行う
                    RET =タスク（...引数を）
                }中（！==未定義RET）
            } 
        ）
    } 
} 

//バインドイベントをサブスクライブすることです
フック=新しい新しいSyncLoopHook LET（[ '名前']）; 
せ合計= 0; 

hook.tap（ 'REACT'、関数（名前）{ 
    にconsole.log（）、名称を'REACT'。
    === 3総++返す未定義：？ '继续学' 
}）; 

hook.tap（ 'ノード'、関数（名前）{ 
    にconsole.log（ 'ノード'、名前）; 
}）; 

hook.tap（ 'のWebPACK'、関数（名前）{ 
    にconsole.log（ 'のWebPACK'、名前）
}）。

hook.call（ 'dellyoung'）;

4、SyncBailHook

SyncBailHook {クラス
    //フック同期
    コンストラクタ（引数）{ 
        this.tasks = []; 
    } 
    TAP（名前、タスク）{ 
        this.tasks.push（タスク）
    } 
    コール（...引数）{ 
        LETのRET; / /関数は、現在の値を返し
        LETインデックス= 0; //最初の実装
        DO { 
            RET = this.tasks [インデックス++]（引数...）
        }ながら（RET === &&未定義インデックス<this.tasks.length） ; 
    } 
} 

//結合イベントをサブスクライブすることである
せ、新しい新しいSyncBailHookフック=（[ '名前']）; 

hook.tap（ 'REACT'、関数（名前）{ 
    にconsole.log（ 'React1'、名前）; 
    //戻り'STOP' 
}）; 
hook.tap（ 'ノード'、関数（名前）{
    console.log（ 'ノード2'、名前） 
}）。

hook.call（ 'dellyoung'）;

第二に、非同期フック関数マニュアル

1、AsyncParallelBailHook

同様のpromise.all []

AsyncParallelBailHook {クラス
    //フックが同期され
    //未定義であったであろうよりも長い周期を返す
    コンストラクタ（引数）{ 
        this.tasks = []; 
    } 
    tapAsync（名前、タスク）{ 
        this.tasks.push（タスク）
    } 
    callAsync（引数...）{ 
        LET finalCallBack args.pop =（）; //最終アウトの機能
        LETインデックス= 0; 
        DONE LET =（）=> { 
            インデックス++; 
            IF（=== this.tasks.length指数）{ 
                finalCallBack（）; 
            } 
        }; 
        this.tasks.forEach（タスク=> { 
            タスク（引数...、DONE）
        }）
    } 
}
 
//バインドイベントがサブスクライブします
聞かせてフック=新しいAsyncParallelBailHook（[ '名前']）; 

hook.tapAsync（関数を'反応'（名前、コールバック）{ 
    たsetTimeout（（）=> { 
            にconsole.log（ '反応'、名前）; 
            コールバック（）; 
        }、5000 
    ）; 
}）; 

hook.tapAsync（ 'ノード'、関数（名前、コールバック）{ 
    たsetTimeout（（）=> { 
            にconsole.log（ 'ノード'、名前）; 
            コールバック（）; 
        } 1000 
    ）; 
}）; 

hook.callAsync（ 'dellyoung'、関数（）{ 
    にconsole.log（ 'newBegin'）
}）。

【のWebPACK]深い研究tapableフック関数

おすすめ