JS 异步操作的模式总结

回调函数

function f1(callback) {
  // ...
  callback();
}

function f2() {
  // ...
}

f1(f2);

优点

  • 简单、容易理解和实现。

缺点

  • 不利于代码的阅读和维护,各个部分之间高度耦合(coupling),使得程序结构混乱、流程难以追踪(尤其是多个回调函数嵌套的情况)
  • 每个任务只能指定一个回调函数。

事件监听

采用事件驱动模式。异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生。

// jQuery 写法
function f1() {
  setTimeout(function () {
    // ...
    f1.trigger('done');
  }, 1000);
}

f1.on('done', f2);

优点

  • 比较容易理解。
  • 可以绑定多个事件,每个事件可以指定多个回调函数。
  • 可以“去耦合”(decoupling),有利于实现模块化。

缺点

  • 整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程。

发布/订阅模式 (publish-subscribe pattern)又称为 观察者模式( observer pattern)

事件完全可以理解成“信号”,如果存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。

// Ben Alman 的 Tiny Pub/Sub (jQuery 插件) 实现例

// 发布
function f1() {
  setTimeout(function () {
    // ...
    jQuery.publish('done');
  }, 1000);
}

// 订阅
jQuery.subscribe('done', f2);

// 取消订阅
jQuery.unsubscribe('done', f2);

优点

  • 和其他方式相比,代码意图变得明显。因为可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

总结自:

https://wangdoc.com/javascript/async/general.html#异步操作的模式

原文地址:https://www.cnblogs.com/huangtq/p/14679758.html