Javascript中如何實現觀察者模式

本篇文章為大家展示了Javascript中如何實現觀察者模式，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

基礎知識

觀察者模式定義了對象間的一種一對多依賴關系，每當一個對象發生改變時，其相關依賴對象皆得到通知并被進行相應的改變。觀察者模式又叫做發布-訂閱 模式。生活中有很多類似的關系，比如微信公眾號訂閱，多個讀者訂閱一個微信公眾號，一旦公眾號有更新，多個讀者都會收到更新，而這種情況在應用程序中也非 常常見，js綁定各種事件本質上就是觀察者模式的實現。
觀察者模式是一個非常有用的設計模式，它主要有兩個角色組成：
（1）目標對象：作為一對多關系中的一，可以用來管理觀察者的增加和刪除
（2）觀察者對象：觀察目標對象，一旦目標發生改變則做出相應的反應

觀察者模式的實現

基本示例

在Web開發中，我們經常遇到這種情況，ajax請求數據后，要同時更新數據到頁面的不同部分中，這種情況我們可以最直接的在ajax的回調中更新 頁面，但是如果要更新的位置很多，我們就要去修改回調函數，這樣代碼的維護性和擴張性不高，這種情況下，我們就可以用觀察者模式來實現。
首先，需要一個最基本的目標對象，我們定義如下：

function Subject() {     this.observers = []; } Subject.prototype = {     constructor: Subject,     subscribe: function (fn) {         this.observers.push(fn);         return this;     },     unsubscribe: function (fn) {         this.observers = this.observers.filter(function (item) {             if (item !== fn) {                 return item;             }         });         return this;     },     fire: function (data, context) {         this.observers.forEach(function (item) {             item.call(context, data);         });         return this;     } };

目標對象Subject中有一個數組，這個數組保存觀察者列表，而目標對象提供三個方法：觀察對象，取消觀察對象，觸發對象更新。
我們通過subscribe方法增加觀察者，保存到observers數組中，如果有需要可以通過unsubscribe方法取消訂閱，然后更新數據時調用fire方法觸發，從而通知各個觀察者進行相應處理。
假設我們頁面有一個主視圖和一個側視圖，兩個視圖都要進行相應的修改，我們可以定義兩個對象如下：

function SideView() { } SideView.prototype.render = function (data) {     console.log("Side data:" + data); } function MainView() { } MainView.prototype.render = function (data) {     console.log("MainView data:" + data); }

上面代碼定義了兩個對象，分別為側視圖和主視圖，兩個對象都有相應的渲染頁面的方法render，然后我們將兩個方法添加到觀察者列表中。

var subject = new Subject(); var sideView = new SideView(); var mainView = new MainView();  subject.subscribe(sideView.render) subject.subscribe(mainView.render); subject.fire("test");

通過調用fire方法，傳入“test”，從而觸發兩個render函數。從這段代碼中，我們可以很輕松地通過subscribe來添加觀察者對象，而不必每次都去修改fire方法。

jQuery中的觀察者模式

jQuery中實現觀察者模式非常方便，簡短的幾句代碼就可以實現

(function ($) {             var obj = $({});             $.subscribe = function () {                 obj.on.apply(obj, arguments);             }             $.unsubscribe = function () {                 obj.off.apply(obj, arguments);             }             $.fire = function () {                 obj.trigger.apply(obj, arguments);             }         })(jQuery);

在jQuery中，通過on方法來綁定事件，off來移除事件，trigger來觸發事件，本質上就是一種觀察者模式。上面代碼中，我們通過一個obj對象來保存觀察者對象，我們只要像平時綁定事件一樣使用就可以，如下：

$.subscribe("render", function () {     console.log("test"); }) $.subscribe("render", function () {     console.log("test2"); }) $.fire("render");

這段代碼分別輸出test和test2.我們綁定了兩個處理函數到render上，然后通過fire觸發render事件，這就實現了觀察者模式一對多依賴的特點。

總結

觀察者模式是一種很常用的設計模式，因為我們的應用程序中涉及到依賴關系的非常多。常見的比如消息通知，向用戶發送一個消息需要同時通知到站內信， 郵件，短信等多種消息，這種一對多的情況非常適合使用觀察者模式來實現。使用觀察者模式的關鍵是在于理清目標對象和觀察者對象，目標對象通過一個數組對觀 察者對象進行管理，更新數據的時候再循環調用觀察者對象，從而實現觀察者模式。

上述內容就是Javascript中如何實現觀察者模式，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。