这才是tapable里面SyncLoopHook钩子函数的实现

前言

玩webpack的都知道,webpack把各个插件串联起来的核心是tapable,而tapable里面有很多*hook函数,其中有一个不常用,但是却很好玩的钩子函数叫 SyncLoopHook, 于是我就自己实现了一遍, 然后想去和网友对比一下实现的不同。谁知道,网上很多SyncLoopHook函数的实现都是一样的,而且还是错的

1. 网上普遍的SyncLoopHook

class SyncLoopHook{
    constructor() {
        this.tasks=[];
    }
    tap(name,task) {
        this.tasks.push(task);
    }
    call(...args) {    
        this.tasks.forEach(task => {
            let ret=true;
            do {
                ret = task(...args);
            }while(ret)
        });
    }
}
复制代码

网上大部分都是这样实现的, 这样写只是把return非undefind的回调函数循环执行

---

如下图, 第一个回调函数执行了两遍,没问题

但是把 return放到第二个之后的就会出错了,它只是把第二个回调函数执行两次

而 tapable里的 SyncLoopHook是把包括 return非 undefined的回调函数和该回调函数之前的回调函数都循环一遍, 如下图

2. 我的SyncLoopHook

注意 : SyncLoopHook只能有一次循环, 如果不对, 请及时告诉我

class SyncLoopHook {
    constructor () {
        this.tasks = []
    }
    tap (...args) {
        this.tasks.push(args.pop())
    }
    call (...args) {
        let ret,
            alreadyLoop = false  // 是否已经循环了

        this.tasks.reduce( (baton, task)  => {
            baton.push(task)
            
            // 判断最新一个回调函数的返回值
            ret = baton[baton.length - 1](...args)
            
            // 如果返回值为undefined 且 如果已经循环了, 返回[], 如果还没循环, 返回包含上一个回调的baton
            if (!ret) return alreadyLoop ? [] : baton
            
            // 如果不是undefine,遍历baton并检测最后一个回调函数的返回值,直到为undefined
            while (ret) ret = baton.map(e => e(...args)).pop()
            
            // 代码执行到这里,证明已经循环了
            alreadyLoop = true
        
            // 已经循环了,清空baton
            return []
        }, [])
    }
}

复制代码

---

有时候网上的东西也不能全信,还是要自己写一遍才行~