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 <p style="text-align: left;">#
Site.userList就是用來保存訂閱者</p><p style="text-align: left;">#
Site.subscribe就是具體的訂閱者，把每個訂閱者訂閱的具體資訊保存在Site.userList</p><p style="text-align: left;">
Site.publish就是發佈者：根據已儲存的userList，一個個遍歷(通知)，執行裡面的業務邏輯</p><p style="text-align: left;">
但是這個，發布訂閱者模式，有個問題，不能訂閱想要的類型，上例我加了2個訂閱者(第11行,第14行)，只要網站發了訊息，全部能收到，但是有些使用者可能只想收到javascript或html5的，所以，接下來，我們需要繼續完善，希望能夠接收到具體的訊息，不是某人訂閱的類型，就不接收</p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;">
輸出結果:</p><p style="text-align: left;">
[js高手之路]寄生組合式繼承的優勢</p><p style="text-align: left;">
[js高手之路]es6系列教學 - var, let, const詳解</p><p style="text-align: left;">
沒有人訂閱html5這個分類的文章</p><p style="text-align: left;">#
我們可以看到，只有訂閱了javascript類型文章的人，才能收到 ”寄生組合式繼承的優勢” 這篇文章，發布html5類型的時候，沒有任何人會收到.</p><p style="text-align: left;">#
es6類型的，只有訂閱es6的人，才能收到</p><p style="text-align: left;">
我們已經有了一個基本的發布訂閱者框架，接下來，把他完善成一個框架，便於其他功能或其他網站系統的相同功能可以重複使用他</p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;">
然後，我們來重構一個購物車實例，沒有重構之前，我的購物車用的是面向過程：</p><pre class="brush:php;toolbar:false">nbsp;html>


  <meta>
  <title>Title</title>
  <script></script>


<p>
  </p>

    
•              0              单价:       15元;       小计:       0元     
    
•              0              单价:       10元;       小计:       0元     
    
•              0              单价:       5元;       小计:       0元     
    
•              0              单价:       2元;       小计:       0元     
    
•              0              单价:       1元;       小计:       0元     
  

  

    商品一共     0     件;     一共花费     0     元;     其中最贵的商品单价是0元   

cart.js檔：

function getByClass(cName, obj) {
  var o = null;
  if (arguments.length == 2) {
    o = obj;
  } else {
    o = document;
  }
  var allNode = o.getElementsByTagName("*");
  var aNode = [];
  for( var i = 0 ; i <p style="text-align: left;">#
耦合度太高，可維護性很差.</p><p style="text-align: left;">#
重構後的購物車:</p><pre class="brush:php;toolbar:false">window.onload = function () {
  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) {
        return false;
      }
      for (var i = 0, len = fns.length; i input:first-child"),
      aBtnPlus = document.querySelectorAll( "#box li>input:nth-of-type(2)"),
      curNum = 0, curUnitPrice = 0;
    for( var i = 0, len = aBtnMinus.length; i  0) && Event.publish( "total-goods-num-minus" );
        --this.parentNode.children[1].innerHTML = 0) && Event.publish( "total-goods-num-plus" );
        this.parentNode.children[1].innerHTML++;
        curUnitPrice = this.parentNode.children[4].innerHTML;
        Event.publish( "plus-num" + this.index, 
          parseInt( curUnitPrice ),
          parseInt( this.parentNode.children[1].innerHTML )
        );
      }
    }
  })();
  (function(){
    var aSubtotal = document.querySelectorAll("#box .subtotal"),
      oGoodsNum = document.querySelector("#goods-num"),
      oTotalPrice = document.querySelector("#total-price");
      Event.subscribe( 'total-goods-num-plus', function(){
        ++oGoodsNum.innerHTML;
      });
      Event.subscribe( 'total-goods-num-minus', function(){
        --oGoodsNum.innerHTML;
      });
    for( let i = 0, len = aSubtotal.length; i <p style="text-align: left;">相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p><p style="text-align: left;">推薦閱讀：</p><p><a href="http://www.php.cn/js-tutorial-393280.html" target="_blank">es6解構有哪些方法</a><br></p><p><a href="http://www.php.cn/js-tutorial-393281.html" target="_blank">Node.js檔案系統動作</a><br> </p><!--content end-->

以上是js發布者訂閱者模式使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！