Javascriptでビルダーパターンを実装する方法

Javascriptでビルダーパターンを実装する方法

概要

ビルダー パターンは比較的単純なデザイン パターンであり、作成パターンに属します。

定義: 複雑なオブジェクトを複数の単純なオブジェクトに分解して構築し、複雑な構築層とプレゼンテーション層を分離して、同じ構築プロセスで異なるプレゼンテーション モードを作成できるようにします。

アドバンテージ:

  • ビルダー パターンではカプセル化が強化され、オブジェクトの作成と構築のプロセスが分離されます。
  • ビルダー パターンは簡単に拡張できます。拡張が必要な​​場合は、新しいビルダーを使用して拡張できます。

モード機能:

  • 複雑なオブジェクトを段階的に作成する
  • パッケージングプロセスとコンポーネントの特定の作成を切り離す
  • コンポーネントの組み立て方法を心配する必要はありません

注記:

  • 安定したアルゴリズムのサポートが必要
  • 加工技術が公開されているため、富裕層はいつでも家がどのように建てられているかを見に行くことができます。

俗語による説明:

金持ちが家を建てたいとします。必要なのは請負業者を見つけることだけです。請負業者は家を建てるための建設チームを見つけます。建設チームを編成して建設を開始するために、労働者を 1 人ずつ探す必要はありません。請負業者は金持ちのニーズを知っており、建設チームを編成するために労働者をどこで見つけるかも知っています。労働者は直接作業できるため、金持ちは労働者と直接やり取りするコストを節約できます。金持ちは家の建て方を知る必要はありません。最後に家を検査できればよいだけです。

コードの実装

コードを書く前に、まず分析してみましょう。

1. 出力は家です

2. 請負業者は作業員を呼び出して作業を開始し、作業員の具体的な主要プロジェクトについて明確に伝える必要があります。

3. 労働者は寝室、リビングルーム、キッチンを建設できる住宅建設者です。

4. 請負業者は単なるインターフェースです。他の人に家を建てるように指示するだけで、何もする必要はありません。

関数Fangzi(){
    this.woshi = "";
    this.keting = "";
    this.chufang = "";
}

関数 Baogongtou(){
    this.jianfangzi = function(gongren){
        gongren.jian_woshi();
        gongren.jian_keting();
        gongren.jian_chufang();
    }
}

関数 Gongren(){
    this.jian_woshi = 関数(){
        console.log("寝室が完成しました!");
    }

    this.jian_keting = 関数(){
        console.log("リビングルームが完成しました!");
    }

    this.jian_chufang = 関数(){
        console.log("キッチンが完成しました!");
    }

    this.wangong = 関数(){
        var fangzi = 新しい Fangzi();
        fangzi.woshi = "OK";
        fangzi.keting = "ok";
        fangzi.chufang = "OK";
        牙子を返す;
    }
}
gongren = new Gongren();
baogongtou = new Baogongtou() とします。
//寝室が完成しました!
//リビングルームが完成しました!
//キッチンが完成しました!
宝公頭建方子(公人);
var my_fangzi = gongren.wangong();
/*
ファンジ=
       チューファン:「OK」
       keting: 「OK」
       をし: 「わかった」
       }
*/
コンソールにログ出力します。

上記のコードでは、Gongren() に具体的な建設プロセス、つまり具体的な作業が含まれていることがわかります。Fangzi() は最初は空で、リビングルーム、キッチン、寝室はありません。Baogongtou() は、家を建てることができることを宣伝し、次にワーカー メソッドを渡してワーカーを呼び出して建設を行います。ワーカー メソッドが実行されると、建設が完了し、その後家が引き渡されます。Fangzi() メソッドを新しいメソッドでインスタンス化し、新しいメソッドで再割り当てします。

以上がJavascriptでビルダーパターンを実装する方法の詳細です。Javascriptビルダーパターンの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript デザインパターン - ビルダーパターンの原則とアプリケーション例の分析
  • JavaScript デザインパターン ビルダーパターン例チュートリアル
  • JavaScript デザインパターン クラシックビルダーパターン
  • JSビルダーモードの基本的な使用例の分析
  • JavaScript徹底理解シリーズ(27):デザインパターンにおけるビルダーパターンの詳細解説
  • JavaScript デザインパターン ビルダーパターンの紹介
  • JS デザイン パターン: ファクトリー パターンの定義と実装の簡単な分析
  • JS デザイン パターン: シングルトン パターンの定義と実装の簡単な分析
  • JavaScript デザイン パターン - ビジター パターンの原則と使用例の分析
  • JavaScript デザインパターン - テンプレートメソッドパターンの原則と使用例の分析

<<:  CentOS7にPHP7 Redis拡張機能をインストールする方法

>>:  Linux パーティションまたは論理ボリュームにファイルシステムを作成する方法

推薦する

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

ショッピングカートの計算を実現する js メソッド

この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有してい...

Ubuntu 18.04 LTSでIPアドレスを設定するための完全な手順

序文Ubuntu 18.04 LTS で IP アドレスを設定する方法は、これまで使用されていた設定...

Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析

目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...

Linux 環境での Oracle 導入チュートリアル

1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...

MySQL 8.0 アトミック DDL 構文の詳細な説明

目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...

JavaScript データ プロキシとイベントの詳細な分析

目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...

Linux でファイル権限を変更する chmod コマンドの詳細な分析

Linux chmodコマンドを使用して、ターゲット ファイルにアクセス、読み取り、書き込み、または...

CentOS はローカル yum ソースを使用して LAMP 環境を構築するグラフィック チュートリアル

この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...

Dockerはローカルイメージとコンテナの保存場所を設定します

指定したサイズより大きいファイルを検索するには、find コマンドを使用します。 検索 / -typ...

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...