>[success] # 設計模式 --組合模式（菜鳥教程中組合模式總結） ~~~ 1.定義：將對象組合成樹形結構以表示"部分-整體"的層次結構。組合模式使得用戶對單個對象和組合 對象的使用具有一致性。(理解成將對象關系變成'創建了對象組的樹形結構') 2.主要解決：樹型結構的問題中，模糊了簡單元素和復雜元素的概念，客戶程序可以像處理簡 單元素一樣來處理復雜元素，從而使得客戶程序與復雜元素的內部結構解耦。 3.何時使用： 3.1、您想表示對象的部分-整體層次結構（樹形結構）。 3.2、您希望用戶忽略組合對象與單個對象的不同，用戶將統一地使用組合結構中的所有對象。 4.如何解決：樹枝和葉子實現統一接口，樹枝內部組合該接口 5.關鍵代碼： 5.1.Component抽象構件角色 定義參加組合對象的共有方法和屬性，可以定義一些默認的行為或屬性。 5.2.Leaf葉子構件 Leaf葉子構件葉子對象，其下再也沒有其他的分支，也就是遍歷的最小單位。 5.3.Composite樹枝構件 樹枝對象，它的作用是組合樹枝節點和葉子節點形成一個樹形結構。組合模式的重點就在樹枝構件。 ~~~ * 解釋 ~~~ 1.組合模式： 簡單的來說就是對樹形結果的拆分，組合的過程，將樹形結果的'葉子','枝干'，這些抽象成類，然后 組合成樹 ~~~ >[danger] ##### 優缺點 * 優點 ~~~ 1、高層模塊調用簡單。 2、節點自由增加。 ~~~ * 缺點 ~~~ 1、在使用組合模式時，其葉子和樹枝的聲明都是實現類，而不是接口，違反了依賴倒置原則。 ~~~ >[danger]使用場景 ~~~ 1.部分、整體場景，如樹形菜單，文件、文件夾的管理。 ~~~ >[success] # js -- 組合模式 ~~~ 1.組合模式將對象組合成樹形結構，以表示'部分-整體'的層次結構。 除了用來表示樹形結 構之外， 組合模式的另一個好處是通過對象的多態性表現，使得用戶對單個對象和組合對象的使 用具有一致性。 我的理解'就是讓對象之間形成樹的結構模型，是一種結構型，將類設計成樹的結構模型' ~~~ >[danger] ##### 書中的案例通過宏命令認識組合模式 * 下面案例書中給抽象化成圖的效果  ~~~ 1.'marcoCommand' 被稱為'組合對象'， 'closeDoorCommand'、'openPcCommand'、'openQQCommand'都是'葉對象'。 在 'macroCommand' 的 'execute' 方法里，并不執行真正的操作，而是'遍歷它所包含的葉對象'， 把真正的 execute '請求委托給這些葉對象' 2.組合模式（'將對象用表示樹形結構'）書里的形容： 2.1.下面的例子，我們很容易找到組合模式的一個優點：提供了一 種遍歷樹形結構的方案， 通過調用組合對象的 'execute' 方法，程序會遞歸調用組合對象下 面的葉對象的 'execute' 方法， 所以我們的萬能遙控器只需要'一次操作'，便能依次完成關門、 打開電腦、登錄 QQ 這幾件事情。 組合模式可以非常方便地描述'對象部分-整體層次結構'。 2.2.利用對象多態性統一'對待組合對象'和'單個對象'。利用對象的'多態性'表現，可以使客戶端 忽略'組合對象'和'單個對象'的不同。在組合模式中，客戶將統一地使用組合結構中的所有 對象， 而不需要關心它究竟是組合對象還是單個對象。 2.3.這在實際開發中會給客戶帶來相當大的便利性，當我們往萬能遙控器里面添加一個命令的時 候， 并不關心這個命令是宏命令還是普通子命令。這點對于我們不重要，我們只需要確定它是一 個命令， 并且這個命令擁有可執行的 execute 方法，那么這個命令就可以被添加進萬能遙控器。 2.4.當宏命令和普通子命令接收到執行 execute 方法的請求時，宏命令和普通子命令都會做它們 各自認為 正確的事情。這些差異是隱藏在客戶背后的，在客戶看來，這種透明性可以讓我們非常 自由地擴展這 個萬能遙控器。 3.下面'MacroCommand' 調用者 乍一看和 觀察者好像，雖然二者都是集中保存， 在統一調用，但別忘了觀察者是會在統一調用的位置下發要傳遞通知的參數， 這里僅僅是調用 ~~~ ~~~ // 指令 var closeDoorCommand = { execute:function () { console.log('關門') } } var openPcCommand = { execute:function () { console.log('打開電腦') } } var openQQCommand = { execute:function () { console.log('打開QQ') } } // 調用者 var MacroCommand = function () { return{ commandsList:[], add:function (command) { this.commandsList.push(command) }, execute:function () { for(var i=0,command;command=this.commandsList[i++];){ command.execute() } } } } var macroCommand = MacroCommand() macroCommand.add(closeDoorCommand) macroCommand.add(openPcCommand) macroCommand.add(openQQCommand) macroCommand.execute() ~~~