JavaScript design pattern composition pattern analysis_js object-oriented

How to say it? ! Just like an animal (combined object), when it gives birth to offspring (leaf objects), its offspring will have a certain function (for example: digging holes, hearing well, etc.); also like a tree, it There is a root (the composite object) and then there are other branches that grow outward from the tree (the composite object) and leaves that grow outward from those branches (the leaf object). In other words, when an ancestor already exists, then as long as other children derived from this ancestor (including other combined objects under this ancestor) already have a certain function, it looks a bit like inheritance. "Composition pattern" has two types of objects in the hierarchy of composite objects: leaf objects and composite objects. The combined pattern is good at operating on large numbers of objects.
"Composition mode" means that when working on a project, we need to define all the methods that will appear in the project in the composition object (including methods in leaf objects), and their leaf objects will inherit the composition object. When the composite object is instantiated, the methods of its leaf objects are instantiated accordingly. Maybe what I said is a bit confusing, let me use an example to illustrate.
"Composition Mode" is a mode tailored for creating dynamic user interfaces on the web. Using this pattern, you can trigger complex or recursive behavior on multiple objects with a single command.
Using the "combined mode" can bring us two major benefits:
1. A collection of objects and 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 the entire tree can be traversed.
The combination mode is suitable only if the following two conditions are met at the same time:
1. There is a batch of objects organized into a certain hierarchical system (the specific structure may not be known during development).
2. I hope to perform an operation on this batch of objects or part of them.
Let’s take a look at an example:
The specific requirement is to make a photo gallery and be able to selectively hide or show specific parts of the photo gallery. This may be a single image or a gallery of images. Now two classes are needed to complete this function: the composite object class used as a picture library and the leaf object class used for the picture itself. The code is as follows:
In the above code, the first thing defined is the composite object class and leaf The interface that the object class should implement. In addition to the conventional combination of vision and penny, these types of operations only include hide and show. Next we define the leaf objects. The leaf object implements hide and show. The code is as follows:

Copy the code The code is as follows:

var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // Check the methods that the composite object Composite should have
var GalleryItem = new Interface( 'GalleryItem', ['hide', 'show']); // Check the methods that the combined object GalleryItem should have
// DynamicGallery Class
var DynamicGallery = function(id){ // Implement Composite, 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 composite 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 ){
                                                                                                                                                       
        }
                                                                                                                                                            
},
// Implement the DynamicGallery composite object interface
hide : function(){
} for(var node, i = 0; node = this.getChild(i); i ){
              node.hide(); = 'block';
for(var node, i = 0; node = getChild(i); i ){
node.show();
}
},
// Helper method
getElement : function(){
return this.element;
}
}


The following are the corresponding methods for setting leaf objects:




Copy code


The code is as follows:

// GalleryImage class
var GalleryImage = function(src){          Implement the methods defined in the Composite and GalleryItem combination objects

this.element = document.createElement('img'); this.element.className = 'gallery-image'; this.element.src = src; } GalleryImage.prototype = { // Implement 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 GalleryItem interface
hide : function(){
this.element.style.display = 'none';
},
show : function(){
this.element.style.display = '';
},
// Helper method
getElement: function(){
return this.element;
}
}


This is an example demonstrating how the combined mode works. Each class is very simple, but thanks to such a hierarchy we can perform some complex operations. The constructor of the GalleryImage class creates an image element. The rest of the class definition consists of the empty composite object method (since this is a leaf node) and the operations required by GalleryItem. Now we can use these two classes to manage images:

Copy code The 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();

The advantages of combination mode, using combination mode, simple operations can also produce complex result. Instead of writing glue code that manually traverses arrays or other data structures, you can simply perform an operation on the top-most object and pass the operation to each child object itself. This is especially useful for operations that are performed over and over again. In the Composite pattern, the coupling between individual objects is very loose. Whenever an operation is performed on the top-level composite object, a try-first search is performed throughout the structure to find the node.
The disadvantage of the combined mode is that any operation called on the combined mode will be carried out to all its sub-objects. If this hierarchy is large, the performance of the system will be affected.