js异步并行和串行

最近学了学webpack的插件，其实挺简单的，webpack本质上是一种事件流机制，核心是tapable(不是table)，通过事件的注册和监听，触发函数方法。所以写插件就是通过暴露给我们的方法去注册和调用。

tapable主要是同步和异步，异步分为并行和串行，今天主要是学习一下异步的并行和串行，才能更好理解tapable。现在实现异步的有很多，比如promise、generator、async await，用这些去实现异步的并行和串行非常简便，promise的all方法就是异步的并行。

异步并行：

我觉得应该不需要解释，就是几个异步同时执行，最后一个执行完毕调用一下回调方法，简单实现：

class AsyncParallel{

constructor() {

this.cbList = [];

}

tap(fn) {

this.cbList.push(fn);

}

call(end){

let index = 0;

this.cbList.forEach(fn => {

fn(() => {

index++;

if(index === this.cbList.length){end()};

});

})

}

}

let ap = new AsyncParallel();

ap.tap((cb) => {

setTimeout(() => {

console.log(1);

cb();

}, 3000)

})

ap.tap((cb) => {

setTimeout(() => {

console.log(3);

cb();

}, 1000)

});

ap.call(() => {

console.log('end');

})

异步串行：

第一个执行完执行下一个，其实就是用一个next方法去判断执行下一个，简单实现：

class AsyncSerial{

constructor() {

this.cbList = [];

}

tap(fn) {

this.cbList.push(fn);

}

call(end){

let index = 0;

let next = () => {

if(index === this.cbList.length){

end();

return;

}

let fn = this.cbList[index];

fn(() => {

index++;

next();

})

}

next();

}

}

let ap = new AsyncSerial();

ap.tap((cb) => {

setTimeout(() => {

console.log(1);

cb();

}, 3000)

})

ap.tap((cb) => {

setTimeout(() => {

console.log(3);

cb();

}, 2000)

});

ap.call(() => {

console.log('end');

})

大概就是这样，继续扩展就会复杂很多，比如是否要把结果传递下去，中间报错是否就终止，返回值如果不是undefined是否继续等，如果使用promise会更简单一些。然后建议去看看tapable，里面可以实现的会更多跟复杂，如果想学习webpack内部一些机制，tapable是一定要了解的。

（完）

Coding 个人笔记