JavaScript デザインパターン開発における組み合わせパターンの使用に関するチュートリアル (上級)

結合モードはツリー構造として理解できるため、多数のオブジェクト、特に明確な階層を持つオブジェクトを操作するのに適しています。so の開発で結合モードを使用するチュートリアルを見てみましょう。オブジェクト指向JavaScriptのデザインパターン

us 通常の開発プロセスでは、単純なオブジェクトと単純なオブジェクトから構成される複雑なオブジェクトを同時に処理するという状況に遭遇します。これらの単純なオブジェクトと複雑なオブジェクトは、1つのオブジェクトに結合されます。ツリー構造であり、クライアントがセックスを処理するときに一貫性がなければなりません。たとえば、電子商取引 Web サイトでの製品の注文の場合、各製品の注文には複数のサブ注文の組み合わせが含まれる場合があります。たとえば、各フォルダーには複数のサブフォルダーまたはファイルがあり、ユーザーはコピーや削除などを行うことができます。 . 操作するとき、それがフォルダーであってもファイルであっても、それは私たちオペレーターにとっても同じです。このシナリオでは、組み合わせモードの使用が非常に適しています。

基礎知識

合成モード: オブジェクトをツリー構造に結合して「部分-全体」階層を表す結合モードでは、ユーザーは単一のオブジェクトと結合されたオブジェクトを一貫して使用できます。
組み合わせパターンには主に3つの役割があります:
(1) 抽象コンポーネント(Component): 主に組み合わせに参加するオブジェクトのパブリックインターフェースを定義する抽象クラス
(2) サブオブジェクト(Leaf): 最も基本的なオブジェクト結合されたオブジェクトを構成します
( 3) 複合オブジェクト (Composite): サブオブジェクトで構成される複合オブジェクト
結合モードを理解するための鍵は、結合モードにおける単一オブジェクトと結合されたオブジェクトの使用の一貫性を理解することです。理解を深めるために、組み合わせモードの実装について話します。
組み合わせモードは、ページ上に UI を動的に作成するためにカスタマイズされています。 life= コマンドを 1 つだけ使用して、多くのオブジェクトの複雑な操作や再帰的な操作を初期化できます。
(1) 組み合わせが可能です。オブジェクトのグループは、特定のオブジェクトとして扱われます。複合オブジェクト (複合オブジェクト) は、その複合オブジェクトに対して特定の操作を実行すると、そのオブジェクトの下にあるすべてのサブオブジェクトが実行されます。したがって、単一のオブジェクトを一連のオブジェクトにシームレスに置き換えるだけでなく、その逆も同様です。 (2) 結合モードは、一連のサブオブジェクトを結合します。これにより、内部実装が非表示になり、このオブジェクト (複合オブジェクト) 内のコードは内部サブオブジェクトの実装に依存しなくなります。

合成パターンの実装

(1) 最も単純な結合モード

HTMLドキュメントのDOM構造は、自然なツリー構造となり、最終的にDOMドキュメントを形成します。 、これは組み合わせモードに非常に適しています。

一般的に使用される jQuery クラス ライブラリでは、組み合わせモードがさらに頻繁に使用されます。たとえば、次のコードが実装されることがよくあります:

$(".test").addClass("noTest").remove("test");

この単純なコードは、クラスに test が含まれる要素を取得し、addClass と RemoveClass を実行します。処理は、$ (".test") が 1 つの要素であるか複数の要素であるかに関係なく、最終的には統合された addClass インターフェイスおよび removeClass インターフェイスを通じて呼び出されます。

addClass の実装を単純にシミュレートしてみましょう:

var addClass = function (eles, className) {
  if (eles instanceof NodeList) {
    for (var i = 0, length = eles.length; i < length; i++) {
      eles[i].nodeType === 1 && (eles[i].className += (&#39; &#39; + className + &#39; &#39;));
    }
  }
  else if (eles instanceof Node) {
    eles.nodeType === 1 && (eles.className += (&#39; &#39; + className + &#39; &#39;));
  }
  else {
    throw "eles is not a html node";
  }
}
addClass(document.getElementById("p3"), "test");
addClass(document.querySelectorAll(".p"), "test");

このコードは単純に addClass の実装をシミュレートします (当面は互換性と汎用性は考慮していません)。最初にノードのタイプを決定し、次にさまざまなタイプに応じて className を追加します。 NodeList または Node の場合、クライアント呼び出しはすべて addClass インターフェイスを使用し、部分と全体の使用を一貫させます。これは組み合わせモードの最も基本的な考え方です。

(2) 典型的な例

先ほど典型的な例を挙げました。製品オーダーには複数の製品サブオーダーが含まれており、複数の製品サブオーダーが複雑な製品オーダーを形成します。 Javascript 言語の特性により、組み合わせパターンの 3 つの役割を 2 つの役割に簡略化します:

(1) サブオブジェクト: この例では、サブオブジェクトは製品のサブオーダーです
(2) 組み合わせオブジェクト: これは、商品注文の合計数です。
航空券とホテルという 2 つのサブ商品を含む旅行商品 Web サイトを開発するとします。サブオブジェクトを次のように定義します。

function FlightOrder() { }
FlightOrder.prototyp.create = function () {
  console.log("flight order created");
}
function HotelOrder() { }
HotelOrder.prototype.create = function () {
  console.log("hotel order created");
}

上記のコードは、2 つのクラスを定義します: air。チケット注文クラスとホテル注文クラス、各クラスには独自の注文作成メソッドがあります。

次に、合計注文クラスを作成します:

function TotalOrders() {
  this.orderList = [];
}
TotalOrders.prototype.addOrder = function (order) {
  this.orderList.push(order);
}
TotalOrders.prototype.create = function (order) {
  for (var i = 0, length = this.orderList.length; i < length; i++) {
    this.orderList[i].create();
  }
}

このオブジェクトには主に、注文リスト、注文を追加するメソッド、注文を作成するメソッドの 3 つのメンバーがあります。

クライアント側で使用すると、次のようになります:

var flight = new FlightOrder();
flight.create();

var orders = new TotalOrders();
orders.addOrder(new FlightOrder());
orders.addOrder(new HotelOrder());
orders.create();

クライアント呼び出しは 2 つの方法を示します。1 つは単一のチケット注文を作成する方法、もう 1 つは複数の注文を作成する方法ですが、最終的にはすべてcreate メソッド。これは、組み合わせモードの非常に典型的なアプリケーション シナリオです。

概要 組み合わせパターンを理解するのは難しくありません。主に、単一オブジェクトと組み合わせたオブジェクトの使用における一貫性の問題を解決します。オブジェクトに明確な階層構造があり、それらを均一に操作したい場合、これは複合パターンの使用に適した候補です。 Web 開発では、この種の階層構造は非常に一般的であり、特に JS の組み合わせモードの使用に非常に適しています。従来のオブジェクト指向言語の形式や JS の特性にこだわる必要はありません。言語を柔軟に使用して、部分的および全体的な使用の一貫性を実現できます。
(1) 結合モードを使用するシナリオ 以下の 2 つの状況が発生した場合にのみ結合モードを使用してください
A. 特定の階層構造を含むオブジェクトのコレクション (開発プロセス中に特定の構造を決定できない)
B.これらのオブジェクトまたはその一部は、何らかの操作を実行します
(2) 結合パターンの欠点 結合されたオブジェクトに対する操作はすべてのサブオブジェクトに対して同じ操作を呼び出すため、結合された構造が次のとおりである場合、パフォーマンスの問題が発生します。大きな質問。もう 1 つは、複合モードを使用して HTML をカプセル化するときに適切なタグを選択することです。たとえば、テーブルは複合モードでは使用できず、リーフ ノードは明確ではありません。これが皆さんの参考になれば幸いです。未来のみんな。

関連記事:

JavaScript開発におけるデザインパターンへのファサード外観パターンの適用(上級)

JavaScriptのデザインパターンにおけるアダプターパターンの実装方法の詳細な解釈(グラフィックチュートリアル)

JavaScriptデザインパターンプログラミングにおけるAdapterアダプタパターンの適用の概要(グラフィックチュートリアル)

以上がJavaScript デザインパターン開発における組み合わせパターンの使用に関するチュートリアル (上級)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。