如何使用Observer模式？

Question

我剛剛開始理解觀察者模式的工作原理。 但現在我想把它用掉。 我看到了許多觀察者模式的例子，但大多數只是演示模式，並沒有顯示它被實現以完成任務。

我理解觀察者會被一個主題通知。 但是，我怎樣才能讓觀察者做一些事情呢？

下面的代碼是一個常見的觀察者模式程序。 我看到它執行了console.log（ console.log("Observer " + number + " is notified!"); ）當通知觀察者時。 這是我可以在哪里返回其他東西：值，函數調用等？

我已經看到了簡單數學的視覺示例，當通知觀察者時更新計算（即成本+稅收=總計）。 但我找不到一個示例來說明代碼是如何實現這一點的。 1.返回新成本的方式/地點和2.因此，觀察員（函數？）會收到成本變化的通知; 功能如何/在哪里獲得更新的費用？

我是一個新手，這個模式本身就有點莫名其妙。 我很想看到一個超級基本的示例程序。

 var Subject = function() { let observers = []; return { subscribeObserver: function(observer) { observers.push(observer); }, unsubscribeObserver: function(observer) { var index = observers.indexOf(observer); if(index > -1) { observers.splice(index, 1); } }, notifyObserver: function(observer) { var index = observers.indexOf(observer); if(index > -1) { observers[index].notify(index); } }, notifyAllObservers: function() { for(var i = 0; i < observers.length; i++){ observers[i].notify(i); }; } }; }; var Observer = function(number) { return { notify: function() { console.log("Observer " + number + " is notified!"); } } } var subject = new Subject(); var observer1 = new Observer(1); var observer2 = new Observer(2); subject.subscribeObserver(observer1); subject.subscribeObserver(observer2); subject.notifyObserver(observer2); subject.unsubscribeObserver(observer2); subject.notifyAllObservers(); 

Answer 1

只需使用RxJs庫。

https://www.learnrxjs.io/

 const { Subject } = rxjs; const subject$ = new Subject(); subject$.subscribe(val => { console.log(val); }); subject$.next('Hello'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.min.js"></script> 

Answer 2

下面的代碼是一個常見的觀察者模式程序。 我看到它執行了console.log（console.log（“Observer”+ number +“被通知！”）;）當通知觀察者時。 這是我可以在哪里返回其他東西：值，函數調用等？

是，當主題調用通知時，它可以傳遞數據而不是索引或將自身傳遞給觀察者。 通過這種方式，觀察者可以檢查對象的狀態並對其做一些事情。 notifyObserver方法變為：

notifyObserver: function(observer) { 
    var index = observers.indexOf(observer); 
    if(index > -1) { 
        observers[index].notify(this); 
    }
},

觀察者是這樣的：

var Observer = function(number) { 
    return { 
        notify: function(subject) { 
            // do something with subject 
           ... 
        } 
     } 
}

Answer 3

在最簡單的形式中，Observer只是一個由Subject調用的函數。 更“復雜”的觀察者將是具有“通知”或類似功能的對象，錯誤處理程序以及可能的“完成”通知，具體取決於主題。

所以這是一個非常基本的例子來證明這一點：

var Subject = function() {
  let observers = [];

  return {
    subscribe: function(observer) {
      observers.push(observer);
    },
    unsubscribe: function(observer) {
      var index = observers.indexOf(observer);
      if(index > -1) {
        observers.splice(index, 1);
      }
    },
    nextValue: function(value) {
      // call every registered observer
      for(var i = 0; i < observers.length; i++){
        observers[i](value);
      }
    }
  };
};

// now simply pass an observer function to the subject
const subject = new Subject();

subject.subscribe(value => {
  // do whatever you want with the value, call functions etc.
  console.log(value);
});

subject.nextValue('hello world!');