ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でのファクトリー設計パターン

JavaScript でのファクトリー設計パターン

DDD
リリース: 2024-10-03 20:19:30
オリジナル
535 人が閲覧しました

Factory Design Pattern in JavaScript

ファクトリ デザイン パターンは、作成されるオブジェクトの正確なクラスを指定せずにオブジェクトを作成する方法を提供する創造的なデザイン パターンです。これには、入力または構成に基づいてどのクラスをインスタンス化するかを決定するファクトリ メソッドの作成が含まれます。これは、すべてのオブジェクトの作成とそのビジネス ロジックを 1 か所に保持する必要がある場合に使用されます。

ファクトリ デザイン パターンの主な利点は、オブジェクトの作成を 1 つの特定の実装から分離できることです。
実行時にクラスが決定されるオブジェクトを作成できます。
Factory を使用すると、クラスよりもはるかに小さい「表面積」を公開できます。クラスは拡張、操作できますが、Factory は単なる関数であり、ユーザーに提供するオプションが少なく、より堅牢になります。
したがって、ファクトリを使用して、クロージャを利用してカプセル化を強制することもできます。

カプセル化を強制する方法

JavaScript でカプセル化を強制する主な方法の 1 つは、関数のスコープとクロージャを使用することです。

ファクトリーはカプセル化メカニズムとしても使用できます。

カプセル化とは、コンポーネントの一部の内部詳細へのアクセスを、外部コードによる直接操作を防止することで制御することを指します。コンポーネントとの対話は、そのパブリック インターフェイスを通じてのみ行われ、コンポーネントの実装詳細の変更から外部コードを分離します。

クロージャを使用すると、ファクトリの外部からアクセスできないプライベート変数やメソッドを作成できるため、カプセル化が強制され、オブジェクトの作成と実装の内部詳細が隠蔽されます。

オブジェクトの作成と実装の分離

new 演算子または Object.create() を使用してクラスから新しいオブジェクトを直接作成するのではなく、ファクトリを呼び出す方が、いくつかの点で非常に便利で柔軟です。

ファクトリを使用すると、オブジェクトの作成と実装を分離できます。ファクトリは新しいインスタンスの作成をラップし、実行方法の柔軟性と制御を強化します。ファクトリ内では、new 演算子を使用してクラスの新しいインスタンスを作成するか、クロージャを利用してステートフル オブジェクト リテラルを動的に構築するか、特定の条件に基づいて別のオブジェクト タイプを返すかを選択します。ファクトリのコンシューマは、インスタンスの作成がどのように実行されるかをまったく知りません。

ファクトリ設計パターンが必要な理由を理解するために、小さな例を見てみましょう

function createImg(name) {
    return new Image(name);
}

const image = createImg('photo.jpg');
ログイン後にコピー

次のように直接記述できるのに、なぜこの追加のコード行を記述するのかを説明することもできます。

const image = new Image(name);
ログイン後にコピー

ファクトリ関数 (createImg) を使用する背後にある考え方は、オブジェクトを作成するプロセスを抽象化することです。

リファクタリングにおけるファクトリー関数の利点:

単一変更点: ファクトリ関数を使用することで、オブジェクト作成プロセスを一元化します。ロジックのリファクタリングまたは拡張には、コードベース全体ではなく 1 か所での変更が必要です。

クライアント コードの簡素化: オブジェクト作成プロセスが複雑になっても、ファクトリ関数を使用するクライアント コードは変更されません。

カプセル化: ファクトリ関数は、追加のロジック (キャッシュ、デフォルト パラメーター、新しいオブジェクト タイプなど) をカプセル化します。これにより、複数の場所でのロジックの重複が防止され、リファクタリング中のエラーのリスクが軽減されます。

保守性: コードが大きくなるにつれて、ファクトリ関数の保守は、直接インスタンス化をリファクタリングするよりもはるかに簡単になります。ファクトリ関数を使用すると、コードの残りの部分に影響を与えることなく、新しい機能の導入、最適化、またはバグの修正を行うことができます。

JavaScript でファクトリー デザイン パターンを実装する基本的な例を次に示します。
シナリオ: 入力に応じて、さまざまなタイプの車両 (車、バイク、トラック) を作成する工場。

// Vehicle constructor functions
class Car {
  constructor(brand, model) {
    this.vehicleType = 'Car';
    this.brand = brand;
    this.model = model;
  }

  drive() {
    return `Driving a ${this.brand} ${this.model} car.`;
  }
}

class Bike {
  constructor(brand, model) {
    this.vehicleType = 'Bike';
    this.brand = brand;
    this.model = model;
  }

  ride() {
    return `Riding a ${this.brand} ${this.model} bike.`;
  }
}

class Truck {
  constructor(brand, model) {
    this.vehicleType = 'Truck';
    this.brand = brand;
    this.model = model;
  }

  haul() {
    return `Hauling with a ${this.brand} ${this.model} truck.`;
  }
}

// Vehicle factory that creates vehicles based on type
class VehicleFactory {
  static createVehicle(type, brand, model) {
    switch (type) {
      case 'car':
        return new Car(brand, model);
      case 'bike':
        return new Bike(brand, model);
      case 'truck':
        return new Truck(brand, model);
      default:
        throw new Error('Vehicle type not supported.');
    }
  }
}

// Using the factory to create vehicles
const myCar = VehicleFactory.createVehicle('car', 'Tesla', 'Model 3');
console.log(myCar.drive()); // Output: Driving a Tesla Model 3 car.

const myBike = VehicleFactory.createVehicle('bike', 'Yamaha', 'MT-15');
console.log(myBike.ride()); // Output: Riding a Yamaha MT-15 bike.

const myTruck = VehicleFactory.createVehicle('truck', 'Ford', 'F-150');
console.log(myTruck.haul()); // Output: Hauling with a Ford F-150 truck.

ログイン後にコピー

仕組み:

  1. 車両クラス: さまざまなタイプの車両 (車、バイク、トラック) を定義し、それぞれに独自のコンストラクターと、drive()、ride()、および hal() などの特定のメソッドを備えています。
  2. ファクトリ メソッド: VehicleFactory.createVehicle() メソッドは、オブジェクト作成のロジックを処理するファクトリです。渡された type 引数に基づいて、インスタンス化する車両のタイプを決定します。
  3. 再利用性: 工場では車両作成ロジックが集中化され、作成プロセスの管理、拡張、変更が容易になります。

追伸: 上記のファクトリー デザイン パターンの例では、Car、Bike、Truck などのクラスは、ファクトリー メソッド (VehicleFactory.createVehicle) 内の新しいキーワードを使用してインスタンス化されています
ファクトリ パターンはオブジェクトの作成を抽象化します。つまり、クライアント自身が new キーワードを使用する必要がありません。これらは、ファクトリ メソッドに依存して正しいインスタンスを返します。

ファクトリーパターンを使用する場合:

  • 実行時にオブジェクトの正確なタイプを決定する必要がある場合。
  • オブジェクト作成ロジックを一元化したい場合。
  • 作成プロセスに複雑なロジックまたは複数のステップが含まれる場合。

まとめ

  • ファクトリー デザイン パターンは、JavaScript で複雑または多様なオブジェクトの作成を処理する便利な方法です。
  • インスタンス化ロジックを抽象化し、さまざまなオブジェクト タイプの柔軟性と管理を容易にします。
  • このパターンは、実際のアプリケーション、特にオブジェクトの作成が実行時の条件や構成に依存する複雑なシステムを扱う場合に広く使用されています。
  • 実際のプロジェクトでは、コードが進化して複雑になるにつれて、ファクトリ関数のアプローチにより必要な変更の数が最小限に抑えられ、コードの保守性が向上し、リファクタリングが容易になります。

参考書籍 : NodeJs デザインパターン (Mario Casciaro 著)

これまで説明してきたように、設計パターンは一般的なソフトウェア設計の課題を効率的に解決する上で重要な役割を果たします。私と同じように始めたばかりの場合でも、理解を深めようとしている場合でも、ここで共有される洞察は、より適応性と拡張性のあるシステムを構築するのに役立ちます。

デザイン パターンをマスターするまでの道のりは、最初は圧倒されるように感じるかもしれませんが、小さなことから始めて実験し、これらの概念を実際のプロジェクトに適用することで、開発者としてのスキルを強化することができます。今度はあなたの番です!これらのアイデアを自分の仕事にどのように適用しますか?以下のコメント欄でご意見やご質問をお聞かせください。ぜひご意見をお待ちしております。

この学習の旅にご参加いただきありがとうございます!
✨✨✨✨✨✨

以上がJavaScript でのファクトリー設計パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート