js发布——订阅模式的通用实现及取消订阅

最新推荐文章于 2025-05-03 00:15:00 发布

夏岭

最新推荐文章于 2025-05-03 00:15:00 发布

阅读量3.6k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Hi_xiexialing/article/details/54645242

版权

本文介绍了如何在JavaScript中实现发布-订阅模式，通过创建一个event对象，包含添加订阅、触发事件和取消订阅的方法。示例展示了如何使用该模式订阅和取消特定事件，并通过实例演示了其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h1>发布——订阅模式的通用实现</h1>
   <p>javaScript作为一门解释执行的语言，给对象添加动态职责是理所当然的。所以我们将发布——订阅的功能提取出来，放在一个单独的对象内：</p>
   <script>
       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.apply( arguments ),
                 fns = this.clientList[ key ];
             for( var i = 0, fn; fn = fns[ i++]; ){
                fn.apply( this, arguments );
             }
          },
          remove: function( key, fn ){            //取消订阅的事件
             var fns = this.clientList[ key ];
             
             if( !fns ){                          //如果key对应的消息没有被人订阅，则直接返回  
                return false;
             };
             if( !fn ){                           //如果没有传入具体的回调函数，标示取消key对应消息的所有订阅 
                fns = [];
             }else{
                for( var i = fns.length - 1; i >= 0 ; i-- ){  //取消key对应的订阅消息
                    if( fn === fns[ i ] ){
                       fns.splice( i, 1 );
                    }
                }
             }
             
          }
       };
       
       var saleOffices = {};
       var installEvent = function( obj ){
          for( i in event ){
            obj[ i ] = event[ i ];
          }
       };
       
       installEvent( saleOffices );
       saleOffices.listen( "squareMeter88", fn1 = function( price ){
           console.log( "价格" + price );
       } );
       saleOffices.listen( "squareMeter88", function( price ){
           console.log( "价格" + price );
       } );
       saleOffices.remove( "squareMeter88", fn1 );
       saleOffices.trigger( "squareMeter88", 200000 );
   </script>