JavaScript設(shè)計模式之觀察者模式(發(fā)布訂閱模式)原理與實現(xiàn)方法示例

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

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

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

思路：

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

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

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

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

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

使用觀察者模式的好處：

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

② 頁面載入后目標對象很容易與觀察者存在一種動態(tài)關(guān)聯(lián)，增加了靈活性。

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

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

Eg1：

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

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") {
      // 登錄成功，發(fā)布登陸成功消息
      login.trigger("loginsuccess", data);
    }
  }
});
var header = (function() { // 監(jiān)聽消息
  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");
    }
  };
})();

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

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