设计模式--发布-订阅模式

2021年09月13日 12:41 · 阅读 132

1.定义

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

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

举个🌰：小明看上了一个房子，到了售楼处发现房子售罄了。然后销售告诉最近有新楼盘要推出，叫小明将电话留下，推出楼盘后好告知小明，实际上不光是小明，小强，小红也是如此，在等待销售的通知中。

const salesOffices = {}; // 定义售楼处
salesOffices.clientList = []; // 缓存列表，存放订阅者的回调函数

// 增加订阅者
salesOffices.listen = function (fn) {
  this.clientList.push(fn); // 订阅的消息添加进缓存列表
};
// 发布消息
salesOffices.trigger = function () {
  for (let i = 0, fn; (fn = this.clientList[i++]); ) {
    fn.apply(this, arguments); // arguments 是发布消息时带上的参数
  }
};

// 传入订阅事件
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平米的房源信息也通知给了小明，这明显是不太合理的。

const salesOffices = {}; // 定义售楼处
salesOffices.clientList = {}; // 缓存列表，存放订阅者的回调函数

// 增加订阅者
salesOffices.listen = function (fn) {
  if (!this.clientList[key]) {
    // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
    this.clientList[key] = [];
  }
  this.clientList[key].push(fn); // 订阅的消息添加进消息缓存列表
};
// 发布消息
salesOffices.trigger = function () {
  const key = Array.prototype.shift.call(arguments), // 取出消息类型
    fns = this.clientList[key]; // 取出该消息对应的回调函数集合
  if (!fns || fns.length === 0) {
    // 如果没有订阅该消息，则返回
    return false;
  }
  for (let i = 0, fn; (fn = fns[i++]); ) {
    fn.apply(this, arguments); // (2) // arguments 是发布消息时附送的参数
  }
};

// 传入订阅事件
salesOffices.listen("squareMeter88", function (price) {
  // 小明订阅 88 平方米房子的消息
  console.log("价格= " + price); // 输出： 2000000
});
salesOffices.listen("squareMeter110", function (price) {
  // 小红订阅 110 平方米房子的消息
  console.log("价格= " + price); // 输出： 3000000
});
salesOffices.trigger("squareMeter88", 2000000); // 发布 88 平方米房子的价格
salesOffices.trigger("squareMeter110", 3000000); // 发布 110 平方米房子的价格
复制代码

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

通过上面的🌰我们知道了如何让售楼处拥有接收事件和订阅的功能，那么如果让其他的售楼处拥有同样的功能，是否需要将上面的代码给复制一份呢？肯定是不需要的。

首先我们可以将发布-订阅功能提取出来放到一个单独的对象内。

const event = {
  clientList: [],
  listen: function (key, fn) {
    if (!this.clientList[key]) {
      this.clientList[key] = [];
    }
    this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
  },
  trigger: function () {
    let key = Array.prototype.shift.call(arguments),
      fns = this.clientList[key];
    if (!fns || fns.length === 0) {
      // 如果没有绑定对应的消息
      return false;
    }
    for (let i = 0, fn; (fn = fns[i++]); ) {
      fn.apply(this, arguments); // arguments 是 trigger 时带上的参数
    }
  },
};
复制代码

定义一个installEvent函数，这个函数的具体功能是为每个对象动态的安装发布-订阅功能

const installEvent = function (obj) {
  for (let i in event) {
    obj[i] = event[i];
  }
};
复制代码

测试：为售楼部salesOffices动态添加发布-订阅功能。

const 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
复制代码

4. 取消订阅功能

有的时候我们需要取消事件的订阅，比如小明不想购买房子了，如果此时售楼处依然跟她发短信/打电话,这样显然是不合理的，所以此时需要给小明取消之前订阅的事件，即为event对象增加remove方法。

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