如何使用观察者模式？

Question

我才刚刚开始了解观察者模式的工作原理。但是现在我想使用它。我看到了很多观察者模式的示例，但大多数只是简单地演示了该模式，而没有显示其已完成以完成任务。

我了解观察者会被某个对象通知。但是，我怎样才能让观察者做某事呢？

下面的代码是一个常见的Observer Pattern程序。我看到console.log("Observer " + number + " is notified!");通知观察者时，它执行console.log（）。我是否可以在这里返回其他内容：值，函数调用等？

我看过带有简单数学运算的可视示例，这些可视示例在通知观察者时会更新计算（即成本+税费=总计）。但是我找不到一个示例来说明代码是如何实现的。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

在最简单的形式中，观察者不过是由主题调用的功能。更多“复杂”的观察者将是带有“通知”或类似功能，错误处理程序以及也许是“完成”通知的对象，具体取决于主题。因此，这是一个非常基本的示例来说明这一点：var Subject = function() {&nbsp; let observers = [];&nbsp; return {&nbsp; &nbsp; subscribe: function(observer) {&nbsp; &nbsp; &nbsp; observers.push(observer);&nbsp; &nbsp; },&nbsp; &nbsp; unsubscribe: function(observer) {&nbsp; &nbsp; &nbsp; var index = observers.indexOf(observer);&nbsp; &nbsp; &nbsp; if(index > -1) {&nbsp; &nbsp; &nbsp; &nbsp; observers.splice(index, 1);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; nextValue: function(value) {&nbsp; &nbsp; &nbsp; // call every registered observer&nbsp; &nbsp; &nbsp; for(var i = 0; i < observers.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; observers[i](value);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };};// now simply pass an observer function to the subjectconst subject = new Subject();subject.subscribe(value => {&nbsp; // do whatever you want with the value, call functions etc.&nbsp; console.log(value);});subject.nextValue('hello world!');

Answer 2

下面的代码是一个常见的Observer Pattern程序。我看到它在通知观察者时执行console.log（console.log（“ Observer” + number +“已通知！”）；）。我是否可以在这里返回其他内容：值，函数调用等？是，当主题调用通知时，它可以传递数据（而不是索引）或将自身传递给观察者。通过这种方式，观察者可以检查主体的状态并对其进行处理。方法notifyObserver变为：notifyObserver: function(observer) {&nbsp;&nbsp; &nbsp; var index = observers.indexOf(observer);&nbsp;&nbsp; &nbsp; if(index > -1) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; observers[index].notify(this);&nbsp;&nbsp; &nbsp; }},观察者就像：var Observer = function(number) {&nbsp;&nbsp; &nbsp; return {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; notify: function(subject) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // do something with subject&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp;}&nbsp;}