Definition des JavaScript-Beobachtermusters und detaillierte Erläuterung des Szeneninstanzcodes

Beobachtermuster

Definieren Sie eine Eins-zu-Viele-Abhängigkeitsbeziehung zwischen Objekten, sodass alle davon abhängigen Objekte benachrichtigt und automatisch aktualisiert werden, wenn sich der Status eines Objekts ändert. Auch als Publish-Subscribe-Modell bekannt.

Es erfordert eine Abstraktionsstrategie auf hoher Ebene, damit Abonnenten unabhängig voneinander wechseln können und der Emittent jeden Abonnenten mit Konsumabsicht akzeptieren kann.

Anwendungsszenarien:

In diesem Modus müssen zuerst die Anwendungsszenarien besprochen werden, was leichter zu verstehen ist.

Nehmen wir eine Szene, die uns relativ nahe steht. Es gibt einen Abonnement-Button im Blog-Park (es scheint beispielsweise einen Fehler zu geben: Little A, Little B und Little C haben sich alle angemeldet). Sobald es ein Update gibt, wird eine E-Mail an diese drei Personen gesendet und diese Abonnenten werden benachrichtigt.

Der Prozess des Veröffentlichungs- und Abonnementmodells ist wie folgt:

1. Bestimmen Sie, wer der Herausgeber ist (z. B. mein Blog).

2. Fügen Sie dann dem Herausgeber eine Cache-Liste hinzu, um Rückruffunktionen zu speichern und Abonnenten zu benachrichtigen.

3. Um eine Nachricht zu veröffentlichen, muss der Herausgeber diese Cache-Liste durchlaufen und nacheinander die darin gespeicherten Abonnenten-Rückruffunktionen auslösen.

4. Abmelden (wenn Sie beispielsweise diese Abonnementinformationen nicht mehr erhalten möchten, können Sie sie kündigen)

Der Code lautet wie folgt:

var pubsub = {};  // 定义发布者
(function (q) {
  var list = [], //回调函数存放的数组，也就是记录有多少人订阅了我们东西
    subUid = -1;
  // 发布消息,遍历订阅者
  q.publish = function (type, content) {
    // type 为文章类型，content为文章内容
    // 如果没有人订阅，直接返回
    if (!list[type]) {
      return false;
    }
    setTimeout(function () {
      var subscribers = list[type],
        len = subscribers ? subscribers.length : 0;
 
      while (len--) {
        // 将内容注入到订阅者那里
        subscribers[len].func(type, content);
      }
    }, 0);
    return true;
  };
  //订阅方法，由订阅者来执行
  q.subscribe = function (type, func) {
    // 如果之前没有订阅过
    if (!list[type]) {
      list[type] = [];
    }
    // token相当于订阅者的id，这样的话如果退订，我们就可以针对它来知道是谁退订了。
    var token = (++subUid).toString();
    // 每订阅一个，就把它存入到我们的数组中去
    list[type].push({
      token: token,
      func: func
    });
    return token;
  };
  //退订方法
  q.unsubscribe = function (token) {
    for (var m in list) {
      if (list[m]) {
        for (var i = 0, j = list[m].length; i < j; i++) {
          if (list[m][i].token === token) {
            list[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return false;
  };
} (pubsub));
//将订阅赋值给一个变量，以便退订
var girlA = pubsub.subscribe(&#39;js类的文章&#39;, function (type, content) {
  console.log(&#39;girlA订阅的&#39;+type + ": 内容内容为：" + content);
});
var girlB = pubsub.subscribe(&#39;js类的文章&#39;, function (type, content) {
  console.log(&#39;girlB订阅的&#39;+type + ": 内容内容为：" + content);
});
var girlC = pubsub.subscribe(&#39;js类的文章&#39;, function (type, content) {
  console.log(&#39;girlC订阅的&#39;+type + ": 内容内容为：" + content);
});
//发布通知
pubsub.publish(&#39;js类的文章&#39;, &#39;关于js的内容&#39;);
// 输出：
// girlC订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:78 girlB订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:75 girlA订阅的js类的文章: 内容内容为：关于js的内容
//girlA退订了关于js类的文章
setTimeout(function () {
  pubsub.unsubscribe(girlA);
}, 0);
//再发布一次，验证一下是否还能够输出信息
pubsub.publish(&#39;js类的文章&#39;, "关于js的第二篇文章");
// 输出：
// girlB订阅的js类的文章: 内容内容为：关于js的第二篇文章
// girlC订阅的js类的文章: 内容内容为：关于js的第二篇文章

Der Code kann alleine ausgeführt werden, das ist einfacher zu verstehen

Vorteile und Nachteile:

Vorteile: Wenn wir die Konsistenz verwandter Objekte aufrechterhalten müssen, kann die Verwendung des Beobachtermusters eine enge Kopplung vermeiden zwischen Objekten. Beispielsweise kann ein Objekt ein anderes Objekt benachrichtigen, ohne die Informationen über dieses Objekt zu kennen.

Nachteile: Wenn wir im Publish/Subscribe-Modell Herausgeber von Abonnenten entkoppeln müssen, ist es in manchen Fällen schwierig sicherzustellen, dass sich bestimmte Teile unserer Anwendung wie erwartet verhalten. Mit anderen Worten, seine Vorteile können auch seine Nachteile sein

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