javascript觀察者模式定義、場景實例程式碼詳解

觀察者模式

定義物件間的一種一對多的依賴關係，以便當一個物件的狀態改變時，所有依賴它的物件都會被通知並自動刷新，也被稱為是發布訂閱模式。

它需要一種高級的抽象策略，以便訂閱者能夠彼此獨立地改變，而發行者能夠接受任何有消費意圖的訂閱者。

應用場景：　　

這個模式要先說應用場景，比較好理解。

打一個離我們比較近的一個場景，博客園裡面有一個訂閱的按鈕（貌似有bug），比如小A,小B,小C都訂閱了我的博客，當我的博客一有更新時，就會統一發布郵件給他們這三個人，就會通知這些訂閱者

發布訂閱模式的流程如下：

  1. 確定誰是發布者(例如我的部落格)。

  2. 然後給發布者新增一個快取列表，用於存放回呼函數來通知訂閱者。

  3. 發布訊息，發布者需要遍歷這個快取列表，依序觸發裡面存放的訂閱者回呼函數。

  4. 取消訂閱（例如不想再接收到這些訂閱的資訊了，就可以取消掉）

程式碼如下：

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

程式碼可以自己運行一遍，這樣比較好理解

優缺點：

優點：當我們需要維護相關物件的一致性的時候，使用觀察者模式，，就可以避免物件之間的緊密耦合。例如，一個對象可以通知另一個對象，而不需要知道這個對象的資訊。

缺點：在發布/訂閱模式中，如果我們需要將發布者同訂閱者上解耦，將會在某些情況下，導致很難確保我們應用程式中的特定部分按照我們預期的那樣正常工作。也就是說它的優點也可能是它的缺點

#

以上是javascript觀察者模式定義、場景實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！