TypeScript 设计模式详解
设计模式是软件开发中常用的解决方案，其本质在于总结行业经验，以便更高效地处理常见问题。在本文中，我们将讨论一些在 TypeScript 中实现的设计模式，并通过代码示例进行说明。同时，我们还将展示类图和关系图，以更好地理解这些模式。
1. 单例模式（Singleton Pattern）
单例模式确保一个类只有一个实例，并提供全局访问点。这个模式适合在需要控制资源的访问时使用，比如数据库连接。
代码示例
class Singleton {
private static instance: Singleton;
private constructor() {
// 私有构造函数
}
public static getInstance(): Singleton {
if (!this.instance) {
this.instance = new Singleton();
}
return this.instance;
}
public sayHello() {
console.log("Hello, Singleton");
}
}
// 使用示例
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
singleton1.sayHello(); // Hello, Singleton
console.log(singleton1 === singleton2); // true
类图
classDiagram
class Singleton {
+getInstance(): Singleton
+sayHello(): void
}
2. 工厂模式（Factory Pattern）
工厂模式定义了一个创建对象的接口，但由子类决定要实例化的类是哪一个。这种模式可以将对象的创建推迟到子类中。
代码示例
interface Product {
operation(): string;
}
class ConcreteProductA implements Product {
public operation(): string {
return "结果: 产品A";
}
}
class ConcreteProductB implements Product {
public operation(): string {
return "结果: 产品B";
}
}
class Creator {
public static createProduct(type: string): Product {
if (type === "A") {
return new ConcreteProductA();
} else if (type === "B") {
return new ConcreteProductB();
}
throw new Error("Unknown product type");
}
}
// 使用示例
const productA = Creator.createProduct("A");
console.log(productA.operation()); // 结果: 产品A
const productB = Creator.createProduct("B");
console.log(productB.operation()); // 结果: 产品B
类图
classDiagram
class Product {
+operation(): string
}
class ConcreteProductA {
+operation(): string
}
class ConcreteProductB {
+operation(): string
}
class Creator {
+createProduct(type: string): Product
}
Product <|-- ConcreteProductA
Product <|-- ConcreteProductB
3. 观察者模式（Observer Pattern）
观察者模式定义了对象间的一对多关系，确保当一个对象的状态发生变化时，所有依赖于它的对象都能得到通知。
代码示例
class Subject {
private observers: Observer[] = [];
public attach(observer: Observer) {
this.observers.push(observer);
}
public notify() {
this.observers.forEach(observer => observer.update());
}
}
interface Observer {
update(): void;
}
class ConcreteObserver implements Observer {
private name: string;
constructor(name: string) {
this.name = name;
}
public update(): void {
console.log(`${this.name} 收到了更新通知!`);
}
}
// 使用示例
const subject = new Subject();
const observer1 = new ConcreteObserver("观察者1");
const observer2 = new ConcreteObserver("观察者2");
subject.attach(observer1);
subject.attach(observer2);
subject.notify(); // 观察者1 收到了更新通知!
// 观察者2 收到了更新通知!
类图
classDiagram
class Subject {
+attach(observer: Observer): void
+notify(): void
}
class Observer {
+update(): void
}
class ConcreteObserver {
+update(): void
}
Subject --> Observer
Observer <|-- ConcreteObserver
4. 关系图
反映了对象之间的关系，如依赖、关联等。
erDiagram
SUBJECT ||--o{ OBSERVER : notifies
OBSERVER }o--|| CONCRETE_OBSERVER : implements
总结
设计模式为我们提供了一套通用的、可复用的解决方案。在 TypeScript 中实现这些设计模式，可以使我们的代码更加清晰、易于维护。通过本文中讨论的单例模式、工厂模式和观察者模式，并通过类图和关系图的展示，希望能够帮助您更好地理解和应用这些设计模式。在项目开发中，根据具体需求选择合适的设计模式，将会大大提高代码的质量和可读性。
