組合模式 -- 拆分了解 · 前端知識 -- 學習整理

>[success] # 組合模式 --拆分了解 ~~~ 1.請求從樹最頂端的對象往下傳遞，如果當前處理請求的對象是葉對象（普通子命令），葉對象自身會對請求作出相應的處理；如果當前處理請求的對象是組合對象（宏命令），組合對象則會遍歷它屬下的子節點，將請求繼續傳遞給這些子節點。 2.如果子節點是葉對象，葉對象自身會處理這個請求，而如果子節點還是組合對象，請求會繼續往下傳遞。葉對象下面不會再有其他子節點，一個葉對象就是樹的這條枝葉的盡頭，組合對象下面可能還會有子節點 3.如圖請求從上到下沿著樹進行傳遞，直到樹的盡頭。作為客戶，只需要關心樹最頂層的組合對象，客戶只需要請求這個組合對象，請求便會沿著樹往下傳遞，依次到達所有的葉對象。 ~~~ >[danger] ##### 總結 ~~~ 1.組合模式實際使用是多態的性質，即同一操作，作用于不同對象產生不同結果，在組合模式來看不同的對象是葉子節點和枝干，他們的相同操作都是'execute'方法但是枝干的'execute' 是循環當前枝干下的所有葉子的'execute',葉子的則是調用自己 ~~~ ~~~ // 利用多態樹枝和葉子都要實現execute const qqCommand = { execute(){ console.log("執行qq"); } } const wxCommand = { execute(){ console.log("執行微信"); } } // 枝干需要實現收集葉子調用每個枝干 const macroCommand = function() { return{ ls:[], // 收集葉子容器 add(command){ // 收集葉子方法 this.ls.push(command) }, execute(){ // 利用多態統一調用 ls.forEach((item)=>{ // 注意這里的item 有兩種情況 // 一種item 是葉子即調用葉子的方法 // 一種是枝干即調用枝干中循環每個枝干中葉子的execute方法 item.execute() }) } } } ~~~ ![](https://img.kancloud.cn/1e/a1/1ea19fd93c552f84abe8f025849bb219_971x350.png) >[danger] ##### 將上圖抽象成代碼來理解 ~~~ 1.將多個'葉子命令' 放入一個枝干中，再將這些枝干放回最后調用方法的主干中，正式因為無論是'葉子命令'還是通過'葉子命令'組成的枝干，他們都實現了同一個方法名才讓他們在調用的時候變得簡單方便.就像下面例子中的'execute' 方法一樣 ~~~ ~~~ <html> <head> <meta charset="utf-8"> </head> <body> <button id="button">按我</button> </body> <script> 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 openAcCommand ={ execute: function(){ console.log( '打開空調' ); } }; // -------- 電視音響在一起所以一起開(組成一個枝干) ------------- var openTvCommand = { execute: function(){ console.log( '打開電視' ); } }; var openSoundCommand = { execute: function(){ console.log( '打開音響' ); } }; // 將打開電視打開音響租組合成一個枝干 var macroCommand1 = MacroCommand(); macroCommand1.add( openTvCommand ); macroCommand1.add( openSoundCommand ); // -------- 打開電腦打開qq 關門 (組成一個枝干) ------------- var closeDoorCommand = { execute: function(){ console.log( '關門' ); } }; var openPcCommand = { execute: function(){ console.log( '開電腦' ); } }; var openQQCommand = { execute: function(){ console.log( '登錄 QQ' ); } }; var macroCommand2 = MacroCommand(); macroCommand2.add( closeDoorCommand ); macroCommand2.add( openPcCommand ); macroCommand2.add( openQQCommand ); /*********現在把所有的枝干放進主枝干中”**********/ var macroCommand = MacroCommand(); macroCommand.add( openAcCommand ); macroCommand.add( macroCommand1 ); macroCommand.add( macroCommand2 ); /*********最后給遙控器綁定“超級命令”**********/ var setCommand = (function( command ){ document.getElementById( 'button' ).onclick = function(){ command.execute(); } })( macroCommand ); </script> </html> ~~~