javascript設計模式——觀察者模式

標籤：

網上看很多的例子，也翻很多電子書！無意間看了這位朋友的筆記讓我頓悟了！希望對你也有所協助！！！

地址：http://ju.outofmemory.cn/entry/106079

理解觀察者模式

簡單的講，一個對象作為特定任務或是另一對象的活動的觀察者，並且在這個任務或活動發生時，利用事件的形式通知觀察者。

觀察者的使用場合

當一個對象的改變需要同時改變其它對象，並且它不知道具體有多少對象需要改變的時候，就應該考慮使用觀察者模式。

例如，使用者A，B，C分別訂閱某服務，當服務有更新是可設定更新、下載等操作。

類比實現

定義Observable對象，其內部包含了2個方法：add（訂閱）與fire（發布）方法

// 觀察者var Observable = {  callbacks: [],  add: function(fn) {    this.callbacks.push(fn);  },  fire: function() {    this.callbacks.forEach(function(fn) {      fn();    })  }}訂閱Observable.add(function() {     console.log(1); }) Observable.add(function() {     console.log(2); })發布Observable.fire();     // 1, 2

　　

實際應用

實際業務中，如請求某個ajax後需要執行多個方法，資料處理、渲染頁面、其他業務等，可以使用觀察者

Observable.add(function() {   //pocessData })  Observable.add(function() {   $(‘test‘).html(data.a)   $(‘test2‘).html(data.b)   $(‘test3‘).html(data.c) })  Observable.add(function() {   //pocessOther })  $.ajax({   url: "test.html",   context: document.body }).done(function(data) {   Observable.fire(data) })

　　//在沒看模式時我寫法會是

 $.ajax({   url: "test.html",   context: document.body }).done(function(data) {   $(‘test‘).html(data.a);   $(‘test2‘).html(data.b);   $(‘test3‘).html(data.c); })

看看，覺得沒有什麼問題存在！完全是實現了一樣的功能！！

這時，項目要求在此基礎上添加另外一個功能！假如為‘系統推薦產品‘這樣一個功能！這時怎麼改呢？沒錯，我de寫法就是在原來的基礎上加代碼！沒什麼問題嗎？？

雖然功能也實現了， 但如果功能要求替換！怎麼辦，是不是要去找到以前的代碼刪除了重寫，並且還要檢查以前是否還有其他引用的指標！這怎麼改，還不如全部刪除重寫，來得痛快。

但使用觀察者模式，就解決這個問題，順便你怎麼添加，怎麼修改，我一個通知就ok了，還不用擔心弄壞以前的代碼或者同事的代碼！

設計模式這東西我也剛接觸！有什麼不對de地方！請指正！謝謝！

 

javascript設計模式——觀察者模式