JavaScript observer pattern definition and detailed explanation of scene instance code

Observer Pattern

Define a one-to-many dependency relationship between objects so that when the state of an object changes, all objects that depend on it are notified And automatically refresh, also known as the publish-subscribe model.

It requires a high-level abstraction strategy so that subscribers can change independently of each other, and the issuer can accept any subscriber with consumption intention.

Application scenarios:

This model should first talk about the application scenarios, which is easier to understand.

Let’s take a scene that is relatively close to us. There is a subscription button in the blog park (it seems to have a bug). For example, Little A, Little B, and Little C have all subscribed to my blog and become my blog. Whenever there is an update, an email will be published to these three people, and these subscribers will be notified

The process of publishing and subscribing model is as follows:

1. Determine who is the publisher (such as my blog).

2. Then add a cache list to the publisher to store callback functions to notify subscribers.

3. To publish a message, the publisher needs to traverse this cache list and trigger the subscriber callback functions stored in it in turn.

4. Unsubscribe (for example, if you no longer want to receive these subscription information, you can cancel it)

The code is as follows:

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

The code can be run by itself, so Easier to understand

Advantages and disadvantages:

Advantages: When we need to maintain the consistency of related objects, using the observer pattern can avoid tight coupling between objects. For example, one object can notify another object without knowing the information about that object.

Disadvantages: In the publish/subscribe model, if we need to decouple publishers from subscribers, it will in some cases make it difficult to ensure that specific parts of our application behave as we expect. normal work. That is to say, its advantages may also be its disadvantages

The above is the detailed content of JavaScript observer pattern definition and detailed explanation of scene instance code. For more information, please follow other related articles on the PHP Chinese website!