前面的话

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

现实事例

　　不论是在程序世界里还是现实生活中，发布—订阅模式的应用都非常广泛

　　比如，小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼处工作人员告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。但到底是什么时候，目前还没有人能够知道。于是小明记下了售楼处的电话，以后每天都会打电话过去询问是不是已经到了购买时间。除了小明，还有小红、小强、小龙也会每天向售楼处咨询这个问题。一个星期过后，该工作人员决定辞职，因为厌倦了每天回答1000个相同内容的电话

　　当然现实中没有这么笨的销售公司，实际上故事是这样的：小明离开之前，把电话号码留在了售楼处。售楼处工作人员答应他，新楼盘一推出就马上发信息通知小明。小红、小强和小龙也是一样，他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼处工作人员会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们

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

　　使用发布—订阅模式有着显而易见的优点：购房者不用再天天给售楼处打电话咨询开售时间，在合适的时间点，售楼处作为发布者会通知这些消息订阅者；购房者和售楼处之间不再强耦合在一起，当有新的购房者出现时，他只需把手机号码留在售楼处，售楼处不关心购房者的任何情况，不管购房者是男是女还是一只猴子。而售楼处的任何变动也不会影响购买者，比如售楼处工作人员离职，售楼处从一楼搬到二楼，这些改变都跟购房者无关，只要售楼处记得发短信这件事情

DOM事件

　　发布—订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如，可以订阅ajax请求的error、succ等事件。或者如果想在动画的每一帧完成之后做一些事情，可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式，就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点

　　发布—订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起，虽然不太清楚彼此的细节，但这不影响它们之间相互通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变它们

　　实际上，只要在DOM节点上面绑定过事件函数，那就使用过发布—订阅模式

  1. document.body.addEventListener('click',function(){
  2.   alert();
  3. },false);
  4. document.body.click();    //模拟用户点击

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

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

  1. document.body.addEventListener('click',function(){
  2.   alert();
  3. },false);
  4. document.body.addEventListener('click',function(){
  5.   alert();
  6. },false);
  7. document.body.addEventListener('click',function(){
  8.   alert();
  9. },false);
  10. document.body.click();    //模拟用户点击

　　[注意]手动触发事件更好的做法是IE下用fireEvent，标准浏览器下用dispatchEvent实现

自定义事件

　　除了DOM事件，还会经常实现一些自定义的事件，这种依靠自定义事件完成的发布—订阅模式可以用于任何javascript代码中

　　下面是实现发布—订阅模式的步骤：

　　1、先要指定好谁充当发布者（比如售楼处）

　　2、然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名册）

　　3、最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数（遍历花名册，挨个发短信）

　　另外，还可以往回调函数里填入一些参数，订阅者可以接收这些参数。这是很有必要的，比如售楼处可以在发给订阅者的短信里加上房子的单价、面积、容积率等信息，订阅者接收到这些信息之后可以进行各自的处理

  1. var salesOffices = {}; // 定义售楼处
  2. salesOffices.clientList = []; // 缓存列表，存放订阅者的回调函数
  3. salesOffices.listen = function( fn ){ // 增加订阅者
  4.     this.clientList.push( fn ); // 订阅的消息添加进缓存列表
  5. };
  6. salesOffices.trigger = function(){ // 发布消息
  7.     for( var i = , fn; fn = this.clientList[ i++ ]; ){
  8.         fn.apply( this, arguments ); // (2) // arguments 是发布消息时带上的参数
  9.     }
  10. };
  11. salesOffices.listen( function( price, squareMeter ){ // 小明订阅消息
  12.     console.log( '价格= ' + price );
  13.     console.log( 'squareMeter= ' + squareMeter );
  14. });
  15.  
  16. salesOffices.listen( function( price, squareMeter ){ // 小红订阅消息
  17.     console.log( '价格= ' + price );
  18.     console.log( 'squareMeter= ' + squareMeter );
  19. });
  20.  
  21. salesOffices.trigger( ,  ); // 输出：200 万，88 平方米
  22. salesOffices.trigger( ,  ); // 输出：300 万，110 平方米

　　至此，已经实现了一个最简单的发布—订阅模式，但这里还存在一些问题。看到订阅者接收到了发布者发布的每个消息，虽然小明只想买88平方米的房子，但是发布者把110平方米的信息也推送给了小明，这对小明来说是不必要的困扰。所以有必要增加一个标示key，让订阅者只订阅自己感兴趣的消息。改写后的代码如下：

  1. var salesOffices = {}; // 定义售楼处
  2. salesOffices.clientList = []; // 缓存列表，存放订阅者的回调函数
  3.  
  4. salesOffices.listen = function( key, fn ){
  5.     if ( !this.clientList[ key ] ){ // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
  6.         this.clientList[ key ] = [];
  7.     }
  8.     this.clientList[ key ].push( fn ); // 订阅的消息添加进消息缓存列表
  9. };
  10.  
  11. salesOffices.trigger = function(){ // 发布消息
  12.     var key = Array.prototype.shift.call( arguments ), // 取出消息类型
  13.     fns = this.clientList[ key ]; // 取出该消息对应的回调函数集合
  14.     if ( !fns || fns.length ===  ){ // 如果没有订阅该消息，则返回
  15.         return false;
  16.     }
  17.     for( var i = , fn; fn = fns[ i++ ]; ){
  18.         fn.apply( this, arguments ); // (2) // arguments 是发布消息时附送的参数
  19.     }
  20. };
  21.  
  22. salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅88 平方米房子的消息
  23.     console.log( '价格= ' + price ); // 输出： 2000000
  24. });
  25.  
  26. salesOffices.listen( 'squareMeter110', function( price ){ // 小红订阅110 平方米房子的消息
  27.     console.log( '价格= ' + price ); // 输出： 3000000
  28. });
  29.  
  30. salesOffices.trigger( 'squareMeter88',  ); // 发布88 平方米房子的价格
  31. salesOffices.trigger( 'squareMeter110',  ); // 发布110 平方米房子的价格

　　很明显，现在订阅者可以只订阅自己感兴趣的事件了

通用实现

　　有没有办法可以让所有对象都拥有发布—订阅功能呢？有的，javascript作为一门解释执行的语言，给对象动态添加职责是理所当然的事情。所以把发布—订阅的功能提取出来，放在一个单独的对象内：

  1. var event = {
  2.     clientList: [],
  3.     listen: function( key, fn ){
  4.         if ( !this.clientList[ key ] ){
  5.             this.clientList[ key ] = [];
  6.         }
  7.             this.clientList[ key ].push( fn ); // 订阅的消息添加进缓存列表
  8.         },
  9.         trigger: function(){
  10.             var key = Array.prototype.shift.call( arguments ), // (1);
  11.             fns = this.clientList[ key ];
  12.             if ( !fns || fns.length ===  ){ // 如果没有绑定对应的消息
  13.                 return false;
  14.             }
  15.             for( var i = , fn; fn = fns[ i++ ]; ){
  16.                 fn.apply( this, arguments ); // (2) // arguments 是trigger 时带上的参数
  17.             }
  18.         }
  19.     };

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

  1. var installEvent = function( obj ){
  2.     for ( var i in event ){
  3.         obj[ i ] = event[ i ];
  4.     }
  5. };

　　下面给售楼处对象salesOffices动态增加发布—订阅功能

  1. var salesOffices = {};
  2. installEvent( salesOffices );
  3. salesOffices.listen( 'squareMeter88', function( price ){ // 小明订阅消息
  4.     console.log( '价格= ' + price );
  5. });
  6. salesOffices.listen( 'squareMeter100', function( price ){ // 小红订阅消息
  7.     console.log( '价格= ' + price );
  8. });
  9. salesOffices.trigger( 'squareMeter88',  ); // 输出：2000000
  10. salesOffices.trigger( 'squareMeter100',  ); // 输出：3000000

【取消订阅】

　　有时候，也许需要取消订阅事件的功能。比如小明突然不想买房子了，为了避免继续接收到售楼处推送过来的短信，小明需要取消之前订阅的事件。现在给event对象增加remove方法

  1. event.remove = function( key, fn ){
  2.     var fns = this.clientList[ key ];
  3.     if ( !fns ){ // 如果key 对应的消息没有被人订阅，则直接返回
  4.         return false;
  5.     }
  6.     if ( !fn ){ // 如果没有传入具体的回调函数，表示需要取消key 对应消息的所有订阅
  7.         fns && ( fns.length =  );
  8.     }else{
  9.         for ( var l = fns.length - ; l >=; l-- ){ // 反向遍历订阅的回调函数列表
  10.             var _fn = fns[ l ];
  11.             if ( _fn === fn ){
  12.                 fns.splice( l,  ); // 删除订阅者的回调函数
  13.             }
  14.         }
  15.     }
  16. };
  17. var salesOffices = {};
  18. var installEvent = function( obj ){
  19.     for ( var i in event ){
  20.         obj[ i ] = event[ i ];
  21.     }
  22. }
  23. installEvent( salesOffices );
  24.  
  25. salesOffices.listen( 'squareMeter88', fn1 = function( price ){ // 小明订阅消息
  26.     console.log( '价格= ' + price );
  27. });
  28.  
  29. salesOffices.listen( 'squareMeter88', fn2 = function( price ){ // 小红订阅消息
  30.     console.log( '价格= ' + price );
  31. });
  32.  
  33. salesOffices.remove( 'squareMeter88', fn1 ); // 删除小明的订阅
  34. salesOffices.trigger( 'squareMeter88',  ); // 输出：2000000

网站登录

　　假如正在开发一个商城网站，网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件，就是必须先用ajax异步请求获取用户的登录信息。这是很正常的，比如用户的名字和头像要显示在header模块里，而这两个字段都来自用户登录后返回的信息。至于ajax请求什么时候能成功返回用户信息，这点没有办法确定

　　但现在还不足以说服在此使用发布—订阅模式，因为异步的问题通常也可以用回调函数来解决。更重要的一点是，不知道除了header头部、nav导航、消息列表、购物车之外，将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合，比如下面这样的形式：

  1. login.succ(function(data){
  2.     header.setAvatar( data.avatar); // 设置header 模块的头像
  3.     nav.setAvatar( data.avatar ); // 设置导航模块的头像
  4.     message.refresh(); // 刷新消息列表
  5.     cart.refresh(); // 刷新购物车列表
  6. });

　　现在必须了解header模块里设置头像的方法叫setAvatar、购物车模块里刷新的方法叫refresh，这种耦合性会使程序变得僵硬，header模块不能随意再改变setAvatar的方法名，它自身的名字也不能被改为header1、header2。这是针对具体实现编程的典型例子，针对具体实现编程是不被赞同的

　　等到有一天，项目中又新增了一个收货地址管理的模块，在最后部分加上这行代码：

  1. login.succ(function(data){
  2.     header.setAvatar( data.avatar); // 设置header 模块的头像
  3.     nav.setAvatar( data.avatar ); // 设置导航模块的头像
  4.     message.refresh(); // 刷新消息列表
  5.     cart.refresh(); // 刷新购物车列表
  6.     address.refresh();
  7. });

　　用发布—订阅模式重写之后，对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时，登录模块只需要发布登录成功的消息，而业务方接受到消息之后，就会开始进行各自的业务处理，登录模块并不关心业务方究竟要做什么，也不想去了解它们的内部细节。改进后的代码如下：

  1. $.ajax('http://xx.com?login',function(data){    //登录成功
  2.   login.trigger('loginSucc',data);    //发布登录成功的消息
  3. });

　　各模块监听登录成功的消息：

  1. var header = (function(){ // header 模块
  2.     login.listen( 'loginSucc', function( data){
  3.         header.setAvatar( data.avatar );
  4.     });
  5.     return {
  6.         setAvatar: function( data ){
  7.             console.log( '设置header 模块的头像' );
  8.         }
  9.     }
  10. })();
  11.  
  12. var nav = (function(){ // nav 模块
  13.     login.listen( 'loginSucc', function( data ){
  14.         nav.setAvatar( data.avatar );
  15.     });
  16.     return {
  17.         setAvatar: function( avatar ){
  18.             console.log( '设置nav 模块的头像' );
  19.         }
  20.     }
  21. })();

　　如上所述，随时可以把setAvatar的方法名改成setTouxiang。如果有一天在登录完成之后，又增加一个刷新收货地址列表的行为，那么只要在收货地址模块里加上监听消息的方法即可，代码如下：

  1. var address = (function(){ // nav 模块
  2.     login.listen( 'loginSucc', function( obj ){
  3.         address.refresh( obj );
  4.     });
  5.     return {
  6.         refresh: function( avatar ){
  7.             console.log( '刷新收货地址列表' );
  8.         }
  9.     }
  10. })();

全局发布订阅对象

　　刚刚实现的发布—订阅模式，给售楼处对象和登录对象都添加了订阅和发布的功能，这里还存在两个小问题：1、给每个发布者对象都添加了listen和trigger方法，以及一个缓存列表clientList，这其实是一种资源浪费；2、小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是salesOffices，才能顺利的订阅到事件

  1. salesOffices.listen('squareMeter100',function(price){    //小明订阅消息
  2.   console.log('价格='+price);
  3. });

　　如果小明还关心300平方米的房子，而这套房子的卖家是salesOffices2，这意味着小明要开始订阅salesOffices2对象。见如下代码：

  1. salesOffices2.listen('squareMeter300',function(price){    //小明订阅消息
  2.   console.log('价格='+price);
  3. });

　　其实在现实中，买房子未必要亲自去售楼处，只要把订阅的请求交给中介公司，而各大房产公司也只需要通过中介公司来发布房子信息。这样一来，不用关心消息是来自哪个房产公司，在意的是能否顺利收到消息。当然，为了保证订阅者和发布者能顺利通信，订阅者和发布者都必须知道这个中介公司

　　同样在程序中，发布—订阅模式可以用一个全局的Event对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event作为一个类似“中介者”的角色，把订阅者和发布者联系起来。见如下代码：

  1. var Event = (function(){
  2.     var clientList = {},
  3.     listen,
  4.     trigger,
  5.     remove;
  6.     listen = function( key, fn ){
  7.         if ( !clientList[ key ] ){
  8.             clientList[ key ] = [];
  9.         }
  10.         clientList[ key ].push( fn );
  11.     };
  12.     trigger = function(){
  13.         var key = Array.prototype.shift.call( arguments ),
  14.         fns = clientList[ key ];
  15.         if ( !fns || fns.length ===  ){
  16.             return false;
  17.         }
  18.         for( var i = , fn; fn = fns[ i++ ]; ){
  19.             fn.apply( this, arguments );
  20.         }
  21.     };
  22.     remove = function( key, fn ){
  23.         var fns = clientList[ key ];
  24.         if ( !fns ){
  25.             return false;
  26.         }
  27.         if ( !fn ){
  28.             fns && ( fns.length =  );
  29.         }else{
  30.             for ( var l = fns.length - ; l >=; l-- ){
  31.                 var _fn = fns[ l ];
  32.                 if ( _fn === fn ){
  33.                     fns.splice( l,  );
  34.                 }
  35.             }
  36.         }
  37.     };
  38.     return {
  39.         listen: listen,
  40.         trigger: trigger,
  41.         remove: remove
  42.     }
  43. })();
  44.  
  45. Event.listen( 'squareMeter88', function( price ){ // 小红订阅消息
  46.     console.log( '价格= ' + price ); // 输出：'价格=2000000'
  47. });
  48.  
  49. Event.trigger( 'squareMeter88',  ); // 售楼处发布消息

【模块间通信】

　　上面实现的发布—订阅模式的实现，是基于一个全局的Event对象，利用它可以在两个封装良好的模块中进行通信，这两个模块可以完全不知道对方的存在

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

  1. <button id="count">点我</button>
  2. <div id="show"></div>
  3. <script type="text/JavaScript">
  4.     var a = (function(){
  5.         var count = ;
  6.         var button = document.getElementById( 'count' );
  7.         button.onclick = function(){
  8.             Event.trigger( 'add', count++ );
  9.         }
  10.     })();
  11.     var b = (function(){
  12.         var div = document.getElementById( 'show' );
  13.         Event.listen( 'add', function( count ){
  14.             div.innerHTML = count;
  15.         });
  16.     })();
  17. </script>

　　但要留意一个问题，模块之间如果用了太多的全局发布—订阅模式来通信，那么模块与模块之间的联系就被隐藏到了背后。最终会搞不清楚消息来自哪个模块，或者消息会流向哪些模块，这又会给维护带来一些麻烦，也许某个模块的作用就是暴露一些接口给其他模块调用

【先发布后订阅】

　　常见的发布—订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。在某些情况下，需要先将这条消息保存下来，等到有对象来订阅它的时候，再重新把消息发布给订阅者。就如同QQ中的离线消息一样，离线消息被保存在服务器中，接收人下次登录上线之后，可以重新收到这条消息

  1. /**************先发布后订阅********************/
  2. Event.trigger('click',);
  3. Event.listen('click',function(a){
  4.   console.log(a);    //输出：1
  5. });

　　这种需求在实际项目中是存在的，比如在商城网站中，获取到用户信息之后才能渲染用户导航模块，而获取用户信息的操作是一个ajax异步请求。当ajax请求成功返回之后会发布一个事件，在此之前订阅了此事件的用户导航模块可以接收到这些用户信息

　　但是这只是理想的状况，因为异步的原因，不能保证ajax请求返回的时间，有时候它返回得比较快，而此时用户导航模块的代码还没有加载好（还没有订阅相应事件），特别是在用了一些模块化惰性加载的技术后，这是很可能发生的事情。也许还需要一个方案，使得的发布—订阅对象拥有先发布后订阅的能力

　　为了满足这个需求，要建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者来订阅这个事件，暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，将遍历堆栈并且依次执行这些包装函数，也就是重新发布里面的事件。当然离线事件的生命周期只有一次，就像QQ的未读消息只会被重新阅读一次，所以刚才的操作只能进行一次

【全局事件的命名冲突】

　　全局的发布—订阅对象里只有一个clinetList来存放消息名和回调函数，大家都通过它来订阅和发布各种消息，久而久之，难免会出现事件名冲突的情况，所以还可以给Event对象提供创建命名空间的功能

  1. /**************使用命名空间********************/
  2. Event.create('namespace1').listen('click',function(a){
  3.   console.log(a);    //输出：1
  4. });
  5. Event.create('namespace1').trigger('click',);
  6. Event.create('namespace2').listen('click',function(a){
  7.   console.log(a);    //输出：2
  8. });
  9. Event.create('namespace2').trigger('click',);

　　下面是完整代码

  1. var Event = (function(){
  2.     var global = this,
  3.     Event,
  4.     _default = 'default';
  5.     Event = function(){
  6.         var _listen,
  7.         _trigger,
  8.         _remove,
  9.         _slice = Array.prototype.slice,
  10.         _shift = Array.prototype.shift,
  11.         _unshift = Array.prototype.unshift,
  12.         namespaceCache = {},
  13.         _create,
  14.         find,
  15.         each = function( ary, fn ){
  16.             var ret;
  17.             for ( var i = , l = ary.length; i < l; i++ ){
  18.                 var n = ary[i];
  19.                 ret = fn.call( n, i, n);
  20.             }
  21.             return ret;
  22.         };
  23.         _listen = function( key, fn, cache ){
  24.             if ( !cache[ key ] ){
  25.                 cache[ key ] = [];
  26.             }
  27.             cache[key].push( fn );
  28.         };
  29.         _remove = function( key, cache ,fn){
  30.             if ( cache[ key ] ){
  31.                 if( fn ){
  32.                     for( var i = cache[ key ].length; i >= ; i-- ){
  33.                         if( cache[ key ] === fn ){
  34.                             cache[ key ].splice( i,  );
  35.                         }
  36.                     }
  37.                 }else{
  38.                     cache[ key ] = [];
  39.                 }
  40.             }
  41.         };
  42.         _trigger = function(){
  43.             var cache = _shift.call(arguments),
  44.             key = _shift.call(arguments),
  45.             args = arguments,
  46.             _self = this,
  47.             ret,
  48.             stack = cache[ key ];
  49.             if ( !stack || !stack.length ){
  50.                 return;
  51.             }
  52.             return each( stack, function(){
  53.                 return this.apply( _self, args );
  54.             });
  55.         };
  56.         _create = function( namespace ){
  57.             var namespace = namespace || _default;
  58.             var cache = {},
  59.             offlineStack = [], // 离线事件
  60.             ret = {
  61.                 listen: function( key, fn, last ){
  62.                     _listen( key, fn, cache );
  63.                     if ( offlineStack === null ){
  64.                         return;
  65.                     }
  66.                     if ( last === 'last' ){
  67.                     }else{
  68.                         each( offlineStack, function(){
  69.                             this();
  70.                         });
  71.                     }
  72.                     offlineStack = null;
  73.                 },
  74.                 one: function( key, fn, last ){
  75.                     _remove( key, cache );
  76.                     this.listen( key, fn ,last );
  77.                 },
  78.                 remove: function( key, fn ){
  79.                     _remove( key, cache ,fn);
  80.                 },
  81.                 trigger: function(){
  82.                     var fn,
  83.                     args,
  84.                     _self = this;
  85.                     _unshift.call( arguments, cache );
  86.                     args = arguments;
  87.                     fn = function(){
  88.                         return _trigger.apply( _self, args );
  89.                     };
  90.                     if ( offlineStack ){
  91.                         return offlineStack.push( fn );
  92.                     }
  93.                     return fn();
  94.                 }
  95.             };
  96.             return namespace ?
  97.             ( namespaceCache[ namespace ] ? namespaceCache[ namespace ] :
  98.                 namespaceCache[ namespace ] = ret )
  99.             : ret;
  100.         };
  101.         return {
  102.             create: _create,
  103.             one: function( key,fn, last ){
  104.                 var event = this.create( );
  105.                 event.one( key,fn,last );
  106.             },
  107.             remove: function( key,fn ){
  108.                 var event = this.create( );
  109.                 event.remove( key,fn );
  110.             },
  111.             listen: function( key, fn, last ){
  112.                 var event = this.create( );
  113.                 event.listen( key, fn, last );
  114.             },
  115.             trigger: function(){
  116.                 var event = this.create( );
  117.                 event.trigger.apply( this, arguments );
  118.             }
  119.         };
  120.     }();
  121.     return Event;
  122. })();

　　发布—订阅模式，也就是常说的观察者模式，它的优点非常明显，一为时间上的解耦，二为对象之间的解耦。应用也非常广泛，既可以用在异步编程中，也可以帮助完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。从架构上来看，无论是MVC还是MVVM，都少不了发布—订阅模式的参与，而且javascript本身也是一门基于事件驱动的语言

　　当然，发布—订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存，而且订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。另外，发布—订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个bug不是件轻松的事情

javascript设计模式——发布订阅模式的更多相关文章

  1. javascript 设计模式 -- 发布/订阅模式

    直接上代码: index.html : <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. 设计模式-发布订阅模式(javaScript)

    1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...

  3. js设计模式--发布订阅模式

    前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...

  4. [转]js设计模式—发布订阅模式

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

  5. [转] 浅析JavaScript设计模式——发布-订阅/观察者模式

    前一段时间一直在写CSS3的文章 一直都没写设计模式 今天来写写大名鼎鼎观察者模式 先画张图 观察者模式的理解 我觉得还是发布-订阅模式的叫法更容易我们理解 (不过也有的书上认为它们是两种模式……)  ...

  6. js设计模式-发布/订阅模式

    一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...

  7. Javascript设计模式之发布-订阅模式

    简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...

  8. 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码

    最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...

  9. [转] JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

随机推荐

  1. Sketch设计学习(一)

    很膜拜那些既能写出一手好代码,并且还能够懂设计懂交互的人.公司基本上都对这两块工作 分工分职,但是我觉得作为一名移动开发者,懂点设计 是必备的. 国外的很多大牛们,感觉他们虐我们千百遍了. 我觉得写代 ...

  2. 读书笔记-你不知道的JS中-函数生成器

    这个坑比较深 可能写完我也看不懂(逃 ES6提供了一个新的函数特性,名字叫Generator,一开始看到,第一反应是函数指针?然而并不是,只是一个新的语法. 入门 简单来说,用法如下: functio ...

  3. 使用jQuery判断元素是否在可视区域

    $("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下,  $("#app" ...

  4. HTML的语法

    1,什么是HTML标记语言,他是表示网页信息的符号标记语言,特点包括: a,可以设置文本的格式,比如标题,文号,文本颜色,段落等待 b,可以简历列表 c,可以插入图像和媒体 d,可以建立表格 e,超连 ...

  5. js获取浏览器版本

    获取火狐,谷歌,ie,常见浏览器的方法 function myBrowser(){ var userAgent = navigator.userAgent, rMsie = /(msie\s|trid ...

  6. 引入servlet概念

    Servlet简介 Java Servlet是和平台无关的服务器端组件,它运行在Servlet容器中.Servlet容器负责Servlet和客户的通信以及调用Servlet的方法,Servlet和客户 ...

  7. 移动端1px 边框完整方案（四个方向）

    使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t ...

  8. JAVA_读取XML文件

    在项目中,很多种情况都需要将一些配置写在xml文件或者properties文件里,便于日后修改配置,好维护等等. 1.新建xml文件 <?xml version="1.0" ...

  9. C# 4.0 新特性dynamic、可选参数、命名参数等

    1．dynamic ExpandoObject熟悉js的朋友都知道js可以这么写 :   1 var t = new Object(); 2 t.Abc = ‘something’; 3 t.Valu ...

  10. gulp 打包合并

    1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm i ...