js中發(fā)布者訂閱者模式的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“js中發(fā)布者訂閱者模式的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js中發(fā)布者訂閱者模式的示例分析”這篇文章吧。

目前成都創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、崇陽網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

發(fā)布者訂閱者模式，是一種很常見的模式，比如:

一、買賣房子

生活中的買房，賣房，中介就構(gòu)成了一個(gè)發(fā)布訂閱者模式，買房的人，一般需要的是房源，價(jià)格，使用面積等信息，他充當(dāng)了訂閱者的角色

中介拿到賣主的房源信息，根據(jù)手頭上掌握的客戶聯(lián)系信息(買房的人的手機(jī)號(hào))，通知買房的人，他充當(dāng)了發(fā)布者的角色

賣主想賣掉自己的房子，就需要告訴中介，把信息交給中介發(fā)布

二，網(wǎng)站訂閱信息的用戶

訂閱者角色：需要訂閱某類信息的網(wǎng)民，如某個(gè)網(wǎng)站的javascript類型文章

發(fā)布者角色：郵箱服務(wù)器，根據(jù)網(wǎng)站收集到的用戶訂閱郵箱，通知用戶.

網(wǎng)站主想把信息告訴訂閱者，需要把文章相關(guān)內(nèi)容告訴郵箱服務(wù)器去發(fā)送

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

本文用網(wǎng)站訂閱的方式，推導(dǎo)發(fā)布者-訂閱者框架，然后用發(fā)布者-訂閱者框架來重構(gòu)一個(gè)簡(jiǎn)單的購(gòu)物車

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( "網(wǎng)站發(fā)布了" + type + "內(nèi)容" );
    });
    Site.subscribe( function( type ){
      console.log( "網(wǎng)站發(fā)布了" + type + "內(nèi)容" );
    });
    Site.publish( 'javascript' );
    Site.publish( 'html5' );

Site.userList就是用來保存訂閱者

Site.subscribe就是具體的訂閱者，把每一個(gè)訂閱者訂閱的具體信息保存在Site.userList

Site.publish就是發(fā)布者：根據(jù)保存的userList，一個(gè)個(gè)遍歷(通知)，執(zhí)行里面的業(yè)務(wù)邏輯

但是這個(gè)，發(fā)布訂閱者模式，有個(gè)問題，不能訂閱想要的類型，上例我加了2個(gè)訂閱者(第11行,第14行)，只要網(wǎng)站發(fā)了信息，全部能收到，但是有些用戶可能只想收到j(luò)avascript或者h(yuǎn)tml5的，所以，接下來，我們需要繼續(xù)完善，希望能夠接收到具體的信息，不是某人訂閱的類型，就不接收

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 + "這個(gè)分類的文章" );
        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高手之路]寄生組合式繼承的優(yōu)勢(shì)" );
    Site.publish( "es6", "[js高手之路]es6系列教程 - var, let, const詳解" );
    Site.publish( "html5", "html5新的語義化標(biāo)簽" );

輸出結(jié)果:

[js高手之路]寄生組合式繼承的優(yōu)勢(shì)

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

沒有人訂閱html5這個(gè)分類的文章

我們可以看到，只有訂閱了javascript類型文章的人，才能收到 ”寄生組合式繼承的優(yōu)勢(shì)” 這篇文章，發(fā)布html5類型的時(shí)候，沒有任何人會(huì)收到.

es6類型的，只有訂閱es6的人，才能收到

我們已經(jīng)有了一個(gè)基本的發(fā)布訂閱者框架，接下來，把他完善成一個(gè)框架，便于其他功能或者其他網(wǎng)站系統(tǒng)的相同功能可以重用他

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 + "這個(gè)分類的文章");
          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", "寄生組合式繼承的優(yōu)勢(shì)" );
    Site.publish( "es6", "es6系列教程 - var, let, const詳解" );
    Site.publish( "html5", "html5新的語義化標(biāo)簽" );

然后，我們來重構(gòu)一個(gè)購(gòu)物車實(shí)例，沒有重構(gòu)之前，我的購(gòu)物車用的是面向過程：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/cart.js"></script>
</head>
<body>
<div id="box">
  <ul>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>單價(jià):</span>
      <span class="unit">15元;</span>
      <span class="label">小計(jì):</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>單價(jià):</span>
      <span class="unit">10元;</span>
      <span class="label">小計(jì):</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>單價(jià):</span>
      <span class="unit">5元;</span>
      <span class="label">小計(jì):</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>單價(jià):</span>
      <span class="unit">2元;</span>
      <span class="label">小計(jì):</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>單價(jià):</span>
      <span class="unit">1元;</span>
      <span class="label">小計(jì):</span>
      <span class="subtotal">0</span>元
    </li>
  </ul>
  <div class="total-box">
    商品一共
    <span id="goods-num">0</span>
    件;
    一共花費(fèi)
    <span id="total-price">0</span>
    元;
    其中貴的商品單價(jià)是<span id="unit-price">0</span>元
  </div>
</div>
</body>
</html>

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 < allNode.length; i++ ){
    if( allNode[i].className == cName ){
     aNode.push( allNode[i] );
    }
  }
  return aNode;
}

function getSubTotal( unitPrice, goodsNum ){
  return unitPrice * goodsNum;
}

function getSum(){ //計(jì)算總花費(fèi)
  var aSubtotal = getByClass("subtotal");
  var res = 0;
  for( var i = 0; i < aSubtotal.length; i++ ){
    res += parseInt(aSubtotal[i].innerHTML);
  }
  return res;
}

function compareUnit() { //比單價(jià)，找出最高的單價(jià)
  var aNum = getByClass( "num");
  var aUnit = getByClass( "unit");
  var temp = 0;
  for( var i = 0; i < aNum.length; i++ ){
    if( parseInt(aNum[i].innerHTML) != 0 ){
      if( temp < parseInt(aUnit[i].innerHTML) ) {
        temp = parseInt(aUnit[i].innerHTML);
      }
    }
  }
  return temp;
}

window.onload = function () {
  var aInput = document.getElementsByTagName("input");
  var total = 0;
  var oGoodsNum = document.getElementById("goods-num");
  var oTotalPrice = document.getElementById("total-price");
  var oUnitPrice = document.getElementById("unit-price");

  for (var i = 0; i < aInput.length; i++) {
    if (i % 2 != 0) { //加號(hào)
      aInput[i].onclick = function () {
        //當(dāng)前加號(hào)所在行的數(shù)量
        var aNum = getByClass( "num", this.parentNode );
        var n = parseInt( aNum[0].innerHTML );
        n++;
        aNum[0].innerHTML = n;
        //獲取單價(jià)
        var aUnit = getByClass( "unit", this.parentNode );
        var unitPrice = parseInt(aUnit[0].innerHTML);
        var subtotal = getSubTotal( unitPrice, n );
        var aSubtotal = getByClass( "subtotal", this.parentNode );
        aSubtotal[0].innerHTML = subtotal;
        total++; //商品總數(shù)
        oGoodsNum.innerHTML = total;
        oTotalPrice.innerHTML = getSum();
        oUnitPrice.innerHTML = compareUnit();
      }
    }else {
      aInput[i].onclick = function(){
        var aNum = getByClass( "num", this.parentNode );
        if ( parseInt( aNum[0].innerHTML ) != 0 ){
          var n = parseInt( aNum[0].innerHTML );
          n--;
          aNum[0].innerHTML = n;
          //獲取單價(jià)
          var aUnit = getByClass( "unit", this.parentNode );
          var unitPrice = parseInt(aUnit[0].innerHTML);
          var subtotal = getSubTotal( unitPrice, n );
          var aSubtotal = getByClass( "subtotal", this.parentNode );
          aSubtotal[0].innerHTML = subtotal;
          total--; //商品總數(shù)
          oGoodsNum.innerHTML = total;
          oTotalPrice.innerHTML = getSum();
          oUnitPrice.innerHTML = compareUnit();
        }
      }
    }
  }
}

耦合度太高，可維護(hù)性很差.

重構(gòu)之后的購(gòu)物車:

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 < len; i++) {
        fns[i].apply(this, arguments);
      }
    }
  };
  (function(){
    var aBtnMinus = document.querySelectorAll( "#box li>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 < len; i++ ){
      aBtnMinus[i].index = aBtnPlus[i].index = i;
      aBtnMinus[i].onclick = function(){
        (this.parentNode.children[1].innerHTML > 0) && Event.publish( "total-goods-num-minus" );
        --this.parentNode.children[1].innerHTML < 0 && (this.parentNode.children[1].innerHTML = 0);
        curUnitPrice = this.parentNode.children[4].innerHTML;
        Event.publish( "minus-num" + this.index, 
          parseInt( curUnitPrice ),
          parseInt( this.parentNode.children[1].innerHTML )
        );
      };
      aBtnPlus[i].onclick = function(){
        (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 < len; i++ ){
      Event.subscribe( 'minus-num' + i, function( unitPrice, num ){
        aSubtotal[i].innerHTML = unitPrice * num;
      });
      Event.subscribe( 'plus-num' + i, function( unitPrice, num ){
        aSubtotal[i].innerHTML = unitPrice * num;
      });
    }
  })();
  console.log( Event.userList );
}

以上是“js中發(fā)布者訂閱者模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：js中發(fā)布者訂閱者模式的示例分析-創(chuàng)新互聯(lián)
分享地址：http://muchs.cn/article32/dddgsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站營(yíng)銷、云服務(wù)器、網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容