javascript设计模式与开发实践阅读笔记（8）—

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

在JavaScript开发中，我们一般用事件模型来替代传统的观察者模式。

书里的现实例子

小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼MM告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。但到底是什么时候，目前还没有人能够知道。
于是小明记下了售楼处的电话，以后每天都会打电话过去询问是不是已经到了购买时间。除了小明，还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后，售楼MM决定辞职，因为厌倦了每天回答1000 个相同内容的电话。
当然现实中没有这么笨的销售公司，实际上故事是这样的：小明离开之前，把电话号码留在了售楼处。售楼MM 答应他，新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样，他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼MM会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们。

观察者模式的作用

上面例子中，小明、小红等购买者都是订阅者，他们订阅了房子开售的消息。售楼处作为发布者，会在合适的时候遍历花名册上的电话号码，依次给购房者发布消息。

例子中可以看出这样两点
(1)购房者不用再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者。
(2)当有新的购房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况。而售楼处的任何变动也不会影响购买者，只要售楼处记得发短信这件事情。

这表明
(1)观察者模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。
(2)说明观察者模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。改变也互不影响，只要之前约定的事件名没有变化，就可以自由地改变它们。

我的理解中，观察者模式其实就是一个变相的监听，当发布什么消息后，可以触发添加的监听函数。

具体实现

最简陋的，直接发布信息和触发

 var event = {   // 定义消息的管理者

     clientList : [],    // 缓存列表，存放监听函数

     listen : function( fn ){     // 添加监听函数，存到缓存列表中

         this.clientList.push( fn );

     },

     trigger : function(){ // 消息发布，触发

         for( var i = 0, fn; fn = this.clientList[ i++ ]; ){   //遍历缓存列表的监听函数，然后依次调用他们

             fn.apply( this, arguments );

         }

     }

 }; 

 event.listen( function(){ //当信息发布后，打印 1

     console.log(1);

 });

 event.listen( function( a, b ){ // 当消息发布后,计算值

     console.log( a+'和'+b+'的和为'+(a+b) );

 });

 event.trigger();       //

                        // undefined和undefined的和为NaN

 event.trigger( 5,8 );  //

                        // 5和8的和为13

上面已经简单实现了一个观察者模式，当消息的管理对象发布消息后，依次执行所有监听这个消息的函数。但是如果我们需要监听两种消息，每种消息要能触发相应函数时，我们就只能复制一次event对象，然后给个新名字event2。这样太过繁琐，我们希望event这个消息的管理者本身就可以发布不同的消息。

增加几种消息的类型，添加的监听函数只对相应的消息发布有反应

 var event = {   // 定义消息的管理者

     clientList : {},    // 缓存列表，存放不同的消息下的回调函数

     listen : function( key, fn ){   //key就是消息名

         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 );

         }

     }

 }; 

 event.listen( "print",function(){ //当对应信息发布后，打印 1

     console.log(1);

 });

 event.listen( "plus",function( a, b ){ // 当对应消息发布后,计算值

     console.log( a+'和'+b+'的和为'+(a+b) );

 });

 event.trigger("print");       // 1

 event.trigger( "plus",5,8 );  // 5和8的和为13

现在更进一步，如果我们订阅了消息，但是后面不想订阅了，那就需要取消订阅，移除掉回调函数。我们直接给对象添加相应方法即可。

 event.remove = function( key, fn ){    //消息和对应的回调函数

     var fns = this.clientList[ key ];    //找到key对应的函数数组

     if ( !fns ){            //如果key 对应的消息没有被人订阅，则直接返回

         return false;

     }

     if ( !fn ){         // 如果没有传入具体的回调函数，表示需要取消key 对应消息的所有订阅

         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 );    // 删除订阅者的回调函数

             }

         }

     }

 };

 event.listen( "print",fn1=function(){   //当对应信息发布后，打印 2

     console.log(2);

 });

 event.trigger("print");       //

 event.remove( "print",fn1 );

 event.trigger("print");    //什么都没有

所有的信息都可以通过这个全局对象来管理。

模块间通信

比如现在有两个模块，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' );

         Event.listen( 'add', function( count ){

             div.innerHTML = count;

         });

     })();

 </script>

 </html>

我们必须要注意一个问题就是，观察者模式不能滥用，模块之间如果用了太多的观察者模式来通信，那么模块与模块之间的联系就被隐藏到了背后，这会给我们的维护带来一些麻烦。

解决最后的问题

前面的代码都是先订阅，再发布，比如这样

event.listen( "print",fn1=function(){

    console.log(2);

});

event.trigger("print");       //

如果我们把他们反过来呢，如果我们先发布了呢

event.trigger("print");       // 什么都不会发生

event.listen( "print",fn1=function(){

    console.log(2);

});

因为很多懒加载技术存在，有的时候可能需要先把发布的信息保留下来，当订阅时，触发相应的回调函数。
而且作为全局的对象，大家都通过它发布消息和订阅消息，最后难免会出现重名的情况，所以，event对象最好也能拥有创建命名空间的能力。

终极代码如下：

 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;

         var each = function( ary, fn ){   //遍历执行方法

             var ret;

             for ( var i = 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( 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; //返回观察者对象

 })();

总结

观察者模式的特点就是可以响应特定的信息，完成相应的操作。