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

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

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

思路：

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

② 訂閱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è)事件，而用戶可能僅選擇訂閱其中一種，而不是另外一種。

使用觀察者模式的好處：

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

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

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

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

Eg1：

監(jiān)聽用戶單擊按鈕的動作，但沒有辦法預(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)聽消息  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");    }  };})();