TypeScript 中的高级设计模式-js教程-PHP中文网

设计模式是针对软件设计中反复出现的问题的经过时间考验的解决方案。它们增强了代码的可读性、可扩展性和可维护性。 TypeScript 具有强大的类型和现代 JavaScript 基础，是有效实现这些模式的优秀语言。

本文深入研究了高级和常用的设计模式，解释了它们的概念、TypeScript 实现和实际用例。无论您是经验丰富的开发人员还是正在探索 TypeScript，您都将获得构建强大应用程序的宝贵见解。

什么是设计模式？

设计模式是常见设计问题的可重用解决方案。它们分为三种主要类型：

创建模式：处理对象创建。
结构模式：专注于对象组合。
行为模式： 关注对象交互。

TypeScript 中的创意设计模式

1。单例模式
确保一个类在整个应用程序中只有一个实例。

用例：管理全局状态或配置。

实施：

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

登录后复制

2.工厂方法
创建对象而不指定其确切的类。

用例：当需要抽象对象创建逻辑时。

实施：

interface Product {
  operation(): string;
}

class ConcreteProductA implements Product {
  operation(): string {
    return "Product A";
  }
}

class ConcreteProductB implements Product {
  operation(): string {
    return "Product B";
  }
}

abstract class Creator {
  abstract factoryMethod(): Product;

  someOperation(): string {
    const product = this.factoryMethod();
    return `Creator: ${product.operation()}`;
  }
}

class ConcreteCreatorA extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

// Usage
const creatorA = new ConcreteCreatorA();
console.log(creatorA.someOperation());

登录后复制

3.构建器模式
将对象构造与其表示分离。

用例：逐步构造复杂的对象。

实施：

class Product {
  private parts: string[] = [];

  addPart(part: string): void {
    this.parts.push(part);
  }

  listParts(): void {
    console.log(`Product parts: ${this.parts.join(", ")}`);
  }
}

class Builder {
  private product = new Product();

  reset(): void {
    this.product = new Product();
  }

  addPartA(): void {
    this.product.addPart("Part A");
  }

  addPartB(): void {
    this.product.addPart("Part B");
  }

  getProduct(): Product {
    const result = this.product;
    this.reset();
    return result;
  }
}

// Usage
const builder = new Builder();
builder.addPartA();
builder.addPartB();
const product = builder.getProduct();
product.listParts();

登录后复制

TypeScript 中的结构设计模式

1。适配器模式
将一个类的接口转换为另一个接口。

用例：集成第三方库。

实施：

class OldSystem {
  oldRequest(): string {
    return "Old System";
  }
}

class NewSystem {
  newRequest(): string {
    return "New System";
  }
}

class Adapter extends OldSystem {
  private adaptee: NewSystem;

  constructor(adaptee: NewSystem) {
    super();
    this.adaptee = adaptee;
  }

  oldRequest(): string {
    return this.adaptee.newRequest();
  }
}

// Usage
const adaptee = new NewSystem();
const adapter = new Adapter(adaptee);
console.log(adapter.oldRequest());

登录后复制

2.复合模式
将对象组合成树结构来表示部分-整体层次结构。

用例：管理分层数据。

实施：

abstract class Component {
  abstract operation(): string;
}

class Leaf extends Component {
  operation(): string {
    return "Leaf";
  }
}

class Composite extends Component {
  private children: Component[] = [];

  add(component: Component): void {
    this.children.push(component);
  }

  operation(): string {
    const results = this.children.map(child => child.operation());
    return `Composite(${results.join(", ")})`;
  }
}

// Usage
const leaf = new Leaf();
const composite = new Composite();
composite.add(leaf);
console.log(composite.operation());

登录后复制

TypeScript 中的行为设计模式

1。观察者模式
定义对象之间的依赖关系，以便一个对象更改状态，所有依赖项都会收到通知。

用例：事件系统。

实施：

interface Observer {
  update(message: string): void;
}

class Subject {
  private observers: Observer[] = [];

  attach(observer: Observer): void {
    this.observers.push(observer);
  }

  notify(message: string): void {
    this.observers.forEach(observer => observer.update(message));
  }
}

class ConcreteObserver implements Observer {
  update(message: string): void {
    console.log(`Received message: ${message}`);
  }
}

// Usage
const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();
subject.attach(observer1);
subject.attach(observer2);
subject.notify("Event occurred!");

登录后复制

2.策略模式
定义一系列算法并使它们可以互换。

用例：付款方式或排序算法。

实施：

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

登录后复制