導入
コンポジットは、オブジェクトをツリー構造に組み合わせて、「部分的な」階層を表します。組み合わせモードにより、ユーザーは個々のオブジェクトと結合されたオブジェクトの使用と一致します。
一般的なシナリオには、ASP.NETの制御メカニズムが含まれます（つまり、コントロールには子どもの制御を含めることができます。これは、子どもの制御を再帰的に動作、追加、削除することができます）。同様に、DOMメカニズムがあります。 DOMノードには、子ノードを含めることができます。親ノードであろうと子ノードであろうと、子ノードを追加、削除、および通過するという共通の機能があります。したがって、組み合わせパターンの鍵は、子要素と親要素の両方を表すことができる抽象クラスを持つことです。
文章
たとえば、さまざまな料理を提供するレストランがあります。各テーブルにはメニューがあります。メニューには、朝食のペストリー、ランチ、ディナーなどを含むレストランがすべての料理がリストされています。各食事にはさまざまなメニューアイテムがあります。メニュー項目とメニュー全体の両方を印刷し、サブ項目を追加できると仮定します。たとえば、昼食に新しい料理を追加でき、コーヒーなどのメニューアイテムに砂糖を追加できます。
この場合、組み合わせを使用して、これらの内容を階層として表すことができます。実装の手順を1つずつ分解しましょう。
最初のステップは、「抽象クラス」関数のmenucomponentを実装することです。
コードコピーは次のとおりです。
var menucomponent = function（）{
};
menucomponent.prototype.getname = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.getDescription = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.getPrice = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.isvegetarian = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.print = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.add = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.remove = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
menucomponent.prototype.getChild = function（）{
新しいエラーをスローします（「この方法は書き直す必要があります！」）;
};
この関数は、価格、名前などの情報を取得するための2種類の方法を提供し、もう1つは印刷、追加、削除、サブメニューの取得などの一般的な操作方法です。
2番目のステップは、基本的な料理を作成することです。
コードコピーは次のとおりです。
var menuitem = function（sname、sdescription、bvegetarian、nprice）{
menucomponent.apply（this）;
this.sname = sname;
this.sdescription = sdescription;
this.bvegetarian = bvegetarian;
this.nprice = nprice;
};
menuitem.prototype = new menucomponent（）;
menuitem.prototype.getName = function（）{
this.snameを返します。
};
menuitem.prototype.getDescription = function（）{
this.sdescriptionを返します。
};
menuitem.prototype.getPrice = function（）{
this.npriceを返します。
};
menuitem.prototype.isvegetarian = function（）{
this.bvegetarianを返します。
};
menuitem.prototype.print = function（）{
console.log（this.getName（） + "：" + this.getDescription（） + "、" + this.getPrice（） + "Euros"）;
};
コードからわかるように、情報と印刷方法を取得するための4つの方法のみを再起動し、基本的な料理にはサブディッシュを追加、削除、取得する方法が含まれていないため、他の3つの操作方法に過負荷になりませんでした。
ステップ3：料理を作成します。
コードコピーは次のとおりです。
var menu = function（sname、sdescription）{
menucomponent.apply（this）;
this.amenucomponents = [];
this.sname = sname;
this.sdescription = sdescription;
this.createiterator = function（）{
新しいエラーをスローします（「この方法は上書きする必要があります！」）;
};
};
menu.prototype = new Menucomponent（）;
menu.prototype.add = function（omenucomponent）{
//代替品を追加します
this.amenucomponents.push（omenucomponent）;
};
menu.prototype.remove = function（omenucomponent）{
//代替品を削除します
var amenuitems = [];
var nmenuitem = 0;
var nlenmenuitems = this.amenucomponents.length;
var oitem = null;
for（; nmenuitem <nlenmenuitems;）{
oitem = this.amenucomponents [nmenuitem];
if（oitem！== omenucomponent）{
amenuitems.push（oitem）;
}
nmenuitem = nmenuitem + 1;
}
this.amenucomponents = amenuitems;
};
menu.prototype.getChild = function（nindex）{
//指定された代替品を取得します
this.amenucomponents [nindex];
};
menu.prototype.getName = function（）{
this.snameを返します。
};
menu.prototype.getDescription = function（）{
this.sdescriptionを返します。
};
menu.prototype.print = function（）{
//現在の皿とすべてのサブディッシュを印刷します
console.log（this.getName（） + "：" + this.getDescription（））;
console.log（ "----------------------------------------"）;
var nmenucomponent = 0;
var nlenmenucomponents = this.amenucomponents.length;
var omenucomponent = null;
for（; nmenucomponent <nlenmenucomponents;）{
Omenucomponent = this.amenucomponents [nmenucomponent];
Omenucomponent.print（）;
nmenucomponent = nmenucomponent + 1;
}
};
印刷方法は、追加、削除、および取得の方法を実装することに加えて、最初に現在の皿情報を印刷し、次にすべてのサブディッシュ情報の印刷をループすることに注意してください。
ステップ4：指定された皿を作成します。
ディナー、コーヒー、ペストリーなどのいくつかの本物の料理を作成できます。これらはすべてメニューをプロトタイプとして使用し、コードは次のとおりです。
コードコピーは次のとおりです。
var Dinnermenu = function（）{
menu.apply（this）;
};
diendmenu.prototype = new Menu（）;
var cafemenu = function（）{
menu.apply（this）;
};
cafemenu.prototype = new Menu（）;
var pancakehousemenu = function（）{
menu.apply（this）;
};
pancakehousemenu.prototype = new Menu（）;
ステップ5：トップメニューコンテナを作成 - メニューブック：
コードコピーは次のとおりです。
var mattress = function（amenus）{
this.amenus = amenus;
};
mattrestress.prototype.printmenu = function（）{
this.amenus.print（）;
};
この関数は、メニューアレイをパラメーターとして採用し、値はすべてのメニューコンテンツを印刷するためのprintMenuメソッドを提供します。
ステップ6、コールメソッド：
コードコピーは次のとおりです。
var opancakehousemenu = new Menu（ "Pancake House Menu"、 "Breakfast"）;
var odinnermenu = newメニュー（ "ディナーメニュー"、「ランチ」）;
var ocoffeemenu = new Menu（ "Cafe Menu"、 "ディナー"）;
var oallmenus = new Menu（ "すべてメニュー"、 "すべてのメニューを組み合わせた"）;
oallmenus.add（opancakehousemenu）;
oallmenus.add（odinnermenu）;
odinnermenu.add（new Menuitem（ "Pasta"、 "Spaghetti with Marinara Sauce、Sourdough Bread"、True、3.89））;
odinnermenu.add（ocoffeemenu）;
ocoffeemenu.add（new Menuitem（ "Express"、 "Machine from Machine、false、0.99））;
var omattress = new Mattress（oallmenus）;
console.log（ "-----------------------------------------------"）;
omattrestress.printmenu（）;
console.log（ "-----------------------------------------------"）;
ASP.NETコントロール開発に精通している学生はおなじみに見えますか？
要約します
コンビネーションモードの使用シナリオは非常に明確です。
オブジェクトの部分を表したい場合 - 全体的な階層。
ユーザーに、組み合わせたオブジェクトと単一のオブジェクトの違いを無視してもらい、ユーザーは統合構造内のすべてのオブジェクトを均一に使用します（方法）
さらに、このパターンはデコレータでよく使用されます。通常、共通の親クラス（つまり、プロトタイプ）があるため、装飾はADD、削除、およびGetChildの操作を使用してコンポーネントインターフェイスをサポートする必要があります。