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

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

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

思路：

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

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

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

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

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

使用觀察者模式的好處：

① 支持簡(jiǎn)單的廣播通信，自動(dòng)通知所有已經(jīng)訂閱過(guò)的對(duì)象。

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

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

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

Eg1：

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

btn.addEventListener("click", function() {
    console.log("First click");
}, false);
// 可以有多個(gè)訂閱者
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)聽(tīng)消息
  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錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

最新評(píng)論