JavaScriptデザインパターン構成パターン分析_jsオブジェクト指向

どう言えばいいでしょうか？ ！動物（結合体）と同じように、子孫（葉っぱのオブジェクト）を産むと、その子孫にはある機能（例：穴を掘る、耳が聞こえるなど）が生まれます。ルート (複合オブジェクト) があり、その後、ツリーから外側に伸びる他の枝 (複合オブジェクト) と、それらの枝から外側に伸びる葉 (リーフ オブジェクト) があります。言い換えれば、祖先がすでに存在する場合、この祖先から派生した他の子（この祖先の下に結合された他のオブジェクトを含む）がすでに特定の機能を持っている限り、それは継承に似ています。 「合成パターン」では、合成オブジェクトの階層にリーフオブジェクトと合成オブジェクトの2種類のオブジェクトがあります。組み合わせたパターンは、多数のオブジェクトを操作するのに適しています。
「合成モード」とは、プロジェクトで作業するときに、プロジェクトに表示されるすべてのメソッドを合成オブジェクト (リーフ オブジェクトのメソッドを含む) で定義する必要があり、それらのリーフ オブジェクトが合成オブジェクトを継承することを意味します。複合オブジェクトがインスタンス化されると、それに応じてそのリーフ オブジェクトのメソッドもインスタンス化されます。私が言ったことは少しわかりにくいかもしれませんので、例を使って説明しましょう。
「コンポジションモード」は、ウェブ上で動的なユーザーインターフェイスを作成するために調整されたモードです。このパターンを使用すると、単一のコマンドで複数のオブジェクトに対して複雑な動作または再帰的な動作をトリガーできます。
「結合モード」を使用すると、次の 2 つの大きな利点が得られます。
1. オブジェクトのコレクションと特定のサブオブジェクトを同じ方法で処理できます。
2. サブオブジェクトのバッチをツリー構造に編成するために使用でき、ツリー全体を走査できます。
結合モードは、次の 2 つの条件が同時に満たされる場合にのみ適しています:
1. 特定の階層システムに編成されたオブジェクトのバッチがある (開発中に特定の構造が不明な場合があります)。
2. このオブジェクトのバッチまたはその一部に対して操作を実行したいと考えています。
例を見てみましょう:
具体的な要件は、フォト ギャラリーを作成し、フォト ギャラリーの特定の部分を選択的に非表示または表示できるようにすることです。これは、単一の画像または画像のギャラリーである場合があります。この関数を完了するには、画像ライブラリとして使用される複合オブジェクト クラスと、画像自体に使用されるリーフ オブジェクト クラスの 2 つのクラスが必要です。コードは次のとおりです。
上記のコードで、最初に定義されているのは、複合オブジェクト クラスとリーフ オブジェクト クラスが実装する必要があるインターフェイス。ビジョンとペニーの従来の組み合わせに加えて、このタイプの操作には非表示と表示のみが含まれます。次に、葉オブジェクトを定義します。リーフ オブジェクトは非表示と表示を実装します。 コードは次のとおりです。

コードをコピーします。 コードは次のとおりです。

var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // 複合オブジェクト Composite に必要なメソッドを確認します
var GalleryItem = new Interface( 'GalleryItem', ['hide', 'show']); // 結合されたオブジェクト GalleryItem が持つべきメソッドを確認します
// DynamicGallery クラス
var DynamicGallery = function(id){ // 実装します複合、GalleryItem の組み合わせ オブジェクト クラス
this.children = [];

this.element = document.createElement('div');
this.element.id = id; .element.className = 'dynamic-gallery';
}
DynamicGallery.prototype = {
// Composite 複合オブジェクト インターフェイスを実装します
add: function(child){
Interface.ensureImplements (child, Composite, DynamicGallery);
this.children.push(child);
},
削除 : function(child); {
for (var node, i = 0; node = this.getChild(i); i ){



},
// DynamicGallery 複合オブジェクトを実装しますインターフェース
隠す : function(){
} for(var ノード, i = 0; ノード = this.getChild(i); i ){
ノード.hide(); 🎜> for(var ノード, i = 0; ノード = getChild(i); i ){
ノード.show();
}
},
// ヘルパー メソッド
getElement : function(){
return this.element;
}
}


リーフ オブジェクトを設定するための対応するメソッドは次のとおりです:




コードをコピー


コードは次のとおりです:


// GalleryImage クラス
var GalleryImage = function(src){ メソッドを実装しますComposite と GalleryItem の組み合わせオブジェクトで定義されています

this.element = document.createElement('img');
this.element.className = 'gallery-image';
this.element.src = src;

} GalleryImage.prototype = { // 複合インターフェイスを実装します // これらはリーフ ノードなので、これらのメソッドを実装する必要はなく、定義するだけで十分です add : function(){}, Remove : function(){},

getChild : function(){},

// GalleryItem インターフェースを実装
Hide : function(){
this.element.style.display = 'none';
},
show : function(){
this.element.style.display = ''; > // ヘルパー メソッド
getElement: function(){
return this.element
}
}


これは、複合モードがどのように機能するかを示す例です。各クラスは非常に単純ですが、このような階層のおかげで、いくつかの複雑な操作を実行できます。 GalleryImage クラスのコンストラクターは、画像要素を作成します。クラス定義の残りの部分は、空の複合オブジェクト メソッド (これはリーフ ノードであるため) と、GalleryItem に必要な操作で構成されます。これで、これら 2 つのクラスを使用して画像を管理できるようになります:

コードをコピー コードは次のとおりです:

var topGallery = new DynamicGallery('top-gallery');
topGallery.add(new GalleryImage('/img/image-1.jpg'));
topGallery.add(new GalleryImage('/) img/image-2.jpg'));
topGallery.add(new GalleryImage('/img/image-3.jpg'));
var valleyPhotos = new DyamicGallery('vacation-photos');
for(var i = 0, i valleyPhotos.add(new GalleryImage('/img/vac/image-' i '.jpg'));
}
topGallery.add(vacationPhotos);
topGallery.show();
vacationPhotos.hide();

組み合わせモードを使用すると、簡単な操作も可能です複雑な結果を生成します。配列やその他のデータ構造を手動で走査するグルー コードを記述する代わりに、最上位のオブジェクトに対して操作を実行し、その操作を各子オブジェクト自体に渡すだけで済みます。これは、繰り返し実行される操作に特に役立ちます。 Composite パターンでは、個々のオブジェクト間の結合は非常に緩やかです。最上位の複合オブジェクトに対して操作が実行されるたびに、ノードを見つけるために構造全体にわたって Try-First 検索が実行されます。
複合モードの欠点は、この階層が大きい場合、複合モードで呼び出される操作がすべてのサブオブジェクトに対して実行されることです。