博狗DT

一.tapable简介

tapable为webpack底层的核心工具库,webpack许多功能的实现都是跟它密不可分的,webpack的编译流程为配置初始化--->内容编译--->输出编译后内容,这三个的整体执行过程可以称之为

本文地址:http://482.ib765.com/websiteblogs/p/14431707.html
文章摘要:博狗DT,随后都满脸愕然随后看着冷冷笑道嘴角上扬快到我连躲闪 低声应道对方丝毫不答与这十五个人每一个都是仙君。

事件驱动型事件流工作机制,这个机制将不同的工作流串联起来完成所有的工作,其中最为核心的两个部分是 负责编译的complier 负责创建bundles的compilation。tapable本身是一个独立的库

在webpack中进行了大量的使用,tapable工作流程是 实例化hook注册事件监听---->通过hook触发事件监听---->执行懒编译生成的可执行代码。

二.Hook简介

Hook本质是tapable实例对象,hook执行机制可分为同步和异步,对于异步来说又存在着并行和串行两种,其中hook的执行特点如下:

Hook:普通钩子,监听器之间互相独立不干扰。

BailHook:熔断钩子,某个监听返回非undefined时后续不执行。

WaterfallHook:瀑布沟子,上一个监听返回值可传递至下一个。

LoopHook:循环钩子,如果当前未返回false则一直执行。

tapable库同步钩子分为SynckHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook。

tapable库异步串行钩子分为AsyncSeriesHook,AsyncSeresBailHook,AsynvSeriesWaterfallHook。

tapable库异步并行钩子分为AsyncParalleHook,AsyncParalleBailHook。

三.同步钩子的使用

1.同步钩子之syncHook

            const { SyncHook } =require('tapable')
            //钩子实例
            let hook =new SyncHook(['name','age'])
            hook.tap('fn1',function(name,age){
                console.log('fn1---->',name,age)
            })
            hook.tap('fn2',function(name,age){
                console.log('fn2---->',name,age)
                return 'res'
            })
            hook.tap('fn3',function(name,age){
                console.log('fn3---->',name,age)
            })
            //触发监听
            hook.call('lw','18') 
//打印结果为 fn1-----> lw 18 fn2-----> lw 18 fn3-----> lw 18

上述代码中即便fn2 return了后面的fn3依然会执行。

2.同步钩子之syncBialHook

                 const { SyncBailHook } =require('tapable')
                 //钩子实例
                 let hook =new SyncBailHook(['name','age'])
                 hook.tap('fn1',function(name,age){
                     console.log('fn1---->',name,age)
                 })
                 hook.tap('fn2',function(name,age){
                     console.log('fn2---->',name,age)
                   return 'res'
                 })
                 hook.tap('fn3',function(name,age){
                     console.log('fn3---->',name,age)
                 })
                 //触发监听
                 hook.call('lw','100') 
//打印结果为 fn1-----> lw 18 fn2-----> lw 18

上述代码中与SyncHook不同的是fn2中添加一个return (非undefined) 后面的fn3不会执行,说明这条流水线断掉了

3.同步钩子之syncWaterfallHooks

                const { SyncWaterfallHook } =require('tapable')
                //钩子实例
                let hook =new SyncWaterfallHook(['name','age'])
                hook.tap('fn1',function(name,age){
                    console.log('fn1---->',name,age)
                    return 'ret1'
                })
                hook.tap('fn2',function(name,age){
                    console.log('fn2---->',name,age)
                    return 'ret2'
                })
                hook.tap('fn3',function(name,age){
                    console.log('fn3---->',name,age)
                    return 'ret3'
                })
                //触发监听
                hook.call('lw','100') 
//打印结果为 fn1-----> lw 18 fn2-----> ret1 18 fn3-----> ret2 18

这个钩子的特点是通过上一个监听返回的ret1传给下一个钩子函数fn2 然后返回 依次类推 所以又叫瀑布沟子

4.同步钩子之SyncLoopHook

                const { SyncLoopHook } =require('tapable')
                //钩子实例
                let hook =new SyncLoopHook(['name','age'])
                let count1=0
                let count2=0
                let count3=0
                hook.tap('fn1',function(name,age){
                    console.log('fn1---->',name,age)
                    if(++count1==1){
                        count1=0
                        return undefined
                    }
                    return true;
                })
                hook.tap('fn2',function(name,age){
                    console.log('fn2---->',name,age)
                    if(++count2==2){
                        count2=0
                        return undefined
                    }
                    return true
                })
                hook.tap('fn3',function(name,age){
                    console.log('fn3---->',name,age)
                })
                //触发监听
                hook.call('lw','100') 
//打印结果为:fn1-----> lw 18 fn2-----> lw 18 fn1-----> lw 18 
//fn2-----> lw 18 fn3-----> lw 18

从打印结果可以看出循环执行了2遍,第一次执行到了fn2停止,博狗DT:第二次3个函数执行完经调试代码得知底层是一个

do while循环,while的重新执行条件为return内容为true。

四.异步钩子的使用

对于异步钩子的使用,在添加事件监听时会存在三种方式:tap tapAsync tapPromise。

1.tapable库异步并行钩子
//第一种方式 tap
                const { AsyncParallelHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelHook(['name'])
                hook.tap('fn1',function(name){
                    console.log('fn1---->',name)
                })
                hook.tap('fn2',function(name){
                    console.log('fn2---->',name)
                })
                hook.callAsync('lw',function(){
                    console.log('回调操作最后执行')
                })
//打印结果 fn1---->lw fn2----->lw  最后执行回调

并行钩子的tap方法是同步进行的,只是从打印结果的话很难看出同步进行,下面通过另一种方式

改动下看下效果。

 //第二种方式 tapAsync
 //通过settimeOut异步操作,如果为并行执行的话,执行结果应该偏向于大的时间数值,
//我们用console.time标记下,代码如下:
const { AsyncParallelHook } =require('tapable') //钩子实例 let hook =new AsyncParallelHook(['name']) console.time('time') hook.tapAsync('fn1',function(name,callback){ setTimeout(()=>{ console.log('fn1---->',name) callback() },1000) }) hook.tapAsync('fn2',function(name,callback){ setTimeout(()=>{ console.log('fn2---->',name) callback() },2000) }) hook.callAsync('lw',function(){ console.log('回调操作最后执行') console.timeEnd('time') }) //打印结果为fn1--->lw fn2--->lw
//同步打印出来 time:2.002s 所以证明是并行执行
//第三种方式 tapPromise
                const { AsyncParallelHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelHook(['name'])
                console.time('time')
                hook.tapPromise('fn1',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn1---->',name)
                            resolve()
                        },1000)
                    })
                })
                
                hook.tapPromise('fn2',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn2---->',name)
                            resolve()
                        },2000)
                    })
                })
                
                hook.promise('lw').then(()=>{
                    console.log('end执行了')
                    console.timeEnd('time')
                })
//打印结果为fn1--->lw fn2--->lw 
//同步打印出来 time:2.002s 同样并行执行
       //AsyncParallelBailHook
                const { AsyncParallelBailHook } =require('tapable')
                //钩子实例
                let hook =new AsyncParallelBailHook(['name'])
                console.time('time')
                hook.tapAsync('fn1',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn1---->',name)
                        callback()
                    },1000)
                })
                hook.tapAsync('fn2',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn2---->',name)
                        callback('err')
                    },2000)
                })
                hook.tapAsync('fn3',function(name,callback){
                    setTimeout(()=>{
                        console.log('fn3---->',name)
                        callback()
                    },3000)
                })
                
                hook.callAsync('lw',function(){
                    console.log('最后的回调执行了')
                    console.timeEnd('time')
                })
//打印结果为fn1---->lw fn2--->lw 
//最后函数回调执行了 time:2.002s fn3--->lw
从打印结果来看fn2里面callback('err') 返回错误 所以在fn2进行时阻断掉了,总运行时长接近2s

最后fn3也打印出来是因为终归有个settimeout控制着所以到达3s会被打印。

2.tapable库异步串行钩子
               const { AsyncSeriesHook } =require('tapable')
                //钩子实例
                let hook =new AsyncSeriesHook(['name'])
                console.time('time')
                hook.tapPromise('fn1',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn1---->',name)
                            resolve()
                        },1000)
                    })
                })
                
                hook.tapPromise('fn2',function(name){
                    return new Promise(function(resolve,reject){
                        setTimeout(()=>{
                            console.log('fn2---->',name)
                            resolve()
                        },2000)
                    })
                })
                
                hook.promise('lw').then(()=>{
                    console.log('end执行了')
                    console.timeEnd('time')
                })
//打印结果为fn1--->lw fn2--->lw time:3.002s(1s+2s)
//串行和我们的同步钩子是很接近的,只不过多了一步回调操作
/*****************************************************/
“如约而至”是个多么美好的词,等的辛苦,却从不辜负。

posted on 2021-02-22 17:42  博彩白菜大全游戏  阅读(84)  评论(0编辑  收藏

导航

博彩白菜大全游戏 处女星号EB易博馆时时彩平台网址 金巴黎彩票代理直营网 淘金快3时时彩网址 千亿北京赛车开奖号历史
世爵娱乐AB棋牌 百合娱乐棋牌网站 蓝博棋牌网址 濠誉OG棋牌 皇宫殿DS皇宫殿棋牌
博彩娱乐城棋牌网址 心水博YG电子 凯时ag棋牌 香格里拉娱乐bbin棋牌 百合娱乐新世界棋牌
九五至尊游戏登入 欢乐谷娱乐YG 申博游戏登录 多宝娱乐棋牌现金开户 永乐娱乐AG捕鱼王