js中发布者订阅者模式的示例分析-创新互联

这篇文章主要为大家展示了“js中发布者订阅者模式的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js中发布者订阅者模式的示例分析”这篇文章吧。

目前成都创新互联已为上千余家的企业提供了网站建设、域名、虚拟主机、网站改版维护、企业网站设计、崇阳网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

发布者订阅者模式，是一种很常见的模式，比如:

一、买卖房子

生活中的买房，卖房，中介就构成了一个发布订阅者模式，买房的人，一般需要的是房源，价格，使用面积等信息，他充当了订阅者的角色

中介拿到卖主的房源信息，根据手头上掌握的客户联系信息(买房的人的手机号)，通知买房的人，他充当了发布者的角色

卖主想卖掉自己的房子，就需要告诉中介，把信息交给中介发布

二，网站订阅信息的用户

订阅者角色：需要订阅某类信息的网民，如某个网站的javascript类型文章

发布者角色：邮箱服务器，根据网站收集到的用户订阅邮箱，通知用户.

网站主想把信息告诉订阅者，需要把文章相关内容告诉邮箱服务器去发送

等等非常多的例子，不一一列举

本文用网站订阅的方式，推导发布者-订阅者框架，然后用发布者-订阅者框架来重构一个简单的购物车

var Site = {};
    Site.userList = [];
    Site.subscribe = function( fn ){
      this.userList.push( fn );
    }
    Site.publish = function(){
      for( var i = 0, len = this.userList.length; i < len; i++ ){
        this.userList[i].apply( this, arguments );
      } 
    }
    Site.subscribe( function( type ){
      console.log( "网站发布了" + type + "内容" );
    });
    Site.subscribe( function( type ){
      console.log( "网站发布了" + type + "内容" );
    });
    Site.publish( 'javascript' );
    Site.publish( 'html5' );

Site.userList就是用来保存订阅者

Site.subscribe就是具体的订阅者，把每一个订阅者订阅的具体信息保存在Site.userList

Site.publish就是发布者：根据保存的userList，一个个遍历(通知)，执行里面的业务逻辑

但是这个，发布订阅者模式，有个问题，不能订阅想要的类型，上例我加了2个订阅者(第11行,第14行)，只要网站发了信息，全部能收到，但是有些用户可能只想收到javascript或者html5的，所以，接下来，我们需要继续完善，希望能够接收到具体的信息，不是某人订阅的类型，就不接收

var Site = {};
    Site.userList = {};
    Site.subscribe = function (key, fn) {
      if (!this.userList[key]) {
        this.userList[key] = [];
      }
      this.userList[key].push(fn);
    }
    Site.publish = function () {
      var key = Array.prototype.shift.apply(arguments),
        fns = this.userList[key];
      if ( !fns || fns.length === 0) {
        console.log( '没有人订阅' + key + "这个分类的文章" );
        return false;
      }
      for (var i = 0, len = fns.length; i < len; i++) {
        fns[i].apply(this, arguments);
      }
    }

    Site.subscribe( "javascript", function( title ){
      console.log( title );
    });

    Site.subscribe( "es6", function( title ){
      console.log( title );
    });

    Site.publish( "javascript", "[js高手之路]寄生组合式继承的优势" );
    Site.publish( "es6", "[js高手之路]es6系列教程 - var, let, const详解" );
    Site.publish( "html5", "html5新的语义化标签" );

输出结果:

[js高手之路]寄生组合式继承的优势

[js高手之路]es6系列教程 - var, let, const详解

没有人订阅html5这个分类的文章

我们可以看到，只有订阅了javascript类型文章的人，才能收到 ”寄生组合式继承的优势” 这篇文章，发布html5类型的时候，没有任何人会收到.

es6类型的，只有订阅es6的人，才能收到

我们已经有了一个基本的发布订阅者框架，接下来，把他完善成一个框架，便于其他功能或者其他网站系统的相同功能可以重用他

var Event = {
      userList : {},
      subscribe : function (key, fn) {
        if (!this.userList[key]) {
          this.userList[key] = [];
        }
        this.userList[key].push(fn);
      },
      publish : function () {
        var key = Array.prototype.shift.apply(arguments),
          fns = this.userList[key];
        if (!fns || fns.length === 0) {
          console.log('没有人订阅' + key + "这个分类的文章");
          return false;
        }
        for (var i = 0, len = fns.length; i < len; i++) {
          fns[i].apply(this, arguments);
        }
      }
    };

    var extend = function( dstObj, srcObj ){
      for( var key in srcObj ){
        dstObj[key] = srcObj[key];
      }
    }

    var Site = {};
    extend( Site, Event );
     Site.subscribe( "javascript", function( title ){
      console.log( title );
    });

    Site.subscribe( "es6", function( title ){
      console.log( title );
    });

    Site.publish( "javascript", "寄生组合式继承的优势" );
    Site.publish( "es6", "es6系列教程 - var, let, const详解" );
    Site.publish( "html5", "html5新的语义化标签" );

然后，我们来重构一个购物车实例，没有重构之前，我的购物车用的是面向过程：




  
  Title
  



  
    
      
      0
      
      单价:
      15元;
      小计:
      0元
    
    
      
      0
      
      单价:
      10元;
      小计:
      0元
    
    
      
      0
      
      单价:
      5元;
      小计:
      0元
    
    
      
      0
      
      单价:
      2元;
      小计:
      0元
    
    
      
      0
      
      单价:
      1元;
      小计:
      0元
    
  
  
    商品一共
    0
    件;
    一共花费
    0
    元;
    其中贵的商品单价是0元

以上是“js中发布者订阅者模式的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

大橙子网站建设，新征程启航

js中发布者订阅者模式的示例分析-创新互联

其他资讯