webpack中tapable原理详解，一块儿学习任务流程管理

时间  2020-03-12
标签 webpack tapable 原理 详解 一块儿 学习 任务 流程 管理 繁體版
原文   原文链接

学习webpack源码时，老是绕不开tapable，越看越以为它晦涩难懂，但只要理解了它的功能，学习就会容易不少。webpack

简单来讲，有一系列的同步、异步任务，我但愿它们能够以多种流程执行，好比：web

  • 一个执行完再执行下一个，即串行执行；
  • 一块执行，即并行执行；
  • 串行执行过程当中，能够中断执行，即有熔断机制
  • 等等

而tapable库，就帮咱们实现了多种任务的执行流程，它们能够根据如下特色分类：面试

  • 同步sync、异步async：task是否包含异步代码
  • 串行series、并发parallel：先后task是否有执行顺序
  • 是否使用promise
  • 熔断bail：是否有熔断机制
  • waterfall：先后task是否有数据依赖

举个例子，若是咱们想要多个同步的任务 串行执行，只须要三个步骤：初始化hook、添加任务、触发任务执行：设计模式

// 引入 同步 的hook
const { SyncBailHook } =  require("tapable");
// 初始化
const tasks = new SyncBailHook(['tasks'])
// 绑定一个任务
tasks.tap('task1', () => {
    console.log('task1', name);
})
// 再绑定一个任务
tasks.tap('task2', () => {
    console.log('task2', name);
})
// 调用call，咱们的两个任务就会串行执行了，
tasks.call('done')
复制代码

是否是很简单，下面咱们学习下tapable实现了哪些任务执行流程，而且是如何实现的：promise

1、同步事件流

如上例子所示，每一种hook都会有两个方法，用于添加任务和触发任务执行。在同步的hook中，分别对应tap和call方法。并发

1. 并行

全部任务一块儿执行异步

class SyncHook {
    constructor() {
        // 用于保存添加的任务
        this.tasks = []
    }

    tap(name, task) {
        // 注册事件
        this.tasks.push(task)
    }

    call(...args) {
        // 把注册的事件依次调用，无特殊处理
        this.tasks.forEach(task => task(...args))
    }
}
复制代码

2. 串行可熔断

若是其中一个task有返回值(不为undefined)，就会中断tasks的调用async

class SyncBailHook {
    constructor() {
        // 用于保存添加的任务
        this.tasks = []
    }

    tap(name, task) {
        this.tasks.push(task)
    }

    call(...args) {
        for (let i = 0; i < this.tasks.length; i++) {
            const result = this.tasks[i](...args)
            // 有返回值的话，就会中断调用
            if (result !== undefined) {
                break
            }
        }
    }
}

复制代码

3. 串行瀑布流

task的计算结果会做为下一个task的参数，以此类推函数

class SyncWaterfallHook {
    constructor() {
        this.tasks = []
    }

    tap(name, task) {
        this.tasks.push(task)
    }

    call(...args) {
        const [first, ...others] = this.tasks
        const result = first(...args)
        // 上一个task的返回值会做为下一个task的函数参数
        others.reduce((result, task) => {
            return task(result)
        }, result)
    }
}
复制代码

4. 串行可循环

若是task有返回值（返回值不为undefined），就会循环执行当前task，直到返回值为undefined才会执行下一个taskoop

class SyncLoopHook {
    constructor() {
        this.tasks = []
    }

    tap(name, task) {
        this.tasks.push(task)
    }

    call(...args) {
        // 当前执行task的index
        let currentTaskIdx = 0
        while (currentTaskIdx < this.tasks.length) {
            let task = this.tasks[currentTaskIdx]
            const result = task(...args)
            // 只有返回为undefined的时候才会执行下一个task，不然一直执行当前task
            if (result === undefined) {
                currentTaskIdx++
            }
        }
    }
}
复制代码

2、异步事件流

异步事件流中，绑定和触发的方法都会有两种实现：

  • 使用promise：tapPromise绑定、promise触发
  • 非promise： tapAsync绑定、callAsync触发

注意事项：

既然咱们要控制异步tasks的执行流程，那咱们必需要知道它们执行完的时机：

  • 使用promise的hook，任务中resolve的调用就表明异步执行完毕了；

    // 使用promise方法的例子

// 初始化异步并行的hook
const asyncHook = new AsyncParallelHook('async')
// 添加task
// tapPromise须要返回一个promise
asyncHook.tapPromise('render1', (name) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('render1', name);
            resolve()
        }, 1000);
    })

})
// 再添加一个task
// tapPromise须要返回一个promise
asyncHook.tapPromise('render2', (name) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('render2', name);
            resolve()
        }, 1000);
    })
})
// 传入的两个异步任务就能够串行执行了，并在执行完毕后打印done
asyncHook.promise().then( () => {
    console.log('done');
})
复制代码

  • 但在使用非promise的hook时，异步任务执行完毕的时机咱们就无从获取了。因此咱们规定传入的 task的最后一个参数参数为一个函数，而且在异步任务执行完毕后执行它，这样咱们能获取执行完毕的时机，以下例所示：

    const asyncHook = new AsyncParallelHook('async')
// 添加task
asyncHook.tapAsync('example', (data, cb) => {
    setTimeout(() => {
        console.log('example', name);
        // 在异步操做完成时，调用回调函数，表示异步任务完成
        cb()
    }, 1000);
})
// 添加task
asyncHook.tapAsync('example1', (data, cb) => {
    setTimeout(() => {
        console.log('example1', name);
        // 在异步操做完成时，调用回调函数，表示异步任务完成
        cb()
    }, 1000);
})
// 传入的两个异步任务就能够串行执行了，并在执行完毕后打印done
asyncHook.callAsync('done', () => {
    console.log('done')
})
复制代码

1. 并行执行

task一块儿执行，全部异步事件执行完成后，执行最后的回调。相似promise.all

NOTE: callAsync中计数器的使用，相似于promise.all的实现原理

class AsyncParallelHook {
    constructor() {
        this.tasks = []
    }

    tapAsync(name, task) {
        this.tasks.push(task)
    }

    callAsync(...args) {
        // 最后一个参数为，流程结束的回调
        const finalCB = args.pop()
        let index = 0
        // 这就是每一个task执行完成时调用的回调函数
        const CB = () => {
            ++index
            // 当这个回调函数调用的次数等于tasks的个数时，说明任务都执行完了
            if (index === this.tasks.length) {
                // 调用流程结束的回调函数
                finalCB()
            }
        }
        this.tasks.forEach(task => task(...args, CB))
    }

    // task是一个promise生成器
    tapPromise(name, task) {
        this.tasks.push(task)
    }
    // 使用promise.all实现
    promise(...args) {
        const tasks = this.tasks.map(task => task(...args))
        return Promise.all(tasks)
    }
}

复制代码

2. 异步串行执行

全部tasks串行执行，一个tasks执行完了在执行下一个

NOTE：callAsync的实现与使用，相似于generate执行器co和async await的原理

NOTE：promise的实现与使用，就是面试中常见的 异步任务调度题 的正解。好比，实现每隔一秒打印1次，打印5次。

class AsyncSeriesHook {
    constructor() {
        this.tasks = []
    }

    tapAsync(name, task) {
        this.tasks.push(task)
    }

    callAsync(...args) {
        const finalCB = args.pop()
        let index = 0
        // 这就是每一个task异步执行完毕以后调用的回调函数
        const next = () => {
            let task = this.tasks[index++]
            if (task) {
                // task执行完毕以后，会调用next，继续执行下一个task，造成递归，直到任务所有执行完
                task(...args, next)
            } else {
                // 任务完毕以后，调用流程结束的回调函数
                finalCB()
            }
        }
        next()
    }

    tapPromise(name, task) {
        this.tasks.push(task)
    }

    promise(...args) {
        let [first, ...others] = this.tasks
        return others.reduce((p, n) =>{
            // then函数中返回另外一个promise，能够实现promise的串行执行
            return p.then(() => n(...args))
        },first(...args))
    }
}
复制代码

3. 串行瀑布流

异步task串行执行，task的计算结果会做为下一个task的参数，以此类推。task执行结果经过cb回调函数向下传递。

class AsyncWaterfallHook {
    constructor() {
        this.tasks = []
    }

    tapAsync(name, task) {
        this.tasks.push(task)
    }

    callAsync(...args) {
        const [first] = this.tasks
        const finalCB = args.pop()
        let index = 1
        // 这就是每一个task异步执行完毕以后调用的回调函数，其中ret为上一个task的执行结果
        const next = (error, ret) => {
            if(error !== undefined) {
                return
            }
            let task = this.tasks[index++]
            if (task) {
                // task执行完毕以后，会调用next，继续执行下一个task，造成递归，直到任务所有执行完
                task(ret, next)
            } else {
                // 任务完毕以后，调用流程结束的回调函数
                finalCB(ret)
            }
        }
        first(...args, next)
    }

    tapPromise(name, task) {
        this.tasks.push(task)
    }

    promise(...args) {
        let [first, ...others] = this.tasks
        return others.reduce((p, n) =>{
            // then函数中返回另外一个promise，能够实现promise的串行执行
            return p.then(() => n(...args))
        }, first(...args))
    }
}
复制代码

总结

学了tapable的一些hook，你能扩展到不少东西：

  • promise.all
  • co模块
  • async await
  • 面试中的经典手写代码题：任务调度系列
  • 设计模式之监听者模式
  • 设计模式之发布订阅者模式

你均可以去实现，用于巩固和拓展相关知识。

咱们在学习tapable时，重点不在于这个库的细节和使用，而在于多个任务有可能的执行流程以及流程的实现原理，它们是众多实际问题的抽象模型，掌握了它们，你就能够在实际开发中和面试中触类旁通，举重若轻。

碰到过哪些流程管理方面的面试题呢？写到评论区你们一块儿讨论下!!!

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程