Analysis of combined JavaScript Design Patterns

What should I do ?! Like an animal (composite object), when it gives birth to a descendant (leaf object), its descendant has a certain function (such as digging holes and hearing well ); it is also like a tree, which has a root (composite object) and then other branches (composite object) popped out from the tree) and the leaves (leaf objects) from these branches to the Foreign Minister ). In other words, when the ancestor already exists, as long as other children derived from this ancestor (including other composite objects under this ancestor) already have some function, it seems like inheritance. There are two types of objects in the hierarchy of composite objects: leaf objects and composite objects. The combination mode is good at operating a large number of objects.
The "combination mode" means that when creating a project, we need to define all the methods that will appear in this project in the combination object (including the methods in the leaf object ), and their leaf objects will inherit the composite objects. After a composite object is instantiated, its leaf object method is also instantiated accordingly. I may be confused. Here is an example.
"Combination Mode" is a mode tailored to create dynamic Web user interfaces. In this mode, you can use a single command to stimulate complex or recursive behavior on multiple objects.
Using the "Combination Mode" brings us two benefits:
1. The object set and its specific sub-objects can be processed in the same way.
2. It can be used to organize a batch of sub-objects into a tree structure and make the entire tree be traversed.
The combination mode is applicable only when both of the following conditions are met:
1. There are a batch of objects organized into a certain level system (the specific structure may not be known during development ).
2. You want to perform an operation on these objects or some of them.
The following is an example:
The specific requirement is to create a picture library and selectively hide or display a specific part of the image library. This may be a separate image or a picture library. Now we need two classes to complete this function: the composite object class for image libraries and the leaf object class for the image itself, Code As follows:
In the code above, we first define the interfaces to be implemented by combining object classes and leaf object classes. In addition to the conventional portfolio prospects, these classes only include hide and show to be afraid of being soft. Next we will define the leaf object. The code for implementing hide and show on the leaf object is as follows: Copy code Code: var composite = new interface ('composite ', ['add', 'delete', 'getchild']); // check the methods that composite should have.
VaR galleryitem = new interface ('galleryitem', ['hide ', 'show']); // check the methods that the combination object galleryitem should have
// Dynamicgallery class
VaR dynamicgallery = function (ID) {// implement composite and galleryitem combination object class
This. Children = [];

This. Element = Document. createelement ('div ');
This. element. ID = ID;
This. element. classname = 'dynamic-gallery ';
}
Dynamicgallery. Prototype = {
// Implement the composite combination object interface
Add: function (child ){
Interface. ensureimplements (child, composite, dynamicgallery );
This. Children. Push (child );
This. element. appendchild (child. getelement ());
},
Remove: function (child ){
For (VAR node, I = 0; node = This. getchild (I); I ++ ){
If (node = Child ){
This. Children. splice (I, 1 );
Break;
}
}
This. element. removechild (child. getelement ());
},
Getchild: function (I ){
Return this. Children [I];
},
// Implement the dynamicgallery combination object interface
Hide: function (){
For (VAR node, I = 0; node = This. getchild (I); I ++ ){
Node. Hide ();
}
This. element. style. Display = 'none ';
},
Show: functioln (){
This. element. style. Display = 'block ';
For (VAR node, I = 0; node = getchild (I); I ++ ){
Node. Show ();
}
},
// Help
Getelement: function (){
Return this. element;
}
}

The following describes how to set leaf objects:Copy codeThe Code is as follows: // galleryimage class
VaR galleryimage = function (SRC) {// implement the methods defined in composite and galleryitem combination objects
This. Element = Document. createelement ('img ');
This. element. classname = 'gallery-image ';
This. element. src = SRC;
}
Galleryimage. Prototype = {

// Implement the Composite Interface
// These are leaf nodes, so we don't need to implement these methods. We just need to define them.
Add: function (){},
Remove: function (){},
Getchild: function (){},
// Implement the galleryitem Interface
Hide: function (){
This. element. style. Display = 'none ';
},
Show: function (){
This. element. style. Display = '';
},
// Help
Getelement: function (){
Return this. element;
}
}

This is an example of how the combined mode works. Every class is simple, but with such a hierarchy, we can perform some complex operations. The constructor of the galleryimage class creates an image element. The rest of this class definition is composed of null composite object methods (because this is a leaf node) and galleryitem-required operations. Now we can use these two classes to manage images:Copy codeThe Code is as follows: var topgallery = new dynamicgallery ('top-gallery ');
Topgallery. Add (New galleryimage ('/img/image-1.jpg '));
Topgallery. Add (New galleryimage ('/img/image-2.jpg '));
Topgallery. Add (New galleryimage ('/img/image-3.jpg '));
VaR vacationphotos = new dyamicgallery ('vacation-photos ');
For (VAR I = 0, I <30; I ++ ){
Vacationphotos. Add (New galleryimage ('/img/VAc/image-' + I + '.jpg '));
}
Topgallery. Add (vacationphotos );
Topgallery. Show ();
Vacationphotos. Hide ();

In combination mode, simple operations can also produce complex results. You do not have to write the bonding code that the master manually traverses the array or other data structures. You only need to perform operations on the top-level objects, and each sub-object of the master can pass this operation on its own. This is especially useful for repeated operations. In the combination mode, the coupling between objects is very loose. Every time you perform an operation on the top-level composite object, you are actually trying to search the entire structure first to find the node.
The disadvantage of the combination mode is that any operation to call the combination mode will be well received by all its sub-objects. If this hierarchy is large, the system performance will be affected.