js全局的发布——订阅模式

最新推荐文章于 2024-07-02 09:37:07 发布

夏岭

最新推荐文章于 2024-07-02 09:37:07 发布

阅读量637

点赞数

CC 4.0 BY-SA版权

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

本文介绍了如何使用全局的Event对象实现发布-订阅模式，以此解决资源浪费和对象耦合的问题。通过一个中介者角色的Event对象，订阅者无需知道发布者，发布者也无需关心接收者，实现了松耦合的事件通信。

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

<h1>全局的发布——订阅</h1>
   <p>回想上一章的通用的发布—订阅模式，我们给Event对象及saleOffices对象都添加了订阅—发布的功能，这里存在两个问题。</p>
   <p>1.我们给每个发布者对象都添加了listen和trigger方法，以及一个缓存列表clientList，这其实是一种资源浪费。</p>
   <p>2.小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是saleOffices，才能顺利的订阅到事件</p>
   <p>事实上，发布——订阅模式可以用一个全局的Event对象来实现，订阅者不需要了解消息来自哪个发布者，发布者也不需要消息会推送到哪些订阅者，
   Event作为一个类似”中介者“的角色，把订阅者和发布者联系起来。代码如下：</p>
   <script>
      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.apply( 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 ){
                clientList[ key ] = [];
             }else{
                for( var i = 0; i < fns.length; i++ ){
                   if( fn === fns[ i ]){
                      fns.splice( i, 1);
                   }
                }
             }
         };
         
         return {
            listen: listen,
            trigger: trigger,
            remove: remove
         }
      }());
      
      Event.listen( "squareMeter88", fn1 = function( price ){
         console.log( price );
      } );
      Event.remove( "squareMeter88",fn1 );
      Event.trigger( "squareMeter88", 200000 );
      
   </script>