观察者模式(Observer Pattern)

当一个对象和另外几个对象产生关联的时候,当这个对象发生改变的时候实现通知对应对象变更。

观察者模式的实例

首先建立好观察者模式的模型,即构建队列再进行通知。

  1. class Subject {
  2. constructor() {
  3. this.observers = [];
  4. }
  5. getState() {
  6. return this.state;
  7. }
  8. setState(state) {
  9. this.state = state;
  10. this.notifyAllObservers();
  11. }
  12. attach(observer){
  13. this.observers.push(observer);
  14. }
  15. notifyAllObservers(){
  16. for (const observer of this.observers) {
  17. observer.update();
  18. }
  19. }
  20. }

假设我们需要实现一个功能输入一个十进制要显示出对应的其它进制,比如二进制和八进制和十六进制。当对象初始化后加入到观察者模型中。

  1. class BinaryObserver {
  2. constructor(subject){
  3. this.subject = subject;
  4. this.subject.attach(this);
  5. }
  6. update() {
  7. console.log( "Binary String: "
  8. + this.subject.getState().toString(2) );
  9. }
  10. }
  11. class OctalObserver {
  12. constructor(subject){
  13. this.subject = subject;
  14. this.subject.attach(this);
  15. }
  16. update() {
  17. console.log( "Octal String: "
  18. + this.subject.getState().toString(8) );
  19. }
  20. }
  21. class HexObserver {
  22. constructor(subject){
  23. this.subject = subject;
  24. this.subject.attach(this);
  25. }
  26. update() {
  27. console.log( "Hex String: "
  28. + this.subject.getState().toString(16) );
  29. }
  30. }

在使用的时候,只需要在观察者和对应的进制初始化完成即可使用。

  1. const subject = new Subject();
  2. new HexObserver(subject);
  3. new OctalObserver(subject);
  4. new BinaryObserver(subject);
  5. console.log("First state change: 15");
  6. subject.setState(15);
  7. console.log("Second state change: 10");
  8. subject.setState(10);
  9. /**
  10. * output:
  11. * First state change: 15
  12. * Hex String: f
  13. * Octal String: 17
  14. * Binary String: 1111
  15. * Second state change: 10
  16. * Hex String: a
  17. * Octal String: 12
  18. * Binary String: 1010
  19. */

观察者模式的优势

对于对象和对象的关系中,可以通过这种方式来降低耦合,同时在代码的使用上也更加直观。

上一页(备忘录模式)

下一页(状态模式)