JavaScript Design patterns and development practices reading notes (10)--Combined mode

Composition Mode : Some child objects form a parent object, and the child object itself may be composed of some grandchild objects.

A bit like the meaning of a tree structure, here is an example containing a command pattern

1 varlist=function(){//functions for creating interface Objects2     return {3 arr:[],//Execute list to store objects that need to be executed4Addfunction(obj) {//To add objects to the execution list5              This. Arr.push (obj); 6         },7Executefunction() {//Traverse execution list, each object performs a well-defined interface method8              for(varI=0,l= This. arr.length;i<l;i++){9                  This. Arr[i].execute ();Ten             } One         } A     } - }; -  the varmenubar={//A series of objects, each with an identical interface for easy invocation -Executefunction(){ -Console.log ("Refresh menubar") -     } + } -  + varHeadbar={ AExecutefunction(){ atConsole.log ("Refresh Headbar") -     } - } -  - varFootbar={ -Executefunction(){ inConsole.log ("Refresh Footbar") -     } to } +  - varMove={ theExecutefunction(){ *Console.log ("Add animation") $     }Panax Notoginseng } -  the varPica={ +Executefunction(){ AConsole.log ("Remove Pica") the     } + } -  $ varpicb={ $Executefunction(){ -Console.log ("Remove PICB") -     } the } - Wuyi  the varRefresh=list ();//the interface object responsible for flushing -Refresh.add (menubar);//add objects that need to be refreshed Wu Refresh.add (headbar); - Refresh.add (footbar); About  $  - varRemove=list ();//interface object that is responsible for removal -Remove.add (PicA);//objects that need to be removed - Remove.add (PICB); A  + varStart=list ();//the interface object that is responsible for all things theStart.add (refresh);//Add a composite object responsible for refresh -Start.add (move);//add an object that is responsible for the animation $Start.add (remove);//Add a composite object that is responsible for removal the  theStart.execute ();//execute this Combined object the  the /** * * * Results -  in Refresh MenuBar the Refresh Headbar the Refresh Footbar About Add animation the Remove Pica the Remove PICB the */

Feel a bit like a Russian set of baby, first defined an interface object, everyone is this interface object, but a layer of layers, constantly called.

The execution process is actually a depth-first search .

some notable places to watch

The combined pattern is not a parent-child relationship, but rather a delegate relationship.
Scenario: The combination mode is only appropriate when dealing with each leaf object in the list in a consistent manner.

Summary

Combining patterns allows us to create the structure of objects in a tree-like way, and we can apply the same actions to both grouped objects and individual objects.

JavaScript Design patterns and development practices reading notes (10)--Combined mode