Corak Reka Bentuk Lanjutan dalam TypeScript

Corak reka bentuk ialah penyelesaian yang diuji masa untuk masalah berulang dalam reka bentuk perisian. Mereka meningkatkan kebolehbacaan kod, kebolehskalaan dan kebolehselenggaraan. TypeScript, dengan penaipan yang kukuh dan asas JavaScript moden, ialah bahasa yang sangat baik untuk melaksanakan corak ini dengan berkesan.

Artikel ini menyelidiki corak reka bentuk lanjutan dan biasa digunakan, menerangkan konsepnya, pelaksanaan TypeScript dan kes penggunaan praktikal. Sama ada anda seorang pembangun yang berpengalaman atau meneroka TypeScript, anda akan mendapat cerapan berharga dalam membina aplikasi yang mantap.

Apakah Corak Reka Bentuk?

Corak reka bentuk ialah penyelesaian boleh guna semula untuk masalah reka bentuk biasa. Mereka dikategorikan kepada tiga jenis utama:

1. Corak Ciptaan: Berurusan dengan penciptaan objek.
2. Corak Struktur: Fokus pada gubahan objek.
3. Corak Tingkah Laku: Prihatin dengan interaksi objek.

Corak Reka Bentuk Ciptaan dalam TypeScript

1. Corak Singleton
Memastikan kelas hanya mempunyai satu tika sepanjang aplikasi.

Kes Penggunaan: Menguruskan keadaan atau konfigurasi global.

Pelaksanaan:

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. Kaedah Kilang
Mencipta objek tanpa menyatakan kelas tepatnya.

Kes Penggunaan: Apabila logik penciptaan objek perlu diabstraksikan.

Pelaksanaan:

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. Corak Pembina
Mengasingkan pembinaan objek daripada perwakilannya.

Kes Penggunaan: Bina objek kompleks langkah demi langkah.

Pelaksanaan:

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();

Corak Reka Bentuk Struktur dalam TypeScript

1. Corak Penyesuai
Menukar antara muka kelas kepada antara muka lain.

Kes Penggunaan: Mengintegrasikan perpustakaan pihak ketiga.

Pelaksanaan:

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. Corak Komposit
Mengarang objek ke dalam struktur pokok untuk mewakili hierarki sebahagian keseluruhan.

Kes Penggunaan: Mengurus data hierarki.

Pelaksanaan:

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());

Corak Reka Bentuk Tingkah Laku dalam TypeScript

1. Corak Pemerhati
Mentakrifkan kebergantungan antara objek supaya satu objek berubah keadaan, semua tanggungan dimaklumkan.

Kes Penggunaan: Sistem acara.

Pelaksanaan:

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. Corak Strategi
Mentakrifkan keluarga algoritma dan menjadikannya boleh ditukar ganti.

Kes Penggunaan: Kaedah pembayaran atau algoritma pengisihan.

Pelaksanaan:

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

Pada akhirnya,,,

Corak reka bentuk ialah alat yang berkuasa untuk membina aplikasi boleh skala dan boleh diselenggara. Sistem jenis teguh TypeScript dan sintaks moden menyediakan platform yang sangat baik untuk melaksanakan corak ini dengan berkesan. Dengan memahami dan menggunakan corak reka bentuk ini, pembangun boleh mencipta penyelesaian perisian yang direka bentuk dengan baik yang tahan ujian masa.
Jumpa anda dalam artikel seterusnya, kawan!!!

---

Tapak web peribadi saya: https://shafayet.zya.me

---

Persediaan yang mengerikan?

Atas ialah kandungan terperinci Corak Reka Bentuk Lanjutan dalam TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!