Définition du modèle d'observateur JavaScript et explication détaillée du code de l'instance de scène

Modèle d'observateur

Définir une relation de dépendance un-à-plusieurs entre les objets afin que lorsque l'état d'un objet change, tous les objets qui en dépendent soient notifiés et actualisés automatiquement, également connu sous le nom de modèle de publication-abonnement.

Cela nécessite une stratégie d'abstraction de haut niveau pour que les abonnés puissent changer indépendamment les uns des autres, et que l'émetteur puisse accepter n'importe quel abonné ayant une intention de consommation.

Scénarios d'application :

Ce mode doit d'abord parler des scénarios d'application, ce qui est plus facile à comprendre.

Prenons une scène qui est relativement proche de nous. Il y a un bouton d'abonnement dans le parc des blogs (il semble qu'il y ait un bug. Par exemple, Little A, Little B et Little C se sont tous abonnés). à mon blog et devenez mon blog. Dès qu'il y aura une mise à jour, un e-mail sera publié à ces trois personnes, et ces abonnés seront informés

Le processus du modèle de publication et d'abonnement est le suivant :

1. Déterminez qui est l'éditeur (comme mon blog).

2. Ajoutez ensuite une liste de cache à l'éditeur pour stocker les fonctions de rappel afin de notifier les abonnés.

3. Pour publier un message, l'éditeur doit parcourir cette liste de cache et déclencher à son tour les fonctions de rappel d'abonné qui y sont stockées.

4. Désabonnement (par exemple, si vous ne souhaitez plus recevoir ces informations d'abonnement, vous pouvez l'annuler)

Le code est le suivant :

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的第二篇文章

Le code peut être exécuté seul, c'est plus facile à comprendre

Avantages et inconvénients :

Avantages : Lorsque nous devons maintenir la cohérence des objets liés, l'utilisation du modèle d'observateur peut éviter un couplage étroit entre les objets. Par exemple, un objet peut notifier un autre objet sans connaître les informations sur cet objet.

Inconvénients : dans le modèle de publication/abonnement, si nous devons dissocier les éditeurs des abonnés, il sera dans certains cas difficile de garantir que des parties spécifiques de notre application se comportent comme prévu. Autrement dit, ses avantages peuvent aussi être ses inconvénients

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!