在進行組件開發(fā)中，為了保證組件可以在不同的類似項目場景中都能適用，那么就必須是對其常用功能抽象出來加以實現(xiàn)。

我們來看看具體的實際用處：

假設(shè)一段ajax的請求，成功后通過done返回結(jié)果數(shù)據(jù)：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function(data) {
  //data數(shù)據(jù)的處理
  $('aaron1').html(data.a)
  $('aaron2').html(data.b)
  $('aaron3').html(data.c)
  //其余處理
});

咋一看好像都挺好，沒什么問題，但是仔細觀察我們會發(fā)現(xiàn)所有的邏輯是不是都寫在done方法里面，這樣確實是無可厚非的，但是問題就是邏輯太復雜了。Done里面有數(shù)據(jù)處理、html渲染、還可能有其它不同場景的業(yè)務邏輯。這樣如果是換做不同的人去維護代碼，增加功能就會顯得很混亂而且沒有擴展性。那么觀察者模式能很好的解決了這個的問題。

我們優(yōu)化下代碼:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function(data) {
    pocessData()
    pocessHtml()
    pocessOther()
  }

  function pocessData() {
    //處理數(shù)據(jù)
  }

  function pocessHtml() {
    $('aaron1').html(data.a)
    $('aaron2').html(data.b)
    $('aaron3').html(data.c)
  }

  function pocessOther() {
    //處理其他邏輯
  }

這種方式的好處是，分離出各種的業(yè)務函數(shù)，從而降低了代碼之間的耦合度，但是這樣代碼寫法幾乎就是“就事論事”的處理，達不到抽象復用。

那么我們用之前的觀察者模式加工一下上面的代碼：（這只是偽代碼，用于理解）

Observable.add(function() {
  //pocessData
})

Observable.add(function() {
  $('aaron1').html(data.a)
  $('aaron2').html(data.b)
  $('aaron3').html(data.c)
})

Observable.add(function() {
  //pocessOther
})

$.ajax({
  url: "test.html",
  context: document.body
}).done(function(data) {
  Observable.fire(data)
})

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

總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會影響到另一邊的變化。