意味
名前が示すように、組み合わせとは、複数のコンポーネントを含むオブジェクトを持つ単一のエンティティを作成することを指します。この単一のエンティティは、これらすべてのコンポーネントのアクセスポイントとして機能します。これにより、操作が大幅に簡素化されますが、組み合わせに含まれるコンポーネントの数を明確に示す暗黙の方法がないため、非常に欺cept的になります。
組み合わせモードの目標は、クライアントプログラムがすべての子供要素を均等に扱うように、複雑な要素の内部アーキテクチャからクライアントプログラムを切り離すことです。
各子供ノードは複雑な存在を作ることができます。親ノードの場合、子ノードの複雑さを知ることも、子ノードの複雑さを実装する必要はありません。子ノードを使用できるように、子ノードの特定の方法に注意を払う必要があります。父と息子の関係を簡素化します。
子ノードにも同じことが言えます。過度のインターフェースへの曝露は乱用であることがあり、外部要因への依存も減少します。
例
幻想の組み合わせを使用する方が良いでしょう。次の画像では、2つの異なるタイプのオブジェクトを見ることができます。コンテナとライブラリは組み合わせで、画像はブレードです。組み合わせは子供を運ぶことができますが、通常、より多くの行動を実行することはできません。ブレードには行動の大部分が含まれていますが、少なくとも従来の組み合わせの例では子供を運ぶことはできません。
この例では、コンビネーションパターンの例として画像ライブラリを作成します。アルバム、ライブラリ、画像の3つのレベルしかありません。アルバムとライブラリは組み合わされ、上の画像に示すように、画像はブレードです。これは、組み合わせ自体が必要とするよりも明示的な構造ですが、この例では、これらのレベルを組み合わせまたはブレードのみに制限することは理にかなっています。標準的な組み合わせは、どの構造レベルがブレードを持つことができるかを制限したり、ブレードの数を制限したりすることはありません。
開始するには、まずアルバムやライブラリのギャラリーコロジット「クラス」を作成する必要があります。 jqueryを使用してDOM操作を実行してプロセスを簡素化することに注意してください。
var gallerycomposite = function（heading、id）{this.children = []; this.element = $（ '<div id = "' + id + '"> </div>'）.append（ '<h2>' + heading + '</h2>'）;} gallerycomposite.prototype = {add：function（child）{this.children.push（child）; this.element.append（child.getElement（））; }、削除：function（child）{for（var node、i = 0; node = this.getChild（i）; i ++）{if（node == child）{this.children.splice（i、1）; this.element.detach（child.getElement（））; trueを返します。 } if（node.remove（child））{return true; }} falseを返します。 }、getChild：function（i）{return this.children [i]; }、非表示：function（）{for（var node、i = 0; node = this.getChild（i）; i ++）{node.hide（）; } this.element.hide（0）; }、show：function（）{for（var node、i = 0; node = this.getChild（i）; i ++）{node.show（）; } this.element.show（0）; }、getElement：function（）{return this.element; }}この場所は少し難しいです、もっと説明してもらえますか？ ADD、削除、GetChildの両方のメソッドの両方を使用して、この組み合わせを構築します。この例では、実際にはremodとgetChildを使用していませんが、動的な組み合わせを作成するのに非常に役立ちます。 domを操作するために、非表示、表示、および獲得方法が使用されます。この組み合わせは、ライブラリの表現としてページ上のユーザーに提示されることを目的としています。この組み合わせは、非表示と表示を通じてこれらのライブラリ要素を制御できます。アルバムでHideを呼び出すと、アルバム全体が消えます。または、その画像のみが消えるように、単一の画像でそれを呼び出すこともできます。
次に、ギャラリイメージクラスを作成します。 GalleryCompositeとまったく同じ方法を使用することに注意してください。言い換えれば、画像がブレードであることを除いて同じインターフェイスを実装するため、子供がいないかのように、子育ての方法で実際にアクションは実行されません。組み合わせ要素は、それ自体が追加される別の組み合わせ要素かブレードかを知ることができないため、コンビネーションを同じインターフェイスで実行する必要があります。
var GalleryImage = function（src、id）{this.children = []; this.element = $（ '<img />'）.attr（ 'id'、id）.attr（ 'src'、src）;} galleryimage.prototype = {//これらのメソッドはこれらの方法を使用しないため、//は// // }、非表示：function（）{this.element.hide（0）; }、show：function（）{this.element.show（0）; }、getElement：function（）{return this.element; }}オブジェクトプロトタイプを作成したことを考えると、これで使用できるようになりました。下から、実際に画像ライブラリを構築するためのコードを見ることができます。
var containter = new GalleryComposite（ ''、 'Allgalleries'）; var Gallery1 = new GalleryComposite（ 'Gallery 1'、 'Galleries1'）; var Gallery2 = new GalleryComposite（ 'Gallery 2'、 'Gallery2'）; var image1 = new GalleryImage（ 'img1'） GalleryImage（ 'image2.jpg' '、' img2 '）; var image3 = new Galleryimage（' image3.jpg '、' img3 '）; var image4 = new GalleryImage（' image4.jpg '、 'img4'）; gallery1.add（image1）; gallery1.add（image2）; gallery2.add（image3）; gallery2.add（image4）; container.add（gallery1）; container.add（gallery2）; //ボディに上部コンテナを追加してください。 up.container.getElement（）。appendto（ 'body'）; container.show（）;
コンビネーションモードの利点：
単純な操作は、複雑な結果をもたらすこともあります。トップレベルのオブジェクトで操作を実行し、各子供オブジェクトがこの操作を単独で通過させるだけです。これは、繰り返される操作に特に役立ちます。
組み合わせモードでは、個々のオブジェクト間の結合は非常に緩いです。彼らが同じインターフェイスを実装する限り、彼らの位置を変更したり、交換するのは少しだけの助けです。コードの再利用を促進し、コードの再構成も助長します。
トップレベルの組み合わせオブジェクトで操作が実行されるときはいつでも、実際にはノードを見つけるための構造全体の深い検索であり、組み合わせたオブジェクトを作成したプログラマーはこれらの詳細を知らない。この階層でノードを追加、削除、および見つけるのは非常に簡単です。
コンビネーションモードの短所：
組み合わせたオブジェクトの使いやすさは、サポートするすべての操作のコストをマスクする場合があります。結合されたオブジェクトによって呼び出される操作は、すべてのサブオブジェクトに渡されるためです。この階層が大きい場合、システムのパフォーマンスが影響を受けます。コンビネーションモードの通常の操作には、何らかの形のインターフェイスが必要です。
オブジェクトとノードクラスを組み合わせると、HTML要素のラッピングツールとして使用される場合、組み合わせたオブジェクトはHTML使用規則に準拠する必要があります。たとえば、テーブルを組み合わせたオブジェクトに変換することは困難です。
インターフェイス検査が厳しくなるほど、合計オブジェクトクラスがより信頼性が高くなります。