本文共 12432 字,大约阅读时间需要 41 分钟。
第8章 发布—订阅模式
发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生了改变时,所有依赖于它的对象都将得到通知。在开发中,我们一般都用事件模型来替代传统的发布—订阅模式。
8.1 现实中的发布—订阅模式
不论是在程序世界里还是现实生活中,发布—订阅模式的应用都非常广泛。我们先看一下现实中的例子。
小明最近看上了一套房子,到了售楼处之后才被告知,该楼盘的房子早已售罄。好在售楼MM告诉小明,不久后还有一些尾盘推出。开发商正在办理相关手续,手续办好后便可以购买。但到底是什么时候,目前还没有人能够知道。
于是小明记下了售楼处的电话,以后每天都会打电话过去询问是不是已经到了购买时间。除了小明,还有小红,小强,小龙也会每天向售楼处咨询这个问题。一个星期过后,售楼MM决定辞职,因为厌倦了每天回答1000个相同的电话。
当然现实中没有这么笨的销售公司,实际上故事是这样的:小明离开之前,把电话号码留在售楼处。售楼MM答应他,新楼盘一推出就马上发信息通知小明。小红、小强、小龙也是一样,他们的电话号码都被记在售楼处的花名册上,新楼盘推出的时候,售楼MM会翻开花名册,遍历上面的电话号码,依次发送一条短信通知他们。
8.2 发布—订阅模式的作用
l 购房者不用再天天给售楼处打电话咨询开售时间,在合适的时间点,售楼处作为发布者会通知这些消息订阅者
l 购房者和售楼处之间不再强耦合在一起,当有新的购房者出现时,他只需要把手机号码留在售楼处,售楼处不关心购房者的任何情况,不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购买者,比如售楼MM离职,售楼处人一楼搬到二楼,这些改变都跟购房者无关,只要售楼处记得发短信这件事情。
第一点说明发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。比如,我们可以订阅ajax请求的error,success等事件。或者如果想在动画的每一帧完成之后做一些事情,那我们可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布订阅模式,我们就无需要过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点。
第二点说明发布—订阅模式可以取代对象之间硬编码通知机制,一个对象不用再再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就可以自由地改变他们。
8.3 DOM事件
实际上,只要我们曾经在DOM节点上面绑定过事件函数,那我们就曾经使用过发布—订阅模式,来看看下面这两句简单的代码发生了什么事情:
- document.body.addEventListener(‘click’,function(){
- alert(2);
- },false);
- document.body.click();
在这里需要监控用户点击document.body的动作,但是我们没办法预知用户将在什么时候点击。所以我们订阅document.body上的click事件,当body节点被点击时,body节点便会向订阅者发布这个消息。这很像购房的例子,购房者不知道什么时候开售,于是他在订阅消息后等待售楼处发布消息。
8.4 自定义事件
除了DOM事件,我们还会经常实现一些自定义的事件,这种依靠自定义事件完成的发布—订阅模式可以用于任何javascript代码中。
现在看看如何一步步实现发布—订阅模式
l 首先要指定好谁充当发布者(比如售楼处)
l 然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者(售楼处的花名册)
l 最后发布消息的时候,发布者会遍历这个缓存列表,今次触发里面存放的订阅者回调函数(遍历花名册,挨个发短信)
另外,我们还可以往回调函数里填入一些参数,订阅者可以接收这些参数。这是很必要比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积等信息,订阅者接收到这些信息之后可以进行各自的处理:
- 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);
- }
- }
我们可以做个简单的测试
- salesOffices.listen(function(price,squareMeter){
- console.log(“价格=”+price);
- console.log(“面积=”+squareMeter);
- });
-
- salesOffices.listen(function(price,squareMeter){
- console.log(“价格=”+price);
- console.log(“面积=”+squareMeter);
- });
- salesOffices.trigger(200000,88);
- salesOffices.trigger(300000,110);
至此我们已经实现了一个最简单的发布—订阅模式,但这里还存在一些问题。我们看到订阅者接收到的了发布者发布的每个消息,虽然小明只想买88平米的房子,但是发布者把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(vari=0,fn;fn=fns[i++];){
- fn.apply(this,arguments);
- }
- }
-
- salesOffices.listen(‘squareMeter88’,function(price){
- console.log(“价格=”+price);
- });
- salesOffices.listen(‘squareMeter110’,function(price){
- console.log(“价格=”+price);
- });
-
- salesOffices.trigger(‘squareMeter88’,200000);
- salesOffices.trigger(‘squareMeter88’,300000);
很明显现在订阅者可以只订阅自己感兴趣的事件了。
8.5 发布—订阅模式的通用实现
现在我们已经看到了如何让售楼处拥有接受订阅和发布事件的功能。假设现在小明去另一个售楼处买房子,那么这段代码是否必须在另一个售楼处对象上重写一次呢,有没有办法可以让所有的对象都拥有发布订阅功能呢?
当然有,js作为一门解释执行语言,给对象动态添加职责是理所当然的事情。
所以我们把发布—订阅的功能提取出来,放在一个单独的对象内:
- 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);
- }
- }
- }
再定义一个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(‘squareMeter110’,function(price){
- console.log(‘价格=’+price);
- });
- salesOffices.listen(‘squareMeter88’,200000);
- salesOffices.listen(‘squareMeter110’,400000);
8.6 取消订阅事件
有时候,我们也许需要取消订阅事件的功能。比如小明突然不想买房子了,为了避免继续接收到售楼处送过来的短信,小明需要取消之前订阅的事件之前订阅的事件。现在我们给event对旬增加remove方法:
- event.remove = function(key,fn){
- var fns =this.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(1,1);
- }
- }
- }
- }
-
- var salesOffices = {},fn1,fn2;
- installEvent(salesOffices);
- salesOffices.listen(‘squareMeter88’,fn1=function(price){
- console.log(‘价格=’+price);
- });
- salesOffices.listen(‘squareMeter110’,fn2=function(price){
- console.log(‘价格=’+price);
- });
-
- salesOffices.remove(‘squareMeter88’,fn1);
- salesOffices.listen(‘squareMeter110’,400000);
8.7 真实的例子----网站登录
假如我们正在开发一个商城网站,网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件,就是必须先用ajax异步请求获取用户的登录信息。这是很正常的,比如用户的名字和头像要显示在header模块里,而这两个字段都来自用户登录后返回的信息。
至于ajax请求什么时候能成功返回用户信息,这点我们没有办法确定。现在的情节看起来像合肥市了售楼处的例子子,小明不知道什么时候开发商的售楼手续能够成功办下来。
但现在还不足以说服我们在此使用发布—订阅模式,因为异步的问题通常也可以用回调函数来解决。更重要的一点是,我们不知道除了header头部、nav导航、消息列表、购物车等模块。将来还有如些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合,比如下面这样的调用形式:
- login.succ(function(data){
- header.setAvatar(data.avatar);
- nav.setAvatar(data.avatar);
- message.refresh();
- cart.refresh();
- });
现在登录模块是我们负责编写的,但我们还必须了解header模块里设置头像的方法叫setAvatar,购物车模块里刷新的方法叫refresh,这种耦合性会使程序变得僵硬,header模块不能随意再改变setAvatar的方法名,它自身的名字也不改为header1,header2。这是针对具体实现编程的典型例子,针对具体编程是不被赞同的。
等到有一天,项目中又新增了一个收货地址管理模块,这个模块本来是另一个同事所写的而此时你正在马来西亚度假,但是他却不得不给你打电话:Hi,登录之后麻烦刷新一下收货地址列表。于是你又翻开你3个月前写的登录模块,在最后部分加上这行代码:
- login.succ(function(data){
- header.setAvatar(data.avatar);
- nav.setAvatar(data.avatar);
- message.refresh();
- cart.refresh();
- <span style="color:#ff0000;">address.refresh()</span>;
- });
我们就会越来越疲于应付这些突如其来的业务要求,要么跳槽了事,要么必须重构这些代码,当登录成功时,登录模块只要发布登录成功的消息,而业务方接受到消息之后,就会开始进行各自的业务处理,登录模块并不关心业务方究竟要做什么,也不想去了解它的内部细节改善后的代码如下:
- $.ajax(‘http
- login.trigger(‘loginSucc’,data);
- });
各模块监听登录成功的消息
- var header = (function(){
- login.listen(‘loginSucc’,function(data){
- header.setAvatar(data.avatar);
- });
- return {
- setAvatar:function(data){
- console.log(‘设置header模块的头像’);
- }
- };
- })();
…
如上所述,我们随时可以把setAvatar的方法名改成setTouxiang。如果有一天在登录宛成之后,又增加一个刷新收货地址列表的行为,那么只要在收货地址模块里加上监听消息的方法即可,而这可以让开发该模块的同事自己完成,你作为登录模块的开发者,永远不用再关心这些行为了。如下
- var address = (function(){
- login.listen(‘loginSucc’,function(data){
- address.refresh(data.avatar);
- });
- return {
- refresh:function(data){
- console.log(‘刷新收货地址列表’);
- }
- };
- })();
8.8 全局的发布—订阅对象
回想下刚刚实现的发布—订阅模式,我们给售楼处对象和登录对象都添加订阅和发布的功能,而这里还存在两个小问题:
我们给每个发布者对象都添加了listen和trigger方法,以及一个缓存列表clientList,这其实是一种资源的浪费。
小明跟售楼处对象还是存在一定的耦合性,小明至少要知道售楼处对象的名字是salesOffices,才能顺利的订阅到事件。如下:
- salesOffices.listen(‘squareMeter100’,function(price){
- console.log(“价格=”+price);
- });
如果小明还关心300平方米的房子,崦这套房子的卖家是salesOffices2,这意味着小明要开始订阅salesOffices2对象,如下:
- salesOffices2.listen(‘squareMeter300’,function(price){
- console.log(“价格=”+price);
- });
其实在现实中,买房未必要去售楼处,我们只要把订阅的请求交给中介公司,而各大房产公司也只要通过中介公司来发布房子信息。这样一来,我们不用关心消息是来自哪个房产公司,我们在意的是能否顺利收到消息。当然,为了保证订阅者和发布者能顺利通信,订阅者和发布者都必须知道这个中介公司。
同样在程序中,发布—订阅模式可以用一个全局的Event对象来实现,订阅者不需要了解消息来自哪个发布者,发布者也不知道消息会推给哪些些订阅者,Event作为一个类似“中介者”的角色,把订阅和发布联系起来。
- 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(vari=0,fn;fn=fn[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(varl=fns.length-1;l>=0;l--){
- var _fn = fns[l];
- if(_fn===fn){
- fns.splice(1,1);
- }
- }
- }
- }
-
-
- return {
- listen:listen,
- trigger:trigger,
- remove:remove
- }
- }
-
-
- Event.listen(‘squareMeter88’,function(price){
- console.log(‘价格=’+price);
- });
-
- Event.trigger(‘squareMeter88’,200000);
8.9 模块间通信
上一节中实现的发布—订阅模式的实现,是基于一个全局的Event对象,我们利用它可以在两个封装良好的模块中进行通信,这两个模块可以完全不知道对方的存在。就如同有了中介公司之后,我们不于需要知道房子开售的消息来自哪个售楼处。
比如现在有两个模块,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’);
- div.listen(‘add’,function(count){
-
- div.innerHTML =count;
- })
- })();
- })();
- </script>
- </html>
但这里要留意另一个问题,模块之间如果用太多的全局发布—订阅模式来通信,那么模块与模块之间的联系就被隐藏到了背后。我们最终会搞不清楚消息是来自哪个模块,或者消息会流向哪些模块,这又会给我们的维护带来一些麻烦。也许某个模块的作用就是暴露一些接口给其他模块调用的。
8.10 必须先订阅再发布吗
这种需求在实际项目中是存在的,比如在之前的商场网站中,获取到用户信息之后才能渲染用户导航模块,而获取用户信息的操作是一个ajax异步请求。当ajax请求成功返回之后会发布一个事件,在此之前订阅了此事件的用户导航模块可以接收到用户信息。
但这只是理想的状况,因为异步的原因,我们不能保证ajax请求返回的时间,有时候它回得比较快,而此时用户导航模块的代码还没有加载好,特别是在用了一些模块化惰性加载的技术后,这是很可能发生的事情。也许我们还需要一个方案,使得我们的发布—订阅对象拥有先发布后订阅的能力
为了满足这个需求,我们建立一个存放离线事件的栈,当事件发布的时候,如果此时还没有订阅者来订阅这个事件,我们暂时把发布事件的动作包裹在一个函数里,这些包装函数将被存入堆栈中,等到终于有对象来订阅事件的时候,我们将遍历栈并依次执行这些包装函数,也就是重新发布这些事件里面的事件。当然离线事件的生命周期只有一次,就像QQ的未读消息只会被重新阅读一次,所以刚才的操作我们只能进行一次。
8.11 全局事件的全名冲突
全局的发布—订阅对象里只有一个clientList来存放消息名和回调函数,大家都通过它来订阅和发布各种消息,久而久之,难免会出现事件名冲突的情况,所以我们还可以给Event对象提供创建命名空间的功能。
在提供最终的代码之前,我们来感受一下怎么使用这两个新增的功能
-
- Event.trigger(‘click’,1);
- Event.listen(‘click’,function(a){
- console.log(a);
- });
-
- Event.create(‘namespace1’).listen(‘click’,function(a){
- console.log(a);
- });
-
- Event.create(‘namespace1’).trigger(‘click’,1);
-
-
- 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 (vari = 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 (vari = cache[key].length; i >= 0; i--) {
- if (cache[key] === 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 = arugments;
- fn = function () {
- return _trigger.appley(_self, args);
- };
- if (offlineStack) {
- return offlineStack.push(fn);
- }
-
- return fn();
- }
- };
-
- return namespace ? (namespaceCache[namespace] ?namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
- };
-
- return {
- careate:_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中,我们无需去选择使用推模型还是拉模型。推模型是指在事件发生时,发布者一次性把所有更改的状态和数据都推送给订阅者。拉模型不同的地方是,发布者仅仅通知订阅者事件已经发生了,此外发布者要提供一些公开的接口供订阅者来主动拉数据。拉模型的好处是可以让订阅者“按需获取”,但同时有可能让发布者变成一个“门户大开”的对象,同时增加了代码量和复杂度。
转载地址:http://qgzxi.baihongyu.com/