如何使用观察者模式？答案

【问题标题】：How can I put the Observer Pattern to use?如何使用观察者模式？
【发布时间】：2019-04-26 04:58:07
【问题描述】：

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

我了解观察者会收到主题的通知。但是，我怎样才能让观察者做一些事情呢？

下面的代码是一个常见的观察者模式程序。我看到它在通知观察者时执行 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();

【问题讨论】：

标签： javascript observer-pattern

【解决方案1】：

在最简单的形式中，观察者只不过是一个由主题调用的函数。更“复杂”的观察者将是具有“通知”或类似功能、错误处理程序以及可能“完成”通知的对象，具体取决于主题。

所以这里有一个非常基本的例子来证明这一点：

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!');

【讨论】：

【解决方案2】：

只需使用 RxJs 库。

https://www.learnrxjs.io/

const { Subject } = rxjs;

const subject$ = new Subject();

subject$.subscribe(val => { console.log(val); });

subject$.next('Hello');

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

下面的代码是一个常见的观察者模式程序。我看到它在通知观察者时执行 console.log (console.log("Observer " + number + " is notify!");) 。这是我可以返回其他东西的地方吗：值、函数调用等？

是的，当主体调用 notify 时，它可以传递数据而不是索引或将自身传递给观察者。通过这种方式，观察者可以检查 Subject 的状态并对其进行处理。方法 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 
           ... 
        } 
     } 
}

【讨论】：