JavaScript发布—订阅模式

1 什么是发布—订阅模式

发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在JavaScript开发中，我们一般用事件模型来替代传统的发布—订阅模式。

现实中有许多发布—订阅模式的例子，比如微信公众号，如果关注的公众号有新的动态会立马推送给订阅者，比如演唱会抢票等。

发布—订阅模式有以下优点：

• 可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如，我们可以订阅ajax请求的error、success等事件，我们无需过多关注对象在异步运行期间的内部状态，只需要订阅感兴趣的事件发生点就可以。
• 可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变它们。

2 DOM 事件

在DOM节点上面绑定事件函数，也是发布—订阅模式的体现：

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

在这里需要监控用户点击document.body的动作，但是我们没办法预知用户将在什么时候点击，所以我们订阅document.body上的click事件，当body节点被点击时，body节点便会向订阅者发布这个消息。

3 实现一个发布—订阅模式

我们按照以下思路实现一个发布—订阅模式：

• 指定谁充当发布者（比如公众号运营者）
• 给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（关注的列表）
• 发布消息的时候，发布者会遍历缓存列表依次触发里面的回调函数（给每个关注的人发通知消息），我们还可以往回调函数里填入一些信息，订阅者接收到这些信息之后可以进行各自的处理

实现代码如下：

var officialAccount = {}; // 定义公众号拥有者

officialAccount.clientList = []; // 缓存列表

// 添加订阅者
officialAccount.listen = function (fun) {
  this.clientList.push(fun);
};

// 发布消息
officialAccount.trigger = function () {
  for (let i = 0, fun; (fun = this.clientList[i++]); ) {
    fun.apply(this, arguments);
  }
};

测试一下：

// 小明订阅消息
officialAccount.listen(function getPrice(type, price) {
  console.log("水果=", type, "价格=", price);
});

// 小红订阅消息
officialAccount.listen(function getPrice(type, price) {
  console.log("水果=", type, "价格=", price);
});

officialAccount.trigger("苹果", 200);
officialAccount.trigger("橘子", 300);

// ------以下为输出-----------
// 水果= 苹果 价格= 200
// 水果= 苹果 价格= 200
// 水果= 橘子 价格= 300
// 水果= 橘子 价格= 300

我们已经实现了一个最简单的发布—订阅模式，但这里还存在一些问题。订阅者接收到了发布者发布的每个消息，比如说小明只想关注苹果的价格，但是橘子的价格也推送给了小明，这对小明来说是不必要的困扰，所以我们可以增加一个key，让订阅者可以只订阅自己感兴趣的东西，代码如下：

var officialAccount = {}; // 定义公众号拥有者

officialAccount.clientList = {}; // 缓存列表

// 添加订阅者
officialAccount.listen = function (key, fun) {
  // 如果没有订阅过此类消息，新增一个缓存列表存放
  if (!this.clientList[key]) {
    this.clientList[key] = [];
  }
  this.clientList[key].push(fun); // 订阅的消息添加进缓存列表
};

// 发布消息
officialAccount.trigger = function () {
  // 取出消息的类型
  var key = Array.prototype.shift.call(arguments);
  // 取出该消息对应的回调函数集合
  var funs = this.clientList[key];

  // 如果没有订阅这类消息，直接返回不提示
  if (!funs || funs.length === 0) {
    return false;
  }

  for (let i = 0, fun; (fun = funs[i++]); ) {
    fun.apply(this, arguments);
  }
};

// 小明订阅消息
officialAccount.listen("苹果", function getPrice(price) {
  console.log("价格=", price);
});

// 小红订阅消息
officialAccount.listen("橘子", function getPrice(price) {
  console.log("价格=", price);
});

officialAccount.trigger("苹果", 200);
officialAccount.trigger("橘子", 300);

// ------以下为输出-----------
// 价格= 200
// 价格= 300

4 发布—订阅模式的通用实现

在上面的代码中我们实现了让一个公众号拥有了订阅和发布事件的能力，如果用户想在另一个公众号上订阅其他内容，这时我们可以将发布—订阅的功能提取出来，放在单独的对象中，这样可以快速给其他公众号添加订阅和发布的功能了，代码如下：

var eventExample= {
  clientList: [], // 订阅列表
  // 订阅事件
  listen: function (key, fun) {
    if (!this.clientList[key]) {
      this.clientList[key] = [];
    }
    this.clientList[key].push(fun);
  },
  // 发布事件
  trigger: function () {
    var key = Array.prototype.shift.call(arguments); // 获取订阅的key
    var funs = this.clientList[key]; // 取出订阅的事件列表

    // 如果没有订阅，不发消息
    if (!funs || funs.listen === 0) {
      return false;
    }

    for (let i = 0, fun; (fun = funs[i++]); ) {
      fun.apply(this, arguments);
    }
  },
};

再定义一个installEvent函数，这个函数可以给所有的对象都动态安装发布—订阅功能：

var installEvent = function (obj) {
  for (let i in eventExample) {
    obj[i] = eventExample[i];
  }
};

测试以下，我们给公众号A对象动态增加发布—订阅功能：

var A = {};
installEvent(A); // 安装发布—订阅功能
// 小明订阅消息
A.listen("苹果", function getPrice(price) {
  console.log("价格=", price);
});
// 小红订阅消息
A.listen("橘子", function getPrice(price) {
  console.log("价格=", price);
});
// 发布消息
A.trigger("苹果", 20);
A.trigger("橘子", 90);

5 取消订阅的事件

如果小明不想再关注苹果的价格了，他需要取消订阅之前的事件，我们给eventExample对象增加remove方法，用于帮助用户取消订阅事件：

eventExample.remove = function (key, fun) {
  var funs = this.clientList[key];
  // 如果这个key对应的消息没有人订阅，直接返回
  if (!funs) {
    return false;
  }
  // 如果没有传入具体的回调函数，则取消所有的订阅
  if (!fun) {
    funs && (funs.listen = 0);
  } else {
    // 反向遍历订阅的回调函数列表
    for (let l = funs.length - 1; l > 0; l--) {
      var _fun = funs[l];
      // 碰到相同的回调函数，则删掉取消订阅
      if (_fun === fun) {
        funs.splice(l, 1);
      }
    }
  }
};

6 全局的发布—订阅对象

在程序中，发布—订阅模式可以用一个全局的Event对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event作为一个类似“中介者”的角色，把订阅者和发布者联系起来，代码如下：

var eventExample = (function () {
  var clientList = {},
    listen,
    trigger,
    remove;
  listen = function (key, fun) {
    if (!clientList[key]) {
      clientList[key] = [];
    }
    clientList[key].push(fun);
  };
  trigger = function () {
    var key = Array.prototype.shift.call(arguments); // 获取订阅的key
    var funs = clientList[key]; // 取出订阅的事件列表

    // 如果没有订阅，不发消息
    if (!funs || funs.listen === 0) {
      return false;
    }

    for (let i = 0, fun; (fun = funs[i++]); ) {
      fun.apply(this, arguments);
    }
  };
  remove = function (key, fun) {
    var funs = this.clientList[key];
    // 如果这个key对应的消息没有人订阅，直接返回
    if (!funs) {
      return false;
    }
    // 如果没有传入具体的回调函数，则取消所有的订阅
    if (!fun) {
      funs && (funs.listen = 0);
    } else {
      // 反向遍历订阅的回调函数列表
      for (let l = funs.length - 1; l > 0; l--) {
        var _fun = funs[l];
        // 碰到相同的回调函数，则删掉取消订阅
        if (_fun === fun) {
          funs.splice(l, 1);
        }
      }
    }
  };
  return {
    listen,
    trigger,
    remove,
  };
})();

测试一下：
、

eventExample.listen("橘子", function (price) {
  console.log("价格=", price);
});
eventExample.trigger("橘子", 200); // 价格= 200

7 模块间通信

全局的发布—订阅模式，可以在两个封装良好的模块中进行通信，这两个模块可以完全不知道对方的存在。

比如现在有两个模块，a模块里面有一个按钮，每次点击按钮之后，b模块里的div中会显示按钮的总点击次数，我们用全局发布—订阅模式完成下面的代码，使得a模块和b模块可以在保持封装性的前提下进行通信，代码如下：

<button id="count">点击按钮</button>
<div id="show"></div>
<script>
  var a = (function () {
    var count = 0;
    var button = document.querySelector("#count");
    button.onclick = function () {
      eventExample.trigger("add", count++);
    };
  })();

  var b = (function () {
    var div = document.querySelector("#show");
    eventExample.listen("add", function (count) {
      div.innerHTML = count;
    });
  })();
</script>