JavaScript 開發人員的基本設計模式：提升您的程式碼掌握程度

JavaScript 開發人員的 7 個基本設計模式：提升您的編碼能力

在軟體開發的動態世界中，理解設計模式對於創建可擴展、可維護和高效的程式碼至關重要。無論您是在處理小型專案還是建立複雜的應用程序，設計模式都可以為常見挑戰提供經過時間考驗的解決方案。這篇文章深入探討了每個 JavaScript 開發人員都應該知道的七個關鍵設計模式，並透過實際範例來增強您的編碼專業知識。

— -

1。單例模式：確保單一實例

單例模式確保一個類別只有一個實例，同時提供全域存取點。它非常適合管理單一配置物件或集中狀態等場景。

class Singleton {
    constructor() {
        if (Singleton.instance) {
            return Singleton.instance;
        }
        Singleton.instance = this;
        this.data = {};
    }
    setData(key, value) {
        this.data[key] = value;
    }
    getData(key) {
        return this.data[key];
    }
}
// Example Usage
const instance1 = new Singleton();
instance1.setData("theme", "dark");
const instance2 = new Singleton();
console.log(instance2.getData("theme")); // Output: dark

— -

2。工廠模式：簡化物件建立

工廠模式提供了一種建立物件的方法，而無需指定其確切的類別。這種模式對於建立具有多種物件類型的應用程式非常有價值。

class Car {
  constructor(model) {
    this.type = "Car";
    this.model = model;
  }
}

class Bike {
  constructor(model) {
    this.type = "Bike";
    this.model = model;
  }
}

class VehicleFactory {
  static createVehicle(type, model) {
    if (type === "car") return new Car(model);
    if (type === "bike") return new Bike(model);
    throw new Error("Unknown vehicle type");
  }
}

// Example Usage
const tesla = VehicleFactory.createVehicle("car", "Tesla");
console.log(tesla); // Output: Car { type: 'Car', model: 'Tesla' }

— -

3。觀察者模式：對變化做出反應

在觀察者模式中，多個物件（觀察者）觀察單一主題。當主體的狀態改變時，所有觀察者都會收到通知。這種模式在 GUI 等事件驅動系統中特別有用。

class Subject {
    constructor() {
        this.observers = [];
    }
    subscribe(observer) {
        this.observers.push(observer);
    }
    notify(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}
class Observer {
    constructor(name) {
        this.name = name;
    }
    update(data) {
        console.log(`${this.name} received: ${data}`);
    }
}
// Example Usage
const newsChannel = new Subject();
const subscriber1 = new Observer("Alice");
const subscriber2 = new Observer("Bob");
newsChannel.subscribe(subscriber1);
newsChannel.subscribe(subscriber2);
newsChannel.notify("Breaking News!");

— -

4。裝飾器模式：增強功能

裝飾器模式可讓您動態地為物件添加行為，而無需修改其結構。這對於以模組化方式擴展功能特別有用。

function withTimestamp(func) {
    return function(message) {
        func(`[${new Date().toISOString()}] ${message}`);
    };
}
// Example Usage
const log = console.log;
const logWithTimestamp = withTimestamp(log);
logWithTimestamp("Hello, World!"); // Output: [2024–12–14T12:00:00.000Z] Hello, World!

— -

5。策略模式：動態演算法切換

策略模式定義了一系列演算法，封裝它們，並使它們可以互換。這非常適合需要基於用戶輸入或上下文的多種行為的應用程式。

class PaymentStrategy {
    pay(amount) {
        throw new Error("pay() must be implemented.");
    }
}
class CreditCardPayment extends PaymentStrategy {
    pay(amount) {
        console.log(`Paid $${amount} with Credit Card.`);
    }
}
class PayPalPayment extends PaymentStrategy {
    pay(amount) {
        console.log(`Paid $${amount} with PayPal.`);
    }
}
// Example Usage
const paymentMethod = new PayPalPayment();
paymentMethod.pay(100); // Output: Paid 0 with PayPal.

— -

6。原型模式：物件克隆變得簡單

此模式允許透過複製原型來建立物件。它通常用於物件組合和避免重複實例化。

const vehiclePrototype = {
    start() {
        console.log(`${this.model} is starting.`);
    },
};

function createVehicle(model) {
    const vehicle = Object.create(vehiclePrototype);
    vehicle.model = model;
    return vehicle;
}
// Example Usage
const car = createVehicle("Toyota");
car.start(); // Output: Toyota is starting.

— -

7。指令模式：封裝請求

指令模式將請求封裝為對象，實現靈活的操作調度和撤銷功能。

class Light {
    on() {
        console.log("Light is ON");
    }
    off() {
        console.log("Light is OFF");
    }
}
class LightOnCommand {
    constructor(light) {
        this.light = light;
    }
    execute() {
        this.light.on();
    }
}
// Example Usage
const light = new Light();
const lightOnCommand = new LightOnCommand(light);
lightOnCommand.execute(); // Output: Light is ON

— -

最後的想法
掌握這些設計模式將為您提供強大的工具來編寫更好的程式碼。透過了解它們的實際應用，您可以有效地應對挑戰並建立強大的軟體。您最喜歡哪一種設計模式？在下面的評論中分享你的想法！

以上是JavaScript 開發人員的基本設計模式：提升您的程式碼掌握程度的詳細內容。更多資訊請關注PHP中文網其他相關文章！