Javascript設計模式理論與實戰：觀察者模式

觀察者模式主要應用於對象之間一對多的依賴關係，當一個對象發生改變時，多個對該對象有依賴的其餘對象也會跟着作出相應改變，這就很是適合用觀察者模式來實現。使用觀察者模式能夠根據須要增長或刪除對象，解決一對多對象間的耦合關係，使程序更易於擴展和維護。

基礎知識

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

觀察者模式的實現

基本示例

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

 1 function Subject() {
 2     this.observers = [];
 3 }
 4 Subject.prototype = {
 5     constructor: Subject,
 6     subscribe: function (fn) {
 7         this.observers.push(fn);
 8         return this;
 9     },
10     unsubscribe: function (fn) {
11         this.observers = this.observers.filter(function (item) {
12             if (item !== fn) {
13                 return item;
14             }
15         });
16         return this;
17     },
18     fire: function (data, context) {
19         this.observers.forEach(function (item) {
20             item.call(context, data);
21         });
22         return this;
23     }
24 };

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

1 function SideView() { }
2 SideView.prototype.render = function (data) {
3     console.log("Side data:" + data);
4 }
5 function MainView() { }
6 MainView.prototype.render = function (data) {
7     console.log("MainView data:" + data);
8 }

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

1 var subject = new Subject();
2 var sideView = new SideView();
3 var mainView = new MainView();
4 
5 subject.subscribe(sideView.render)
6 subject.subscribe(mainView.render);
7 subject.fire("test");

經過調用fire方法，傳入「test」，從而觸發兩個render函數。從這段代碼中，咱們能夠很輕鬆地經過subscribe來添加觀察者對象，而沒必要每次都去修改fire方法。

jQuery中的觀察者模式

jQuery中實現觀察者模式很是方便，簡短的幾句代碼就能夠實現

 1         (function ($) {
 2             var obj = $({});
 3             $.subscribe = function () {
 4                 obj.on.apply(obj, arguments);
 5             }
 6             $.unsubscribe = function () {
 7                 obj.off.apply(obj, arguments);
 8             }
 9             $.fire = function () {
10                 obj.trigger.apply(obj, arguments);
11             }
12         })(jQuery);

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

1 $.subscribe("render", function () {
2     console.log("test");
3 })
4 $.subscribe("render", function () {
5     console.log("test2");
6 })
7 $.fire("render");

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

總結

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

原文地址：http://luopq.com/2015/11/24/design-pattern-observer/