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 <p style="text-align: left;">
Site.subscribe ist ein bestimmter Abonnent. Die von jedem Abonnenten abonnierten spezifischen Informationen werden in Site.userList</p><p style="text-align: left;"> 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 </p><p style="text-align: left;">
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 </p><p style="text-align: left;"></p>
Ausgabeergebnis:<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;">
[Der Weg zum JS-Meister] Vorteile der parasitären kombinatorischen Vererbung</p><p style="text-align: left;">
[JS Master’s Road] Tutorials zur es6-Serie – ausführliche Erklärung von var, let, const</p><p style="text-align: left;">
Niemand hat Artikel in der Kategorie HTML5 </p><p style="text-align: left;"> 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 </p><p style="text-align: left;"> 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</p><p style="text-align: left;"></p>
Dann lasst uns eine Warenkorb-Instanz umgestalten. Vor der Umgestaltung war mein Warenkorb prozessorientiert: <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 
cart.js-Datei: <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元   

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 <p style="text-align: left;"></p> 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! <p style="text-align: left;"></p>Empfohlene Lektüre: <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;"></p>Welche Methoden gibt es zur Dekonstruktion von es6?<p style="text-align: left;"></p><p><a href="http://www.php.cn/js-tutorial-393280.html" target="_blank"></a>Betrieb des Node.js-Dateisystems<br></p> <p><a href="http://www.php.cn/js-tutorial-393281.html" target="_blank"></a></p>

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!