JavaScript設計模式之觀察者模式(發布訂閱模式)原理與實現方法示例

本文實例講述了JavaScript設計模式之觀察者模式(發布訂閱模式)原理與實現方法。分享給大家供大家參考，具體如下：

觀察者模式，又稱為發布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己的狀態。

在觀察者模式中，并不是一個對象調用另一個對象的方法，而是一個對象訂閱另一個對象的特定活動并在狀態改變后獲得通知。訂閱者也稱為觀察者，而被觀察的對象稱為發布者或主題。當發生了一個重要的事件時，發布者將會通知（調用）所有訂閱者并且可能經常以事件對象的形式傳遞消息。

思路：

① 發布者需要一個數組類型的屬性subscribers，以存儲所有的訂閱者；

② 訂閱subscribe()：將新的訂閱者加入到這個數組中去；

③ 退訂unsubscribe()：從訂閱者數組中刪除某個訂閱者；

④ 發布publish()：循環遍歷subscribers數組中的每一個元素，并通知他們，即發送消息，意味著調用訂閱者的某個方法。因此，當用戶訂閱信息時，該訂閱者需要向subscribe()提供它的其中一個方法。

subscribe()、unsubscribe()、publish()三種方法都需要一個type參數，因為發布者可能觸發多個事件，而用戶可能僅選擇訂閱其中一種，而不是另外一種。

使用觀察者模式的好處：

① 支持簡單的廣播通信，自動通知所有已經訂閱過的對象。

② 頁面載入后目標對象很容易與觀察者存在一種動態關聯，增加了靈活性。

③ 目標對象與觀察者之間的抽象耦合關系能夠單獨擴展以及重用。

在JavaScript中，一般使用事件模型來替代傳統的觀察者模式。 DOM事件，也是JavaScript和DOM之間實現的一種觀察者模式。

Eg1：

監聽用戶單擊按鈕的動作，但沒有辦法預知用戶將在什么時候點擊。因此，訂閱按鈕上的click事件，當按鈕被點擊時，便向訂閱者發布此消息。

btn.addEventListener("click", function() {
    console.log("First click");
}, false);
// 可以有多個訂閱者
btn.addEventListener("click", function() {
    console.log("Second click");
}, false);
btn.click();

Eg2：

非觀察者模式：

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") { // 登錄成功，渲染header、footer
      header.setInfo(data.headerInfo);
      footer.setInfo(data.footerInfo);
    }
  }
});

觀察者模式：

$.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 footer = (function() {
  login.listen("loginsuccess", function(data){
    footer.setInfo(data.navInfo);
  });
  return {
    setInfo: function(data) {
      console.log("渲染nav");
    }
  };
})();

更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。