通常の開発プロセス中、私たちは間違いなくこの状況に遭遇します。単純なオブジェクトと複雑なオブジェクトを同時に処理します。これらの単純なオブジェクトと複雑なオブジェクトは、ツリー構造に結合され、クライアントはそれらを処理するときに一貫性を維持する必要があります。たとえば、電子商取引Webサイトの製品注文の場合、各製品の注文には、オペレーティングシステムのフォルダーなど、複数のサブオーダーの組み合わせがある場合があります。各フォルダーには複数のサブフォルダーまたはファイルがあります。それらをコピー、削除するなど、それがフォルダーであろうとファイルであろうと、それは米国のオペレーターでも同じです。このシナリオでは、コンビネーションモードを使用してそれを達成することが非常に適しています。
基本的な知識
組み合わせモード：オブジェクトをツリー構造に組み合わせて、「部分的な」階層を表します。組み合わせモードを使用すると、ユーザーは個々のオブジェクトと組み合わせオブジェクトの使用を一貫性に導くことができます。
コンビネーションモードには3人の主人公がいます。
（1）要約コンポーネント（コンポーネント）：組み合わせに参加するオブジェクトのパブリックインターフェイスを主に定義する抽象クラス
（2）sub-object（leaf）：組み合わせたオブジェクトを形成する最も基本的なオブジェクト
（3）複合材：子オブジェクトと組み合わされた複雑なオブジェクト
組み合わせパターンを理解するための鍵は、個々のオブジェクトと組み合わせたオブジェクトの組み合わせパターンの一貫性を理解することです。理解を深めるための組み合わせパターンの実装について話しましょう。
コンビネーションモードは、ページにUIを動的に作成するように調整されています。 1つのLife =コマンドのみを使用して、多くのオブジェクトの複雑な操作または再帰操作を初期化できます。コンビネーションモードは2つのポイントを提供します。
（1）オブジェクトのグループを特定のオブジェクトとして扱うことができます。複合オブジェクトは、それを作成するサブオブジェクトと同じ操作を実装します。組み合わせたオブジェクトで特定の操作を実行すると、そのオブジェクトの下のすべてのサブオブジェクトが同じ操作を実行します。したがって、単一のオブジェクトを一連のオブジェクトにシームレスに置き換えるだけでなく、同じものも順番に置き換えることができます。これらの独立したオブジェクトは、いわゆるゆるく結合されています。
（2）組み合わせパターンは、サブオブジェクトのセットをツリー構造に組み合わせ、ツリー全体の横断を可能にします。これにより、内部実装が隠され、サブオブジェクトを何らかの形で整理できます。このオブジェクト（結合オブジェクト）のコードは、内部サブオブジェクトの実装に依存しません。
コンビネーションモードの実装
（1）最も単純なコンビネーションモード
HTMLドキュメントのDOM構造は、自然な樹木構造です。最も基本的な要素はDOMツリーになり、最終的にDOMドキュメントを形成します。組み合わせモードに非常に適しています。
多くの場合、jQueryクラスライブラリを使用します。たとえば、コンビネーションパターンがより頻繁に適用されます。たとえば、次のコードが実装されることがよくあります。
$（ "。test"）。addclass（ "notest"）。remove（ "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 +=（ ' +classname +'）; }} else if（eles instanceof node）{eles.nodetype === 1 &&（eles.className + =（ '' + className + ''））; } else {throw "elesはhtmlノードではありません"; }} addclass（document.getElementById（ "div3"）、 "test"）; addclass（document.queryselectorall（ "。div"）、 "test"）;このコードは、AddClassの実装（当面は互換性と普遍性が考慮されていない）をシミュレートし、最初にノードタイプを判断し、次にさまざまなタイプに従ってクラス名を追加するのは簡単です。 NodeListまたはNodeの場合、クライアントコールは同じ方法でAddClassインターフェイスを使用します。これは、組み合わせモードの最も基本的なアイデアであり、パーツと全体を一貫して使用します。
（2）典型的な例
典型的な例について言及しました。製品注文には複数の製品サブオーダーが含まれており、複数の製品サブオーダーが複雑な製品注文を形成します。 JavaScript言語の特性により、組み合わせパターンの3つの役割を2つの役割に簡素化します。
（1）subobject：この例では、サブオブジェクトは製品サブオーダーです
（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つのクラスを定義します。各クラスには独自の順序作成方法があります。
次に、合計注文クラスを作成します。
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.lents; i <length; i <; i ++） }}このオブジェクトには、注文リスト、注文を追加する方法、および注文を作成する方法の3つの主要メンバーがあります。
クライアントを使用する場合、以下は次のとおりです。
var flight = new FlightOrder（）; flight.create（）; var Orders = new TotalOrders（）; anddordord（new FlightOrder（））; Orders.Addorder（new HotelOrder（））; Orders.Create（）;
クライアントコールは2つの方法を示します。1つは航空券の注文を作成することであり、もう1つは複数の注文を作成することですが、最終的には作成方法を介して作成されます。これは、コンビネーションモードの非常に典型的なアプリケーションシナリオです。
要約します
組み合わせパターンを理解するのは難しくありません。主に、単一のオブジェクトとそれらの使用方法でオブジェクトを組み合わせた一貫性の問題を解決します。これは、オブジェクトに明らかな階層があり、それらを均一に使用したい場合、組み合わせパターンを使用するのに最適です。 Web開発では、この階層は非常に一般的であり、組み合わせパターンの使用に非常に適しています。特にJSの場合、従来のオブジェクト指向の言語形式に固執し、JS言語の特性を柔軟に使用して、部分的および全体的な使用を柔軟に使用する必要はありません。
（1）コンビネーションモードを使用したシナリオ
次の2つの状況に遭遇するときは、コンビネーションモードを使用します
A.特定の階層構造を含むオブジェクトのコレクション（開発プロセス中に特定の構造を決定することはできません）
B.これらのオブジェクトまたはそれらのいくつかでいくつかの操作を実行したい
（2）コンビネーションモードの短所
結合されたオブジェクトの操作は、すべてのサブオブジェクトで同じ操作を呼び出すため、複合構造が大きいとパフォーマンスの問題が発生します。また、HTMLをカプセル化するためにコンビネーションモードを使用する場合、適切なタグを選択する必要があります。たとえば、テーブルはコンビネーションモードでは使用できず、葉のノードは明らかではありません。