Rumah >hujung hadapan web >tutorial js >Memanfaatkan Pengaturcaraan Fungsian dengan JavaScript
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.
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:
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.
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.
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.
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.
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.
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.
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 |
Kes Penggunaan
Memfaktor semula kepada Corak
Joshua Kerievsky
Jumpa anda dalam artikel seterusnya, kawan! ?
Tapak web peribadi saya: https://shafayet.zya.me
Atas ialah kandungan terperinci Memanfaatkan Pengaturcaraan Fungsian dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!