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

·  阅读 240
JavaScript 设计模式之发布-订阅模式

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

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

发布-订阅模式的作用

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

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

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. 给每个发布者对象都添加了 listentrigger 方法,以及一个缓存列表 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 设计模式之适配器模式
分类:
前端