TypeScript中订阅模式与观察者模式是否为同一模式？

Hey there! Great question—this confusion is so common, and I totally get why you're scratching your head after your Google searches. Let me break this down clearly:

核心结论：大部分场景下，它们是同一模式的不同称呼 #

In most tutorials, articles, and real-world code (especially in frontend contexts like TypeScript), "订阅模式" is just an alias for the Observer Pattern. When Max talked about "订阅模式" in his TypeScript video, he was almost certainly referring to the same pattern you've been reading about under the "观察者模式" name.

为什么会有两个名字？ #

The Observer Pattern is a classic Gang of Four (GoF) design pattern, but over time, developers have started using "订阅模式" (or "Publish-Subscribe Pattern") interchangeably with it.

That said, some sources do draw a tiny, often overlooked distinction:

• Traditional Observer Pattern: Observers directly attach to a subject (publisher), and the subject notifies them directly. There's no middleman.
• Strict Publish-Subscribe Pattern: A central event broker/message hub sits between publishers and subscribers. Publishers send events to the hub, and subscribers listen to the hub—they never directly reference each other.

But in practice, this distinction is rarely enforced. Most people use both terms to mean the same thing: a way for one object to notify multiple other objects when its state changes.

Quick TypeScript Example to Connect the Dots #

Here's a simple implementation that fits both "订阅模式" and "观察者模式" descriptions:

// 发布者/主题
class NewsPublisher {
  private subscribers: Subscriber[] = [];

  // 订阅方法
  subscribe(subscriber: Subscriber) {
    this.subscribers.push(subscriber);
    console.log(`${subscriber.name} subscribed to news updates!`);
  }

  // 取消订阅
  unsubscribe(subscriber: Subscriber) {
    this.subscribers = this.subscribers.filter(s => s !== subscriber);
    console.log(`${subscriber.name} unsubscribed from news updates.`);
  }

  // 通知所有订阅者
  publishNews(headline: string) {
    console.log(`Breaking news: ${headline}`);
    this.subscribers.forEach(sub => sub.receiveNews(headline));
  }
}

// 订阅者/观察者
interface Subscriber {
  name: string;
  receiveNews(headline: string): void;
}

class NewsReader implements Subscriber {
  constructor(public name: string) {}

  receiveNews(headline: string) {
    console.log(`${this.name} reads: ${headline}`);
  }
}

// 使用示例
const publisher = new NewsPublisher();
const alice = new NewsReader('Alice');
const bob = new NewsReader('Bob');

publisher.subscribe(alice);
publisher.subscribe(bob);
publisher.publishNews('TypeScript 5.4 Released!');
publisher.unsubscribe(bob);
publisher.publishNews('New React Features Announced!');

Final Takeaway #

Don't stress about the terminology difference. The key idea is the same: decoupling objects so that changes in one can trigger updates in others without tight dependencies. Max's "订阅模式" is exactly the Observer Pattern you've been researching.

内容的提问来源于stack exchange，提问作者Ogbonna Stanley