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