JavaScript觀察者模式定義與dom事件實例詳解

觀察者模式（發布-訂閱模式）：其定義物件間一種一對多的依賴關係，當一個物件的狀態改變時，所有依賴它的物件都會被通知。 

在JavaScript中，一般使用事件模型來取代傳統的觀察者模式。
好處：

（1）可廣泛應用於非同步程式設計中，是一種替代傳遞回呼函數的方案。

（2）可取代物件之間硬編碼的通知機制，一個物件不用再顯示地呼叫另外一個物件的某個介面。兩對象輕鬆解耦。

DOM事件–觀察者模式典例

需要監控使用者點擊document.body的動作，但我們沒有辦法預知使用者會在什麼時間點擊。
所以，我們訂閱document.body上的click事件，當body節點被點擊時，body節點便向訂閱者發布這個消息！

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

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

doucment.body.click();

某網站有header頭、nav導覽、訊息清單等模組。這幾個模組的渲染都需要取得使用者登陸資訊。
（1）一般寫法：

$.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）使用觀察者模式，很輕鬆解耦！

$.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信息");
    }
  }
})();

以上是JavaScript觀察者模式定義與dom事件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！