デザインパターン:複合材料

複合体はこのシリーズのより簡単なパターンのうちの1つです、しかし、これはそれが人気がないことを意味しません.
実際には、多くの異なるビジネスドメインで表現することができるので、それは最も有用なパターンの一つです.
それで、更なるADOなしで、始めましょう.
今日は学びます.

複合パターン

の構造と理論

複合パターンが

を解決するという問題
それはを提供します

ソリューション

の実装

は、複合パターン

を使用する機会を認識する

複合パターン

の利点と欠点

定義

正式に言えば、複合パターンは、複合材料と個々のオブジェクトを均等に扱うことができます.
しかし、それはどういう意味ですか?
電子商取引サイトで働くとしましょう.

製品-典型的な個々のオブジェクト

ボックス-製品のグループまたは他の箱

視覚的に言えば、以下のようになります.

したがって、複合パターンは、オブジェクトを階層構造に合成し、それから個々のオブジェクトのようなこれらの構造で働くことができます.
別の例を見てみましょう.

問題
あなたが次のspotifyを構築していると想像しましょう.
あなたは何をユーザに提供しますか?
あなたは、最も明らかに音楽を言うでしょう.
しかし、キャッチは、あなたのアプリケーションは、曲やその他のプレイリストのプレイリストを持つことができますです.
問題はどのように我々はコードでこれを表すのですか?
つの方法は単にループし、オブジェクトが曲やプレイリストかどうかチェックすることです.
次のようになります.

function play(object){
    if (object instanceOf Song){
        const song = object
        return song.play()
    }

    playlist = object

    // else it is a playlist
    for(stuff in objects){
        play(stuff)
    } 
}

これは奇妙なように、なぜ私のクライアントは、これが曲やプレイリストかどうかを知る必要がありますか?
あなたのクライアントは知ってはいけません、そして、これは複合パターンが解決する問題です.

解決策
上記のコードを変換する前に、複合パターンのコンポーネントをすばやくやりとりしましょう.

コンポーネント-複合体と葉の両方が共存する一様なインターフェース.

複合物-コンポーネントインターフェースを実装して、葉オブジェクトのリストを持っている我々の「グループ」オブジェクト.

葉-私たちの個々のオブジェクトは、直接コンポーネントインターフェイスを実装します.

複合パターンのコアコンポーネントを知っているので、以前のコードを複合パターンによって遵守するものに変換します.
Step 1 :コンポーネントインタフェースを定義します.

interface SongComponent {
    function play();
    // other uniform functions
}

ステップ2 :リーフクラスを定義します.

class Song implements SongComponent {
    function play(){
        // play the damn song!!
    }
}

ステップ3 :複合クラスを定義します.

class Playlist implements SongComponent {
    songs = []

    constructor(songs){
        this.songs = songs
    }

    function play(){
        for(song in this.objects){
            song.play(stuff)
        } 
    }

    function add(object){
        this.songs[] = object
    }

    function pop(object){
        this.songs.pop()
    }

}

手順4 :コードをテストします

function main(){
  song_one = new Song()
    song_two = new Song()

    playlist_one = new Playlist([song_one, song_two])
    playlist_two = new Playlist([song_one, song_two, playlist_one])


    // we treat of all these equally
    song_one.play()
    song_two.play()
    playlist_one.play()
    playlist_two.play()
}

おめでとう、あなたはちょうど複合パターンを実装しました.
報酬:尊敬+ 10
ps .なぜコンポーネントインターフェイスにadd ()やpop ()のような関数を追加しなかったのかを問い合わせるかもしれません.これは非常に人気のある議論です.あなたのコードが均一であるか、タイプセーフであるならば、それは質問です.私はこの例でタイプセーフを選びました.

いつこのパターンを使用するか?
このパターンはとても簡単です.

あなたのデータを階層的に表現したい.

あなたは、等しく個々の物と複合物を扱いたいです.

利益と欠点
それはすべての日光と虹でありません、しかし、最初に虹の上に行きましょう:

ツリーのような構造でより便利に動作します.

既存のコードを破壊せずに新しい要素型を導入できます.

今すぐ下に来る

機能が大きく異なるクラスへの統一的なインターフェイスを作成するのは難しいです.

結論
あなたがこれまで届いてうれしいです.
今すぐあなたの次または既存のプロジェクトの複合パターンを活用することができます.
あなたがしたならば、あなたがパターンが好きであるならば、下にコメントを残してください.
また、私はツイッターでこれらの記事と他の良いものの小さな断片も発表します
読書ありがとう!

更なる読書
デザインパターンについてもっと知りたいなら、Diving into Design Patterns .それは楽しさと魅力的な方法で、GOFの本で見つかったすべての23のデザインパターンを説明します.
私が推薦するもう一つの本は、楽しくて読みやすい説明がある242479152ドルです.