Definition des JavaScript-Beobachtermusters und detaillierte Erläuterung von DOM-Ereignisinstanzen

Beobachtermuster (Publish-Subscribe-Muster): Es definiert eine Eins-zu-Viele-Abhängigkeitsbeziehung zwischen Objekten. Wenn sich der Status eines Objekts ändert, werden alle davon abhängigen Objekte benachrichtigt.

In JavaScript wird das Ereignismodell im Allgemeinen verwendet, um das traditionelle Beobachtermuster zu ersetzen.
Vorteile:

(1) kann häufig in der asynchronen Programmierung verwendet werden und ist eine Alternative zur Übergabe von Rückruffunktionen.

(2) kann den fest codierten Benachrichtigungsmechanismus zwischen Objekten ersetzen. Ein Objekt muss nicht mehr explizit eine Schnittstelle eines anderen Objekts aufrufen. Die beiden Objekte lassen sich leicht entkoppeln.

DOM-Ereignisse – klassisches Beispiel für Beobachtermuster

Wir müssen den Klick des Benutzers auf document.body überwachen, aber wir haben keine Möglichkeit vorherzusagen, wann der Der Benutzer klickt.
Also abonnieren wir das Klickereignis auf document.body. Wenn auf den Body-Knoten geklickt wird, veröffentlicht der Body-Knoten diese Nachricht an die Abonnenten!

document.body.addEventListener("click", function() {
  console.log(1);
}, false);

// 可以多个订阅者
document.body.addEventListener("click", function() {
  console.log(2);
}, false);

doucment.body.click();

Eine bestimmte Website verfügt über Header, Navigationsnavigation, Nachrichtenliste und andere Module. Für die Darstellung dieser Module müssen Benutzeranmeldeinformationen eingeholt werden.
(1) Allgemeines Schreiben:

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") {
      // 登录成功，渲染header、nav
      header.setInfo(data.headerInfo);
      nav.setInfo(data.navInfo);
    }
  }
});

(2) Mit dem Beobachtermuster ist die Entkopplung einfach!

$.ajax({
  ...,
  success: function(data) {
    if(data.status === "success") {
      // 登录成功，发布登陆成功消息
      login.trigger("loginsuccess", data);
    }
  }
});

var header = (function() {
  // 监听消息
  login.listen("loginsuccess", function(data){
    header.setInfo(data.headerInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置header信息");
    }
  };
})();

var nav = (function() {
  login.listen("loginsuccess", function(data){
    nav.setInfo(data.navInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置nav信息");
    }
  }
})();

Das obige ist der detaillierte Inhalt vonDefinition des JavaScript-Beobachtermusters und detaillierte Erläuterung von DOM-Ereignisinstanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!