之前做了个项目,要用流程图画出前端业务流程(包括前后台接口交互和前端页面元素操作等),这样就要自动生成代码块,且需要一个执行栈来执行一系列代码。

主要使用Promise,以下代码是抽象简化后的,仅表示设计思维:

const excuteStack = (func,...args) => {
  return new Promise((resolve,reject) => {
    try {
      func(resolve,...args);
    } catch(err) {
      reject(err)
    }
  })
}

const createStack = (stack,promise) => {
  const top = stack.shift();
  if(top){
    const func = top.func;
    const args = top.params;
    return promise.then(()=> { 
      return createStack(stack,excuteStack(func,args))
    })
  } else {
    return
  }
}
//测试
const i = 0;

const testFunc = (resolve,...args) =>{
  setTimeout(() => {
    console.log(new Date() + " ========= " + args)
    resolve(true)
  },2000)
};
const funcStack = [];
for(let i = 0;i < 10; i++ ){
  funcStack.push({
    func:testFunc,
    params:i
  })
}

const start = new Promise(resolve => {
  resolve(true);
})

createStack(funcStack,start);

执行结果为:

Sat Aug 22 2020 22:02:46 GMT+0800 (中国标准时间) ========= 0
Sat Aug 22 2020 22:02:48 GMT+0800 (中国标准时间) ========= 1
Sat Aug 22 2020 22:02:50 GMT+0800 (中国标准时间) ========= 2
Sat Aug 22 2020 22:02:52 GMT+0800 (中国标准时间) ========= 3
Sat Aug 22 2020 22:02:54 GMT+0800 (中国标准时间) ========= 4
Sat Aug 22 2020 22:02:56 GMT+0800 (中国标准时间) ========= 5
Sat Aug 22 2020 22:02:58 GMT+0800 (中国标准时间) ========= 6
Sat Aug 22 2020 22:03:00 GMT+0800 (中国标准时间) ========= 7
Sat Aug 22 2020 22:03:02 GMT+0800 (中国标准时间) ========= 8
Sat Aug 22 2020 22:03:04 GMT+0800 (中国标准时间) ========= 9

穷凶极恶丶带恶人
441 声望1 粉丝

正在学webpack/mock