Rumah >hujung hadapan web >tutorial js >Memanfaatkan Pengaturcaraan Fungsian dengan JavaScript

Memanfaatkan Pengaturcaraan Fungsian dengan JavaScript

Mary-Kate Olsen
Mary-Kate Olsenasal
2025-01-12 06:05:42843semak imbas

Corak reka bentuk merupakan penyelesaian yang mantap kepada cabaran yang kerap berlaku dalam reka bentuk perisian. Dengan menggunakannya, pembangun boleh meningkatkan kebolehbacaan kod, kebolehskalaan dan kebolehselenggaraan. Artikel ini meneroka cara TypeScript, superset JavaScript yang semakin popular memperbaik corak ini dengan jenis keselamatan dan ciri modennya. Sama ada anda sedang membangunkan aplikasi berskala besar atau projek sampingan, memahami corak reka bentuk dalam TypeScript akan meningkatkan kemahiran pembangunan anda.

Apakah Corak Reka Bentuk?

Corak reka bentuk boleh diguna semula, penyelesaian generik kepada cabaran biasa dalam reka bentuk perisian. Ia bukan kod sebenar tetapi lebih kepada templat untuk menangani isu ini. Berasal daripada buku "Gang of Four" (GoF), corak ini terbahagi kepada tiga kategori utama:

  1. Corak Penciptaan: Prihatin dengan mekanisme penciptaan objek.
  2. Corak Struktur: Tekankan komposisi dan organisasi objek.
  3. Corak Tingkah Laku: Fokus pada interaksi dan komunikasi antara objek.

Mengapa Menggunakan Corak Reka Bentuk dalam TypeScript?

Ciri TypeScript menjadikan pelaksanaan corak reka bentuk lebih mantap:

1. Penaipan Statik: Ralat ditangkap pada masa penyusunan, mengurangkan pepijat masa jalan.
2. Antara Muka dan Generik: Benarkan pelaksanaan yang lebih tepat dan fleksibel.
3. Jenis Enum dan Kesatuan: Permudahkan corak tertentu, seperti pengurusan negeri.
4. Alatan Dipertingkat: Dengan sokongan IDE, TypeScript meningkatkan produktiviti.

Beberapa Corak Reka Bentuk Utama dalam TypeScript

1. Corak Singleton

Memastikan kelas hanya mempunyai satu tika dan menyediakan titik global akses kepadanya.

Pelaksanaan dalam TypeScript:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

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

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Kes Penggunaan: Mengurus tetapan konfigurasi atau sambungan pangkalan data.

2. Corak Kilang

Menyediakan antara muka untuk mencipta objek tanpa menyatakan kelas tepatnya.

Pelaksanaan:

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

Kes Penggunaan: Rangka kerja UI untuk aplikasi merentas platform.

3. Corak Pemerhati

Mentakrifkan perhubungan satu-dengan-banyak, di mana perubahan dalam satu objek dimaklumkan kepada semua tanggungannya.

Pelaksanaan:

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

Kes Penggunaan: Kereaktifan dalam rangka kerja bahagian hadapan seperti Angular atau React.

4. Corak Strategi

Mentakrifkan keluarga algoritma, merangkum setiap satu dan menjadikannya boleh ditukar ganti.

Pelaksanaan:

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

Kes Penggunaan: Sistem pembayaran dalam platform e-dagang.

5. Corak Penghias

Menambah kefungsian baharu pada objek secara dinamik.

Pelaksanaan:

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

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

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Kes Penggunaan: Menambah ciri pada produk dalam troli beli-belah.

Jadual Corak Reka Bentuk

Pattern Category Use Case Benefit
Singleton Creational Managing global state like configurations Guarantees single instance
Factory Creational UI components or APIs Decouples creation logic
Observer Behavioral Event systems in frameworks Simplifies communication
Strategy Behavioral Algorithm selection in runtime Enhances flexibility
Decorator Structural Extending class functionality Adds dynamic capabilities
Corak

Kategori

Kes Penggunaan

Manfaat
Singleton Penciptaan Menguruskan keadaan global seperti konfigurasi Menjamin satu contoh Kilang Penciptaan Komponen UI atau API Memisahkan logik penciptaan Pemerhati Tingkah Laku Sistem acara dalam rangka kerja Memudahkan komunikasi Strategi Tingkah Laku Pemilihan algoritma dalam masa jalan Meningkatkan fleksibiliti Penghias Struktural Memperluaskan fungsi kelas Menambahkan keupayaan dinamik Amalan Terbaik untuk Melaksanakan Corak Reka Bentuk
1. Fahami Masalah:
Jangan rumitkan perkara dengan corak yang tidak perlu. 2. Corak Gabungan: Pertimbangkan untuk menggunakan gabungan seperti Singleton dengan Kilang.

3. Manfaatkan Ciri TypeScript:
    Gunakan antara muka, generik dan enum untuk memudahkan pelaksanaan.
  • 4. Tulis Ujian: Pastikan corak berfungsi seperti yang dimaksudkan. Sumber Tambahan
  • হাতে কলমে জাভাস্ক্রিপ্ট oleh Junayed Ahmed

Memfaktor semula kepada Corak
oleh

Joshua Kerievsky


Jumpa anda dalam artikel seterusnya, kawan! ?

Harnessing Functional Programming with JavaScript

Tapak web peribadi saya: https://shafayet.zya.me
Agak berangin, innit bruv???

Atas ialah kandungan terperinci Memanfaatkan Pengaturcaraan Fungsian dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn