本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
