一般来说，我们在遇到对顺序要求严格的任务执行时，就需要维护一个任务管理器，保证任务的执行顺序。前端开发过程中，设计队列/栈的场景比较多，而需要用到任务管理器的场景偏少，本文主要介绍如何实现一个任务管理器。

理解任务管理器比较好的场景大概是协同文档编辑的场景，比如 Google Docs、腾讯文档、Sketch 协同等。我们在进行协同编辑的时候，对版本和消息时序有比较严格的要求，因此常常需要维护一个任务管理器来管理版本相关的任务。

以上是一些科普知识，用于辅助大家理解接下来的任务管理器设计，下面我们来进入正文。

单个任务的设计

对于单个任务的设计，主要考虑任务的执行。一个任务的作用就是用来运行的，那么对于任务来说，可能会有几个状态：待执行、正在执行、执行失败、执行成功等：

enum TASK_STATUS {
  INIT = "INIT", // 初始状态
  READY = "READY", // 可执行
  RUNNING = "RUNNING", // 执行中
  SUCCESS = "SUCCESS", // 执行成功
  FAILED = "FAILED", // 执行失败
  DESTROY = "DESTROY", // 已销毁
}

生命周期

既然涉及到任务的各个状态，我们也可以赋予任务一些生命周期。这里我们举一些例子，但最终的生命周期设计应该要和自己业务实际情况结合。

onReady: 任务执行前准备工作

在每个任务执行之前，我们都需要再次确认下这个任务的状态（是否已经失效），也可能需要做些准备工作，这个阶段可以命名为onReady：

export interface ICommonTask {
  onReady(): Promise<boolean>;
}

可以看到，该生命周期以返回 Promise 的方式来运行，该 Promise 包括一个布尔值，用于判断任务是否继续执行。比如我们需要在执行任务之前，从服务端获取一些数据，那么可以这么实现：

class ATask implements ICommonTask {
  async onReady() {
    const result = await getSomeDate();
    if (result.isSuccess) {
      return true;
    }
    return false;
  }
}

onRun: 任务执行中

任务准备工作完成之后，任务就需要开始真正运行了。同样的，我们将这个阶段命名为onRun：

export interface ICommonTask {
  onReady(): Promise<boolean>;
  onRun(): Promise<CommonTask[] | void>;
}

这里我们看到，onRun阶段执行同样返回一个 Promise，但 Promise 内容和onReady阶段不一致，它可能返回一个或者多个CommonTask组成的数组。这是因为一个任务执行的过程中，可能会产生新的任务，也可能由于其他条件限制，导致它需要创建一个别的任务先执行完毕，才能继续执行自己原本的任务。比如，B 任务在执行的时候，如果条件不满足，则需要先执行一个 A 任务：

class BTask implements ICommonTask {
  // 其他省略
  async onRun() {
    if (needATask) {
      return [new ATask(), this.resetTask()];
    }
    // 其他正常执行任务逻辑
  }
}

onDestroy: 任务执行完毕，即将销毁

很多时候我们实现一些模块功能，都会产生一些临时变量，也可能有一些事件绑定、DOM 元素需要在该模块注销的时候清除，因此进行主动的销毁和清理是一个很好的习惯。对于一个任务的执行来说也是一样的，我们将这个阶段命名为onDestroy：

export interface ICommonTask {
  onReady(): Promise<boolean>;
  onRun(): Promise<CommonTask[] | void>;
  onDestroy(): Promise<void>;
}

对于任务的生命周期相关，我们暂时讲到这里，接下来我们来看任务的执行。

任务执行

由于每个任务都会有状态、生命周期、执行功能、重置功能，我们可以实现一个通用的任务：

abstract class CommonTask implements ICommonTask {
  /** 生命周期钩子 **/
  abstract onReady: () => Promise<boolean>;
  abstract onRun: () => Promise<CommonTask[] | void>;
  abstract onDestroy: () => Promise<void>;

  /** 执行任务 **/
  public async execute(): Promise<CommonTask[] | void> {
    // step 1 准备任务
    if (!(await this.onReady())) {
      // 任务准备校验不通过，直接没必要执行了
      return this.onDestroy();
    }
    // step 2 执行任务
    const runResult = await this.onRun();
    if (runResult) {
      // 若分裂出新的任务，返回并不再继续执行了
      return runResult;
    }
    // step 3 销毁任务
    this.onDestroy();
  }
}

这里 CommonTask 提供了一个通用的execute方法用于执行任务，我们能看到其中的实现也是根据生命周期依次执行。当然，这里其实还需要在执行到对应生命周期的时候，扭转任务状态。除此之外，任务执行异常的处理也并不在这里，因此外界需要进行try catch处理。

那么到底在哪里需要进行异常处理呢？我们接下来看看任务管理器。

任务管理器

显然，任务管理器的职责主要是保证任务队列中的任务有序、顺利地执行，其中会包括任务执行时的异常处理。除此之外，任务管理器还需要对外提供添加任务，以及暂停、恢复、停止这样的能力。

任务管理器状态

既然任务管理器有对任务的管理，当然它也需要维护自身的状态，例如：

enum QUEUE_STATUS {
  WORKING = "WORKING", // 工作中
  PAUSE = "PAUSE", // 暂停
  IDLE = "IDLE", // 空闲
  SHUTDOWN = "SHUTDOWN", // 关停
}

这些是任务管理器基本的状态，包括空闲状态、工作中、暂停、停止等。对于每一个不同的状态来说，相应的任务管理器也会有一些更新状态的方法：

class TaskManager {
  status: QUEUE_STATUS = QUEUE_STATUS.IDLE;
  // 暂停任务管理器
  public pause() {
    this.status = QUEUE_STATUS.PAUSE;
    // 当前正在运行的任务需要处理
  }
  // 恢复任务管理器
  public resume() {
    // 如果被关停了，则不能恢复啦
    if (isShutDown) {
      return;
    }
    this.status = QUEUE_STATUS.WORKING;
    this.work();
  }
  // 关停任务管理器
  public resume() {
    this.status = QUEUE_STATUS.SHUTDOWN;
  }
  // 任务管理器工作
  private work() {
    if (!isWorking && hasNextTask) {
      // 如果有会继续执行下一个任务
      // 直到任务管理器被暂停、或者任务队列为空
      runNextTask();
    }
  }
}

这里面比较关键的点有两个：

1. 暂停任务管理器的时候，需要考虑如何处理正在运行的任务。
2. 执行任务的时候，需要进行一些异常处理。同时，任务的运行可能会进行分裂并产生新的任务，需要对新任务进行处理。

暂停与恢复

我们先来看第一点：任务管理器暂停和恢复时的处理。

一个简单粗暴的处理方式是，将当前正在运行的任务继续运行完成。但这种处理方式，与我们对于暂停的理解有一些误差。因此，我们可以考虑让任务本身支持重置的功能，比如运行过程中判断任务状态是否需要继续执行，结合销毁当前任务、并将原有任务进行重置。

abstract class CommonTask {
  /** 重置任务 **/
  // 会返回任务本身，该任务应该是被重置过的最初状态
  abstract reset(): CommonTask;
}

实现起来其实也不会很难：

class ATask extends CommonTask {
  public reset() {
    // 销毁当前任务
    this.destroy();
    // 并返回一个重置后的新任务
    return new ATask();
  }
}

对于任务管理器来说，要做的事情也比较简单了：暂停任务管理器的时候，将当前任务重置、并扔回任务队列的头部。

class TaskManager {
  // 暂停任务管理器
  public pause() {
    this.status = QUEUE_STATUS.PAUSE;
    // 将当前任务重置，并扔回任务队列头部
    taskList.unshift(currentTask.reset());
  }
}

任务管理器工作

任务管理器工作的时候，主要工作内容包括依次运行任务、处理任务异常、处理任务运行后分裂产生的新任务。

class TaskManager {
  // 任务管理器工作
  private async work() {
    if (!isWorking && hasNextTask) {
      // 如果满足条件，会继续执行下一个任务
      currentTask = getNextTask();
      const resultTask = await currentTask.execute().catch((error) => {
        // 异常处理
      });
      // 判断是否有分裂的新任务
      if (resultTask) {
        // 如果有，就塞回到任务队列的头部，需要优先处理
        taskList.unshift(resultTask);
      }
      // 继续执行下一个任务
      checkContinueWork();
    }
  }
}

以上大概是我们在设计一个任务管理器的过程中，需要进行思考的一些问题、和简单的实现方式。除此之外，在一个更加复杂的应用场景下，我们还可能会遇到多个任务队列的管理和资源调度、同步任务和异步任务的管理、任务支持优先级设置等各式各样的功能设计。

结束语

任务管理也好、队列/堆栈的设计也好，都会在工程中经常遇到。而随着应用场景的不一样，我们的设计并不能简单地进行复用，每一次都可以结合业务本身、工程本身而设计出更加合适的调整，每一次我们也都可以给自己提出不一样的要求。