【观察者模式】和【发布订阅】 区别#

1
class Subject {
2
  constructor() {
3
    this.observerList = [];
4
  }
5

6
  addObserver(observer) {
7
    this.observerList.push(observer);
8
  }
9

10
  removeObserver(observer) {
11
    const index = this.observerList.findIndex((o) => o.name === observer.name);
12
    this.observerList.splice(index, 1);
13
  }
14

15
  notifyObservers(message) {
16
    const observers = this.observeList;
17
    observers.forEach((observer) => observer.notified(message));
18
  }
19
}

1
class Observer {
2
  constructor(name, subject) {
3
    this.name = name;
4
    if (subject) {
5
      subject.addObserver(this);
6
    }
7
  }
8

9
  notified(message) {
10
    console.log(this.name, "got message", message);
11
  }
12
}

1
const subject = new Subject();
2
const observerA = new Observer("observerA", subject);
3
const observerB = new Observer("observerB");
4
subject.addObserver(observerB);
5
subject.notifyObservers("Hello from subject");
6
subject.removeObserver(observerA);
7
subject.notifyObservers("Hello again");

1
class PubSub {
2
  constructor() {
3
    this.messages = {};
4
    this.listeners = {};
5
  }
6
  publish(type, content) {
7
    const existContent = this.messages[type];
8
    if (!existContent) {
9
      this.messages[type] = [];
10
    }
11
    this.messages[type].push(content);
12
  }
13
  subscribe(type, cb) {
14
    const existListener = this.listeners[type];
15
    if (!existListener) {
16
      this.listeners[type] = [];
17
    }
18
    this.listeners[type].push(cb);
19
  }
20
  notify(type) {
21
    const messages = this.messages[type];
22
    const subscribers = this.listeners[type] || [];
23
    subscribers.forEach((cb, index) => cb(messages[index]));
24
  }
25
}

1
class Publisher {
2
  constructor(name, context) {
3
    this.name = name;
4
    this.context = context;
5
  }
6
  publish(type, content) {
7
    this.context.publish(type, content);
8
  }
9
}

1
class Subscriber {
2
  constructor(name, context) {
3
    this.name = name;
4
    this.context = context;
5
  }
6
  subscribe(type, cb) {
7
    this.context.subscribe(type, cb);
8
  }
9
}

1
const TYPE_A = "music";
2
const TYPE_B = "movie";
3
const TYPE_C = "novel";
4

5
const pubsub = new PubSub();
6

7
const publisherA = new Publisher("publisherA", pubsub);
8
publisherA.publish(TYPE_A, "we are young");
9
publisherA.publish(TYPE_B, "the silicon valley");
10
const publisherB = new Publisher("publisherB", pubsub);
11
publisherB.publish(TYPE_A, "stronger");
12
const publisherC = new Publisher("publisherC", pubsub);
13
publisherC.publish(TYPE_C, "a brief history of time");
14

15
const subscriberA = new Subscriber("subscriberA", pubsub);
16
subscriberA.subscribe(TYPE_A, (res) => {
17
  console.log("subscriberA received", res);
18
});
19
const subscriberB = new Subscriber("subscriberB", pubsub);
20
subscriberB.subscribe(TYPE_C, (res) => {
21
  console.log("subscriberB received", res);
22
});
23
const subscriberC = new Subscriber("subscriberC", pubsub);
24
subscriberC.subscribe(TYPE_B, (res) => {
25
  console.log("subscriberC received", res);
26
});
27

28
pubsub.notify(TYPE_A);
29
pubsub.notify(TYPE_B);
30
pubsub.notify(TYPE_C);