一个简单的 koa 的洋葱 模型

大家都知道 ，koa 最有特点之一就是 他的 洋葱模型 可以从外往里执行 今天也来实现一下

const middleWares = [];
middleWares.push((next: Function) => {
  console.log(1);
  next(); // tag2
  console.log(1.1);
});

middleWares.push((next: Function) => {
  console.log(2);
  next();
  console.log(2.1);
});

middleWares.push((next: Function) => {
  console.log(3);
  next();
  console.log(3.1);
});
let fn = compse(middleWares);
fn(); // tag1

要求是通过实现 compse 输出 1 2 3 3.1 2.1 1.1

function compse(middleWares: Function[]) {
  let copyMiddleWares = [...middleWares],
    index = 0;
  let fn = () => {
    if (index >= copyMiddleWares.length) return;
    let middleFn = copyMiddleWares[index];
    index++;
    return middleFn(fn); // tag2
  };
  return fn;  //tag1
}

其实代码很简单,可以说是利用了闭包的原理
当你第一次执行的函数，执行的是 外层的 tag1
使用 next 的时候，执行的是 tag2, next 指代的是 index 为1 的 fn 函数

next=>{
    console.log(1) //
    
   next 指代的是他=> {
        if (index >= copyMiddleWares.length) return;
        let middleFn = copyMiddleWares[index];
        index++;
        return middleFn(fn);// 执行 1，然后fn 放进去
        // 可以想象成 fn 替换 这个next 的过程
    }
    
    console.log(1.1)
}


console.log(1)
  next=>  console.log(2)
      next=>  console.log(3)
              console.log(3.1)
    console.log(2.1)
console.log(1.1)

一个数组函数自执行，肯定是当你执行完第一个的时候，把第二个拿出来执行，这次只不过，需要一个 next 函数来改变执行顺序

note：来自www.bilibili.com/video/BV1ug… 2022,5,15 20:05