第八章发布-订阅模式 ⭐

发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。

8.1 现实中的发布-订阅模式

不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常之广泛。

小明把电话号码留在了售楼处。

售楼 MM 答应他，新楼盘一推出就马上发信息通知小明。

小红、小强和小龙也是一样，他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼 MM 会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们。

8.2 发布-订阅模式的作用

在上面的现实例子中，可以看出该模式的优点：

购房者不用再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者。

从这可以看出，发布—订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。

比如，我们可以订阅 AJAX 请求的 error、succ 等事件。或者如果想在动画的每一帧完成之后做一些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。

在异步编程中使用发布—订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。
购房者和售楼 MM 之间不必强耦合在一起，购房者只需把手机号码留在售楼处。

售楼处不关心购房者的任何情况，售楼处的任何变动（MM 离职，公司搬家等）也不会影响购买者会收到新楼信息这件事。

从这可以看出，发布—订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。

发布—订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。

当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。

只要之前约定的事件名没有变化，就可以自由地改变它们。

8.3 DOM 事件

实际上，只要我们曾经在 DOM 节点上面绑定过事件函数，那我们就曾经使用过发布—订阅模式。

document.body.addEventListener(
  "click",
  function () {
    alert(2);
  },
  false
);
document.body.click(); // 模拟用户点击

在这里需要监控用户点击 document.body 的动作，但是我们没办法预知用户将在什么时候点击。

所以我们订阅 document.body 上的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布这个消息。

我们也可以在 document.body 的 click 事件中，订阅多个函数。

document.body.addEventListener(
  "click",
  function () {
    alert(2);
  },
  false
);

document.body.addEventListener(
  "click",
  function () {
    alert(3);
  },
  false
);

document.body.addEventListener(
  "click",
  function () {
    alert(4);
  },
  false
);

document.body.click(); // 模拟用户点击

手动触发事件更好的做法是 IE 下用 fireEvent，标准浏览器下用 dispatchEvent 实现。

dispatchEvent

模拟一个点击事件在一个按钮上：
// 获取元素
let button = document.querySelector("button");

// 创建事件对象
let event = new Event("click");

// 使用 dispatchEvent 方法触发事件
button.dispatchEvent(event);
除了基础的 Event 构造函数，还有很多其他类型的事件，如 MouseEvent, KeyboardEvent, TouchEvent 等，这些都可以用于创建对应的事件对象，并使用 dispatchEvent 来触发。

主要使用场景：

测试: 自动化测试中经常需要模拟事件触发来测试事件处理函数的行为。

自定义控件: 当你创建自定义控件并需要在特定情况下触发某些事件时。

模拟用户行为: 在某些应用中，你可能需要模拟真实用户的行为，例如演示或教程。

8.4 自定义事件

除了 DOM 事件，我们还会经常实现一些自定义的事件，这种依靠自定义事件完成的发布—订阅模式可以用于任何 JavaScript 代码中。

实现一个发布-订阅模式：

指定一个发布者
给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者
发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者调函数

我们还可以往回调函数里填入一些参数，订阅者可以接收这些参数。

比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息，订阅者接收到这些信息之后可以进行各自的处理。

var salesOffices = {}; // 定义售楼处

salesOffices.clientList = []; // 缓存列表，存放订阅者的回调函数

salesOffices.listen = function (fn) {
  // 增加订阅者
  this.clientList.push(fn); // 订阅的消息添加进缓存列表
};

salesOffices.trigger = function () {
  // 发布消息
  for (var i = 0, fn; (fn = this.clientList[i++]); ) {
    // arguments 是发布消息时带上的参数
    // this: salesOffices
    fn.apply(this, arguments);
  }
};

// TEST
salesOffices.listen(function (price, squareMeter) {
  // 小明订阅消息
  console.log("价格= " + price);
  console.log("squareMeter= " + squareMeter);
});

salesOffices.listen(function (price, squareMeter) {
  // 小红订阅消息
  console.log("价格= " + price);
  console.log("squareMeter= " + squareMeter);
});

salesOffices.trigger(2000000, 88); // 输出：200 万，88 平方米
salesOffices.trigger(3000000, 110); // 输出：300 万，110 平方米

现在已经实现了一个最简单的发布-订阅模式。

但是，如果小明只想买 88 平方米的房子，结果发布者把 110 平方米的信息也推送给了小明，这对小明来说是不必要的困扰。

所以我们有必要增加一个标示 key，让订阅者只订阅自己感兴趣的消息。

var salesOffices = {}; // 定义售楼处

// 更换数据结构，array => object
salesOffices.clientList = {}; // 缓存列表，存放订阅者的回调函数

salesOffices.listen = function (key, fn) {
  if (!this.clientList[key]) {
    // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
    this.clientList[key] = [];
  }
  this.clientList[key].push(fn); // 订阅的消息添加进消息缓存列表
};

salesOffices.trigger = function () {
  // 发布消息
  var key = Array.prototype.shift.call(arguments), // 取出消息类型
    fns = this.clientList[key]; // 取出该消息对应的回调函数集合
  if (!fns || fns.length === 0) {
    // 如果没有订阅该消息，则返回
    return false;
  }
  for (var i = 0, fn; (fn = fns[i++]); ) {
    fn.apply(this, arguments); // (2) // arguments 是发布消息时附送的参数
  }
};

salesOffices.listen("squareMeter88", function (price) {
  // 小明订阅 88 平方米房子的消息
  // 输出： 2000000
  console.log(`发送消息给订阅 88 平方米房子的小明
  "价格= " + ${price}`);
});

salesOffices.listen("squareMeter110", function (price) {
  // 小红订阅 110 平方米房子的消息
  // 输出： 3000000
  console.log(`发送消息给订阅 110 平方米房子小红
  "价格= " + ${price}`);
});

salesOffices.trigger("squareMeter88", 2000000); // 发布 88 平方米房子的价格
salesOffices.trigger("squareMeter110", 3000000); // 发布 110 平方米房子的价格

这样，订阅者这就可以只订阅自己感兴趣的事件了。

8.5 发布-订阅模式的通用实现

假设现在小明又去另一个售楼处买房子，那么这段代码是否必须在另一个售楼处对象上重写一次呢，有没有办法可以让所有售楼处对象都拥有发布—订阅功能呢？

当然是可以的，JavaScript 作为一门解释执行的语言，给对象动态添加职责是理所当然的事情。

// 1. 再来测试一番，我们给售楼处对象 salesOffices 动态增加发布—订阅功能：
var event = {
  clientList: [],
  listen: function (key, fn) {
    if (!this.clientList[key]) {
      this.clientList[key] = [];
    }
    this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
  },
  trigger: function () {
    var key = Array.prototype.shift.call(arguments), // (1);
      fns = this.clientList[key];
    if (!fns || fns.length === 0) {
      // 如果没有绑定对应的消息
      return false;
    }
    for (var i = 0, fn; (fn = fns[i++]); ) {
      fn.apply(this, arguments); // (2) // arguments 是 trigger 时带上的参数
    }
  },
};

// 2. 再定义一个 `installEvent` 函数，这个函数可以给所有的对象都动态安装发布—订阅功能：
var installEvent = function (obj) {
  for (var i in event) {
    obj[i] = event[i];
  }
};

// TEST
var salesOffices = {};
installEvent(salesOffices);
salesOffices.listen("squareMeter88", function (price) {
  // 小明订阅消息
  console.log("价格= " + price);
});
salesOffices.listen("squareMeter100", function (price) {
  // 小红订阅消息
  console.log("价格= " + price);
});
salesOffices.trigger("squareMeter88", 2000000); // 输出：2000000
salesOffices.trigger("squareMeter100", 3000000); // 输出：3000000

8.6 取消订阅的事件

有时候，我们也会想取消订阅的事件。

比如小明突然不想买房子了，为了避免继续接收到售楼处推送过来的短信，小明需要取消之前订阅的事件。

现在我们给 event 对象增加 remove 方法：

event.remove = function (key, fn) {
  var fns = this.clientList[key];
  if (!fns) {
    // 如果 key 对应的消息没有被人订阅，则直接返回
    return false;
  }
  if (!fn) {
    // 如果没有传入具体的回调函数，表示需要取消 key 对应消息的所有订阅
    fns && (fns.length = 0);
  } else {
    for (var l = fns.length - 1; l >= 0; l--) {
      // 反向遍历订阅的回调函数列表
      var _fn = fns[l];
      if (_fn === fn) {
        fns.splice(l, 1); // 删除订阅者的回调函数
      }
    }
  }
};

var salesOffices = {};
var installEvent = function (obj) {
  for (var i in event) {
    obj[i] = event[i];
  }
};

// TEST
installEvent(salesOffices);

salesOffices.listen(
  "squareMeter88",
  (fn1 = function (price) {
    // 小明订阅消息
    console.log("价格= " + price);
  })
);

salesOffices.listen(
  "squareMeter88",
  (fn2 = function (price) {
    // 小红订阅消息
    console.log("价格= " + price);
  })
);

salesOffices.remove("squareMeter88", fn1); // 删除小明的订阅
salesOffices.trigger("squareMeter88", 2000000); // 输出：2000000

8.7 真实的例子——网站登录

假如我们正在开发一个商城网站，网站里有 header 头部、nav 导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件，就是必须先用 AJAX 异步请求获取用户的登录信息。这是很正常的，比如用户的名字和头像要显示在 header 模块里，而这两个字段都来自用户登录后返回的信息。至于 AJAX 请求什么时候能成功返回用户信息，这点我们没有办法确定。

但现在还不足以说服我们在此使用发布—订阅模式，因为异步的问题通常也可以用回调函数来解决。

更重要的一点是，我们不知道除了 header 头部、nav 导航、消息列表、购物车之外，将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合，比如下面这样的形式：

login.succ(function (data) {
  header.setAvatar(data.avatar); // 设置 header 模块的头像
  nav.setAvatar(data.avatar); // 设置导航模块的头像
  message.refresh(); // 刷新消息列表
  cart.refresh(); // 刷新购物车列表
});

现在登录模块是我们负责编写的，但我们还必须了解 header 模块里设置头像的方法叫 setAvatar、购物车模块里刷新的方法叫 refresh，这种耦合性会使程序变得僵硬，header 模块不能随意再改变 setAvatar 的方法名，它自身的名字也不能被改为 header1、header2。

如果现在还要增加一个收货地址管理模块：

login.succ(function (data) {
  header.setAvatar(data.avatar);
  nav.setAvatar(data.avatar);
  message.refresh();
  cart.refresh();
  address.refresh(); // 增加这行代码
});

你会疲于越来越多突如其来的业务需求，最后只能去重构代码。

用发布-订阅模式重写之后，对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。

当登录成功时，登录模块只需要发布登录成功的消息，而业务方接受到消息之后，就会开始进行各自的业务处理，登录模块并不关心业务方究竟要做什么，也不想去了解它们的内部细节。

重写后的代码：

$.ajax("http:// xxx.com?login", function (data) {
  // 登录成功
  // 发布登录成功的消息，并带有登录成功后返回的数据
  login.trigger("loginSucc", data);
});

// 定义了一个 header 模块
var header = (function () {
  login.listen("loginSucc", function (data) {
    header.setAvatar(data.avatar);
  });
  return {
    setAvatar: function (data) {
      console.log("设置 header 模块的头像");
    },
  };
})();

var nav = (function () {
  // nav 模块
  login.listen("loginSucc", function (data) {
    nav.setAvatar(data.avatar);
  });
  return {
    setAvatar: function (avatar) {
      console.log("设置 nav 模块的头像");
    },
  };
})();

这样我们随时可以把 setAvatar 的方法名改成其他名字。

想增加收货地址模块，也只要在收货地址模块里加上监听消息的方法即可，而这可以让开发该模块的同事自己完成，你作为登录模块的开发者，永远不用再关心这些行为了。

如果在 AJAX 请求后要做的事情太多，太分散，就更适合使用发布-订阅模式来组织代码，而不是回调函数来处理。

把 login.listen(eventName, fn) 事件订阅逻辑放在自执行函数内的几个好处：

不会污染到全局作用域

这种模式在 JavaScript 中常用于创建模块或封装功能，以限制变量的作用域并防止全局命名空间污染。

立即执行

一旦代码加载，login.listen 就会立即被执行，并订阅 loginSucc 事件。这确保了不需要任何外部调用来激活该订阅。

模块化

封装特定功能到自执行函数中是一个简单的模块化策略。每个 IIFE 可以被视为一个独立的模块，它有自己的私有变量和方法，同时可以公开一些方法到外部。在上面示例中，header 是一个模块，它公开了 setAvatar 方法，但事件订阅逻辑都是私有的。

数据隔离，避免命名冲突

由于 IIFE 创建了一个新的作用域，它可以用来隔离数据。这意味着，如果多个模块都使用同名的变量或函数，它们之间不会相互影响。

维护和组织

将相关代码片段封装到一起，更易于维护和阅读。

发布-订阅模式很好地解耦代码，使多个代码模块可以独立地工作，而不需要互相知道对方的存在。

8.8 全局的发布-订阅对象

回想一下我们上面实现的发布-订阅模式（售楼例子和登录例子），思考一下是否存在什么问题：

每一个发布者都有一个 trigger 方法，listen 方法和 clientList 缓存列表。

这其实是一种资源浪费。
发布者和订阅者之间还是存在一定的耦合性。

小明至少要知道售楼处对象的名字是 salesOffices，才能顺利订阅到事件。

而如果小明还订阅了 salesOffices2，那同样的订阅操作要再处理一次。

但其实在现实中，我们不一定要亲自去售楼处，我们只要把订阅的请求交给中介公司，而各大房产公司也只需要通过中介公司来发布房子信息。

这样一来，我们不用关心消息是来自哪个房产公司，我们在意的是能否顺利收到消息。

为了保证订阅者和发布者能顺利通信，订阅者和发布者都必须知道这个中介公司。

同样，在程序中，发布—订阅模式可以用一个全局的 Event 对象来实现。

订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者。

Event 作为一个类似 “中介者” 的角色，把订阅者和发布者联系起来。

var Event = (function () {
  var clientList = {},
    listen,
    trigger,
    remove;
  listen = function (key, fn) {
    if (!clientList[key]) {
      clientList[key] = [];
    }
    clientList[key].push(fn);
  };
  trigger = function () {
    var key = Array.prototype.shift.call(arguments),
      fns = clientList[key];
    if (!fns || fns.length === 0) {
      return false;
    }
    for (var i = 0, fn; (fn = fns[i++]); ) {
      fn.apply(this, arguments);
    }
  };
  remove = function (key, fn) {
    var fns = clientList[key];
    if (!fns) {
      return false;
    }
    if (!fn) {
      fns && (fns.length = 0);
    } else {
      for (var l = fns.length - 1; l >= 0; l--) {
        var _fn = fns[l];
        if (_fn === fn) {
          fns.splice(l, 1);
        }
      }
    }
  };
  return {
    listen,
    trigger,
    remove,
  };
})();

Event.listen("squareMeter88", function (price) {
  // 小红订阅消息
  console.log("价格= " + price); // 输出：'价格=2000000'
});

Event.trigger("squareMeter88", 2000000); // 售楼处发布消息

有了中介公司 Event 之后，我们不再需要知道房子开售的消息来自哪个售楼处。

8.9 模块间通信

现在有两个模块，a 模块里面有一个按钮，每次点击按钮之后，b 模块里的 div 中会显示按钮的总点击次数。

我们用全局发布—订阅模式完成下面的代码，使得 a 模块和 b 模块可以在保持封装性的前提下进行通信。

<!DOCTYPE html>
<html>
  <body>
    <button id="count">点我</button>
    <div id="show"></div>
  </body>
  <script type="text/JavaScript">
    var a = (function(){
      var count = 0;
      var button = document.getElementById( 'count' );
      button.onclick = function(){
      Event.trigger( 'add', count++ );}
    })();

    var b = (function(){
      var div = document.getElementById( 'show' );
      Event.listen( 'add', function( count ){
      div.innerHTML = count;
      });}
    )();
  </script>
</html>

要留意另一个问题，模块之间如果用了太多的全局发布—订阅模式来通信，那么模块与模块之间的联系就被隐藏到了背后。

我们最终会搞不清楚消息来自哪个模块，或者消息会流向哪些模块，这又会给我们的维护带来一些麻烦，也许某个模块的作用就是暴露一些接口给其他模块调用。

8.10 必须要先订阅再发布吗 ⭐

我们所了解到的发布—订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。

如果把顺序反过来，发布者先发布一条消息，而在此之前并没有对象来订阅它，这条消息无疑将消失在宇宙中。

在某些情况下，我们需要先将这条消息保存下来，等到有对象来订阅它的时候，再重新把消息发布给订阅者。

因为异步的原因，我们不能保证 AJAX 请求返回的时间。

有时候它返回得比较快，而此时用户导航模块的代码还没有加载好（还没有订阅相应事件）。

特别是在用了一些模块化惰性加载的技术后，这是很可能发生的事情。

也许我们还需要一个方案，使得我们的发布—订阅对象拥有先发布后订阅的能力。

为了满足这个需求，我们要建立一个存放离线事件的堆栈。

当事件发布的时候，如果此时还没有订阅者来订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里。

这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，我们将遍历堆栈并且依次执行这些包装函数，也就是重新发布里面的事件。

当然离线事件的生命周期只有一次，就像 QQ 的未读消息只会被重新阅读一次，所以刚才的操作我们只能进行一次。

// 先发布
Event.trigger("click", 1);

// 后订阅
Event.listen("click", function (a) {
  console.log(a); // 输出：1
});

8.11 全局事件的命名冲突

全局的发布—订阅对象里只有一个 clientList 来存放消息名和回调函数，大家都通过它来订阅和发布各种消息。

久而久之，难免会出现事件名冲突的情况，所以我们还可以给 Event 对象提供创建命名空间的功能。

Event.create("namespace1").listen("click", function (a) {
  console.log(a); // 输出：1
});
Event.create("namespace1").trigger("click", 1);

Event.create("namespace2").listen("click", function (a) {
  console.log(a); // 输出：2
});
Event.create("namespace2").trigger("click", 2);

实现先发布后订阅和命名空间的代码

var Event = (function () {
  var global = this,
    Event,
    _default = "default";
  Event = (function () {
    var _listen,
      _trigger,
      _remove,
      _slice = Array.prototype.slice,
      _shift = Array.prototype.shift,
      _unshift = Array.prototype.unshift,
      namespaceCache = {},
      _create,
      find,
      each = function (ary, fn) {
        var ret;
        for (var i = 0, l = ary.length; i < l; i++) {
          var n = ary[i];
          ret = fn.call(n, i, n);
        }
        return ret;
      };
    _listen = function (key, fn, cache) {
      if (!cache[key]) {
        cache[key] = [];
      }
      cache[key].push(fn);
    };
    _remove = function (key, cache, fn) {
      if (cache[key]) {
        if (fn) {
          for (var i = cache[key].length; i >= 0; i--) {
            if (cache[key][i] === fn) {
              cache[key].splice(i, 1);
            }
          }
        } else {
          cache[key] = [];
        }
      }
    };
    _trigger = function () {
      var cache = _shift.call(arguments),
        key = _shift.call(arguments),
        args = arguments,
        _self = this,
        ret,
        stack = cache[key];
      if (!stack || !stack.length) {
        return;
      }
      return each(stack, function () {
        return this.apply(_self, args);
      });
    };
    _create = function (namespace) {
      var namespace = namespace || _default;
      var cache = {},
        offlineStack = [], // 离线事件
        ret = {
          listen: function (key, fn, last) {
            _listen(key, fn, cache);
            if (offlineStack === null) {
              return;
            }
            if (last === "last") {
              offlineStack.length && offlineStack.pop()();
            } else {
              each(offlineStack, function () {
                this();
              });
            }
            offlineStack = null;
          },
          one: function (key, fn, last) {
            _remove(key, cache);
            this.listen(key, fn, last);
          },
          remove: function (key, fn) {
            _remove(key, cache, fn);
          },
          trigger: function () {
            var fn,
              args,
              _self = this;
            _unshift.call(arguments, cache);
            args = arguments;
            fn = function () {
              return _trigger.apply(_self, args);
            };
            if (offlineStack) {
              return offlineStack.push(fn);
            }
            return fn();
          },
        };
      return namespace
        ? namespaceCache[namespace]
          ? namespaceCache[namespace]
          : (namespaceCache[namespace] = ret)
        : ret;
    };
    return {
      create: _create,
      one: function (key, fn, last) {
        var event = this.create();
        event.one(key, fn, last);
      },
      remove: function (key, fn) {
        var event = this.create();
        event.remove(key, fn);
      },
      listen: function (key, fn, last) {
        var event = this.create();
        event.listen(key, fn, last);
      },
      trigger: function () {
        var event = this.create();
        event.trigger.apply(this, arguments);
      },
    };
  })();
  return Event;
})();

8.12 JavaScript 实现发布－订阅模式的便利性

在 Java 中实现一个自己的发布—订阅模式，通常会

把订阅者对象自身当成引用传入发布者对象中，
同时订阅者对象还需提供一个名为诸如 update 的方法，供发布者对象在适合的时候调用。

在 JavaScript 中，我们用 注册回调函数的形式 来代替传统的发布—订阅模式，显得更加优雅和简单。

另外，在 JavaScript 中，我们无需去选择使用推模型还是拉模型。

推模型是指，在事件发生时，发布者一次性把所有更改的状态和数据都推送给订阅者。
拉模型不同的地方是，发布者仅仅通知订阅者事件已经发生了，此外发布者要提供一些公开的接口供订阅者来主动拉取数据。

拉模型的好处是可以让订阅者“按需获取”，但同时有可能让发布者变成一个“门户大开”的对象，同时增加了代码量和复杂度。

在 JavaScript 中，arguments 可以很方便地表示参数列表，所以我们一般都会选择推模型，使用 Function.prototype.apply 方法把所有参数都推送给订阅者。

8.13 小结

发布—订阅模式的优点非常明显，

一为时间上的解耦，
二为对象之间的解耦。

它的应用非常广泛，既可以用在异步编程中，也可以帮助我们完成更松耦合的代码编写。

发布—订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。

从架构上来看，无论是 MVC 还是 MVVM，都少不了发布—订阅模式的参与，而且 JavaScript 本身也是一门基于事件驱动的语言。

发布-订阅的一些缺点：

创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。
发布—订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。

特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个 bug 不是件轻松的事情。

第八章 发布-订阅模式 ⭐

8.1 现实中的发布-订阅模式​

8.2 发布-订阅模式的作用​

8.3 DOM 事件​

8.4 自定义事件​

8.5 发布-订阅模式的通用实现​

8.6 取消订阅的事件​

8.7 真实的例子——网站登录​

8.8 全局的发布-订阅对象​

8.9 模块间通信​

8.10 必须要先订阅再发布吗 ⭐​

8.11 全局事件的命名冲突​

实现先发布后订阅和命名空间的代码​

8.12 JavaScript 实现发布－订阅模式的便利性​

8.13 小结​