JavaScript 開発者向けの重要なデザイン パターン: コーディングの習熟度を高める

JavaScript 開発者のための 7 つの基本的なデザイン パターン: コーディングの習熟度を高める

ソフトウェア開発の動的な世界では、スケーラブルで保守可能で効率的なコードを作成するには、設計パターンを理解することが重要です。小規模なプロジェクトに取り組んでいる場合でも、複雑なアプリケーションを構築している場合でも、デザイン パターンは一般的な課題に対する実績のあるソリューションを提供します。この投稿では、JavaScript 開発者が知っておくべき 7 つの主要な設計パターンを詳しく掘り下げ、コーディングの専門知識を高めるための実践的な例を示します。

— -

1.シングルトン パターン: 単一インスタンスの確保

シングルトン パターンは、グローバル アクセス ポイントを提供しながら、クラスのインスタンスが 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.オブザーバーのパターン: 変化に反応する

観察者パターンでは、複数のオブジェクト (観察者) が 1 つの対象を監視します。被験者の状態が変化すると、すべての観察者に通知されます。このパターンは、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 中国語 Web サイトの他の関連記事を参照してください。