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

登入後複製