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

牛牛_lz
1,075 阅读11分钟

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

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

发布-订阅模式的作用

发布-订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如，可以订阅 ajax 请求的 error、succ 等事件。无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。

发布-订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另一个对象的某个接口。发布-订阅模式可以让两个对象松耦合地联系在一起，不需要知道彼此的细节，完全不影响它们之间相互通信。

DOM事件

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

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

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

同时，我们还可以随意增加或者删除订阅者，增加任何订阅者都不会影响发布者代码的编写：

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(); // 模拟用户点击

自定义事件

除了DOM事件，我们还会经常实现一些自定义事件。来看下实现发布-订阅模式的步骤：

  1. 指定好谁充当发布者；
  2. 给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者；
  3. 发布消息时，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

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

以售楼处为发布者，售楼处的花名册为缓存列表，售楼处给消费者发短信时可以增加房子的单价、容积率以及面积等信息来模拟一个发布-订阅模式的实现：

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

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

接下来，测试一下：

// 小明订阅消息
salesOffices.listen(function (price, squareMeter) {
  console.log("价格 = " + price + " 元");
  console.log("面积 = " + squareMeter + " 平方米");
});
// 小红订阅消息
salesOffices.listen(function (price, squareMeter) {
  console.log("价格 = " + price + " 元");
  console.log("面积 = " + squareMeter + " 平方米");
});
salesOffices.trigger(2000000, 88); // 输出两次: 价格 = 2000000 元，面积 = 88 平方米
salesOffices.trigger(3000000, 110); // 输出两次: 价格 = 3000000 元，面积 = 110 平方米

至此，我们实现了一个最简单的发布-订阅模式，但是还存在一些问题。可以看到订阅者收到了发布者发布的每个消息，我们有必要增加一个标识 key，让订阅者只订阅自己感兴趣的消息。

var salesOffices = {}; // 定义售楼处
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); // 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 平方米房子的价格

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

上述，我们已经看到了如何让售楼处拥有接受订阅和发布事件的功能。那么假设现在小明又去另一个售楼处买房子，那么这段代码是不是必须要在另一个售楼对象处重写一次呢，有没有办法可以让所有对象都拥有发布-订阅功能呢？

答案显然是有的。我们把发布-订阅的功能提取出来，放在一个单独的对象内：

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

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

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

再来测试下，给售楼处对象 salesOffices 动态增加发布-订阅功能。

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

取消订阅的事件

如果小明突然不想买房子了，为了避免继续接收消息，那么小明需要取消之前订阅的事件。

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 i = fns.length - 1; i > -0; i--) {
      var _fn = fns[i];
      if (_fn === fn) {
        fns.splice(i, 1); // 删除订阅者的回调函数
      }
    }
  }
};

全局的发布-订阅对象

刚刚实现的发布-订阅模式，里面还存在两个小问题

  1. 给每个发布者对象都添加了 listen 和 trigger 方法，以及一个缓存列表 clientList，这其实是一种资源浪费。
  2. 小明跟售楼处对象存在一定的耦合性，小明至少要知道售楼处对象的名字是 salesOffices 才能顺利订阅事件。

在程序中，发布-订阅模式可以用一个全局的 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);

模块间通信

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

<body>
  <button id="count">点我</button>
  <div id="show"></div>
  <script>
    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>
</body>

但是，如果模块之间如果使用了太多的全局发布-订阅模式来通信，那么模块与模块之间的联系就被隐藏到了背后。最终会搞不清楚消息来自哪个模块，或者消息会流向哪些模块，这又给我们的维护带来了一些麻烦。所以要适可而止~

必须先订阅再发布吗

我们所了解到的发布-订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。如果把顺序反过来，发布者先发布一条消息，而在此之前并没有对象来订阅它，那这条消息无疑会消息。

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

为了满足这个需求，我们要先建立一个存放离线事件的堆栈，当事件发布时，如果此时没有订阅者来订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件时，我们将遍历堆栈，并且依次执行这些包装函数，也就是重新发布里面的事件。当然离线事件只支持一次。

全局事件的命名冲突

全局的发布-订阅对象里面只有一个 clientList 来存放消息名和回调函数，久而久之，难免会出现事件名冲突的情况，所以还需要给 Event 提供创建命名空间的功能。

先看下使用方式：

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

// 使用命名空间
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); // 输出1
});
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 (arr, fn) {
        var ret;
        for (var i = 0; i < arr.length; i++) {
          var n = arr[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;
})();

发布-订阅模式的优缺点

优点

  1. 发布-订阅模式的有点非常明显，一为时间上的解耦，二为对象之间的解耦。
  2. 应该也非常广泛，既可以用在异步编程中，也可以帮助我们更松耦合的代码编写。
  3. 还可以用来帮助实现一些别的设计模式，比如中介者模式。
  4. 另外，目前MVC和MVVM的架构都有发布-订阅模式的参与。

缺点

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

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙点赞关注一下，您的支持是我坚持写作最大的动力，多谢支持。

同系列文章

  1. JavaScript 设计模式之单例模式
  2. JavaScript 设计模式之策略模式
  3. JavaScript 设计模式之代理模式
  4. JavaScript 设计模式之迭代器模式
  5. JavaScript 设计模式之发布-订阅模式
  6. JavaScript 设计模式之命令模式
  7. JavaScript 设计模式之组合模式
  8. JavaScript 设计模式之模板方法模式
  9. JavaScript 设计模式之享元模式
  10. JavaScript 设计模式之职责链模式
  11. JavaScript 设计模式之中介者模式
  12. JavaScript 设计模式之装饰者模式
  13. JavaScript 设计模式之状态模式
  14. JavaScript 设计模式之适配器模式
avatar
文章
阅读
粉丝
相关推荐
JavaScript 发布-订阅模式
31k阅读
 · 
206点赞
Javascript设计模式之发布-订阅模式
13k阅读
 · 
85点赞
JavaScript 设计模式之发布订阅者模式
4.0k阅读
 · 
22点赞
JavaScript设计模式之发布-订阅模式
2.6k阅读
 · 
25点赞
JavaScript 观察者 (发布/订阅) 模式
9.0k阅读
 · 
145点赞
JavaScript 设计模式之观察者模式与发布订阅模式
3.3k阅读
 · 
37点赞
发布订阅模式
9.2k阅读
 · 
19点赞
观察者模式与发布订阅模式的异同
20k阅读
 · 
533点赞
谈谈观察者模式和发布订阅模式
12k阅读
 · 
251点赞
JavaScript设计模式之发布订阅模式
675阅读
 · 
9点赞

友情链接：