Detaillierte Erläuterung der Verwendung des js-Publisher-Subscriber-Musters

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung des js-Publisher-Subscriber-Modells geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des js-Publisher-Subscriber-Modells? Schauen Sie mal rein.

Das Herausgeber-Abonnenten-Modell ist ein sehr verbreitetes Modell, wie zum Beispiel:

1. Ein Haus kaufen und verkaufen

Beim Kauf oder Verkauf eines Hauses im Leben bilden Vermittler ein Publish-Subscriber-Modell. Menschen, die ein Haus kaufen, benötigen im Allgemeinen Informationen wie Wohnungsverfügbarkeit, Preis, Nutzfläche usw. Er spielt die Rolle eines Abonnenten

Der Vermittler erhält die Hausinformationen des Verkäufers und benachrichtigt den Käufer auf der Grundlage der ihm vorliegenden Kundenkontaktinformationen (die Mobiltelefonnummer der Person, die das Haus kauft). Er fungiert als Verleger

Wenn der Verkäufer sein Haus verkaufen möchte, muss er dies dem Makler mitteilen und ihm die Informationen zur Freigabe übergeben

2. Benutzer, die Informationen auf der Website abonnieren

Abonnentenrolle: Internetnutzer, die bestimmte Arten von Informationen abonnieren müssen, z. B. Artikel vom Typ Javascript

auf einer Website Herausgeberrolle: Postfachserver, benachrichtigt Benutzer basierend auf den von der Website gesammelten Benutzerabonnementpostfächern Wenn der Websitebesitzer Abonnenten informieren möchte, muss er dem E-Mail-Server den relevanten Inhalt des zu sendenden Artikels mitteilen

Es gibt so viele Beispiele, dass ich sie nicht alle aufzählen werde

Dieser Artikel verwendet das Website-Abonnement, um das Publisher-Subscriber-Framework abzuleiten, und verwendet dann das Publisher-Subscriber-Framework, um einen einfachen Warenkorb zu rekonstruieren

Site.userList wird zum Speichern von Abonnenten verwendet

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( &#39;javascript&#39; );
    Site.publish( &#39;html5&#39; );

Site.subscribe ist ein bestimmter Abonnent. Die von jedem Abonnenten abonnierten spezifischen Informationen werden in Site.userList

gespeichert Site.publish ist der Herausgeber: Durchlaufen (benachrichtigen) Sie einen nach dem anderen gemäß der gespeicherten Benutzerliste und führen Sie die darin enthaltene Geschäftslogik aus

Bei diesem Veröffentlichungsabonnentenmodell kann jedoch nicht der gewünschte Typ abonniert werden. Im obigen Beispiel habe ich 2 Abonnenten hinzugefügt (Zeile 11, Zeile 14). Einige Benutzer möchten jedoch möglicherweise nur Javascript oder HTML5 erhalten. Daher müssen wir uns als Nächstes weiter verbessern und hoffen, bestimmte Informationen zu erhalten. Wenn es sich nicht um die Art des Abonnements einer Person handelt, erhalten wir diese nicht

Ausgabeergebnis:

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新的语义化标签" );

[Der Weg zum JS-Meister] Vorteile der parasitären kombinatorischen Vererbung

[JS Master’s Road] Tutorials zur es6-Serie – ausführliche Erklärung von var, let, const

Niemand hat Artikel in der Kategorie HTML5

abonniert Wir können sehen, dass nur diejenigen, die den Artikel über den Typ „JavaScript“ abonnieren, den Artikel „Vorteile der parasitären kombinatorischen Vererbung“ erhalten können. Wenn der Typ „HTML5“ veröffentlicht wird, erhält ihn niemand Es6-Typ, nur diejenigen, die es6 abonnieren, können

erhalten Wir verfügen bereits über ein grundlegendes Publisher-Subscriber-Framework. Als Nächstes werden wir es zu einem Framework verbessern, damit andere Funktionen oder dieselben Funktionen anderer Website-Systeme es wiederverwenden können

Dann lasst uns eine Warenkorb-Instanz umgestalten. Vor der Umgestaltung war mein Warenkorb prozessorientiert:

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新的语义化标签" );

cart.js-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/cart.js"></script>
</head>
<body>
<p id="box">
  <ul>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>单价:</span>
      <span class="unit">15元;</span>
      <span class="label">小计:</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>单价:</span>
      <span class="unit">10元;</span>
      <span class="label">小计:</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>单价:</span>
      <span class="unit">5元;</span>
      <span class="label">小计:</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>单价:</span>
      <span class="unit">2元;</span>
      <span class="label">小计:</span>
      <span class="subtotal">0</span>元
    </li>
    <li>
      <input type="button" value="-">
      <span class="num">0</span>
      <input type="button" value="+">
      <span>单价:</span>
      <span class="unit">1元;</span>
      <span class="label">小计:</span>
      <span class="subtotal">0</span>元
    </li>
  </ul>
  <p class="total-box">
    商品一共
    <span id="goods-num">0</span>
    件;
    一共花费
    <span id="total-price">0</span>
    元;
    其中最贵的商品单价是<span id="unit-price">0</span>元
  </p>
</p>
</body>
</html>

Der Kopplungsgrad ist zu hoch und die Wartbarkeit ist sehr schlecht.

Warenkorb nach der Rekonstruktion:

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(){ //计算总花费
  var aSubtotal = getByClass("subtotal");
  var res = 0;
  for( var i = 0; i < aSubtotal.length; i++ ){
    res += parseInt(aSubtotal[i].innerHTML);
  }
  return res;
}
function compareUnit() { //比单价，找出最高的单价
  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) { //加号
      aInput[i].onclick = function () {
        //当前加号所在行的数量
        var aNum = getByClass( "num", this.parentNode );
        var n = parseInt( aNum[0].innerHTML );
        n++;
        aNum[0].innerHTML = n;
        //获取单价
        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++; //商品总数
        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;
          //获取单价
          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--; //商品总数
          oGoodsNum.innerHTML = total;
          oTotalPrice.innerHTML = getSum();
          oUnitPrice.innerHTML = compareUnit();
        }
      }
    }
  }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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 );
}

Welche Methoden gibt es zur Dekonstruktion von es6?

Betrieb des Node.js-Dateisystems

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des js-Publisher-Subscriber-Musters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!