definition
Combination, as the name implies, refers to creating a single entity with an object containing multiple components. This single entity will serve as an access point for all of these components, and while this greatly simplifies operations, it can also be quite deceptive, as there is no implicit way to clearly indicate how many components the combination contains.
The goal of the combination mode is to decouple the client program from the internal architecture of complex elements, so that the client program treats all child elements equally.
Each child node can make complex existence. For the parent node, it is not necessary to know the complexity of the child node or implement the complexity of the child node. It only needs to pay attention to the specific methods of the child node, so that the child node can be used. Simplifies the relationship between the father and the son.
The same is true for child nodes. Excessive interface exposure is sometimes an abuse, and it also reduces dependence on external factors.
Example
We'd better use an illusion combination. In the following image, you can see two different types of objects: containers and libraries are combinations and images are blades. Combinations can carry children, but generally do not perform more behaviors. The blade contains the vast majority of behaviors, but cannot carry children, at least not in traditional combination examples.
This example creates a picture library as a combination pattern example. There are only three levels: album, library, and image. The album and library will be combined, and the image is the blade, as shown in the image above. This is a more explicit structure than the combination itself requires, but for this example it makes sense to limit these levels to only combinations or blades. The standard combination does not limit which structural levels can have blades, nor does it limit the number of blades.
To start, you should first create a GalleryComposite "class" for your albums and libraries. Note that I'm using jQuery to perform DOM operations to simplify the process.
var GalleryComposite = function (heading, id) { this.children = []; this.element = $('<div id="' + id + '"></div>') .append('<h2>' + heading + '</h2>');}GalleryComposite.prototype = { add: function (child) { this.children.push(child); this.element.append(child.getElement()); }, remove: function (child) { for (var node, i = 0; node = this.getChild(i); i++) { if (node == child) { this.children.splice(i, 1); this.element.detach(child.getElement()); return true; } if (node.remove(child)) { return true; } } return false; }, getChild: function (i) { return this.children[i]; }, hide: function () { for (var node, i = 0; node = this.getChild(i); i++) { node.hide(); } this.element.hide(0); }, show: function () { for (var node, i = 0; node = this.getChild(i); i++) { node.show(); } this.element.show(0); }, getElement: function () { return this.element; }}This location is a bit tricky, can I allow me to explain more? We build this combination using both the add, remove, and getChild getChild methods. This example does not actually use remove and getChild, but they are very useful for creating dynamic combinations. The hide, show, and getElement methods are used to manipulate the DOM. This combination is intended to be presented to users on a page as a representation of the library. This combination can control these library elements through hide and show. If you call hide on the album, the entire album will disappear, or you can also call it on a single image so that only that image will disappear.
Now, create a GalleryImage class. Note that it uses exactly the same method as GalleryComposite. In other words, they implement the same interface, except that the image is a blade, so no action is actually performed on the child-related method, just as if it does not have any child. The combination must be run with the same interface because the combination element does not know if it is another combination element or blade that it is added by itself, so if you try to call these methods on its children, you need to run completely fine without any errors.
var GalleryImage = function (src, id) { this.children = []; this.element = $('<img />') .attr('id', id) .attr('src', src);}GalleryImage.prototype = { // Due to this being a leaf, it doesn't use these methods, // but must implement them to count as implementing the // Composite interface add: function () { }, remove: function () { }, getChild: function () { }, hide: function () { this.element.hide(0); }, show: function () { this.element.show(0); }, getElement: function () { return this.element; }}Given that you have built the object prototype, you are now able to use it. From below you can see the code for actually building the image library.
var container = new GalleryComposite('', 'allgalleries');var gallery1 = new GalleryComposite('Gallery 1', 'galleries1');var gallery2 = new GalleryComposite('Gallery 2', 'gallery2');var image1 = new GalleryImage('image1.jpg', 'img1');var image2 = new GalleryImage('image2.jpg', 'img2');var image3 = new GalleryImage('image3.jpg', 'img3');var image4 = new GalleryImage('image4.jpg', 'img4');gallery1.add(image1);gallery1.add(image2);gallery2.add(image3);gallery2.add(image4);container.add(gallery1);container.add(gallery2);// Make sure to add the top container to the body,// otherwise it'll never show up.container.getElement().appendTo('body');container.show();The benefits of the combination mode:
Simple operations can also produce complex results. You only need to perform operations on the top-level object and let each child object pass this operation on its own. This is especially useful for those operations that are repeated.
In combination mode, the coupling between the individual objects is very loose. As long as they implement the same interface, it's only a little help to change their positions or swap them. It promotes code reuse and is also conducive to code reconstruction.
Whenever an operation is performed on a top-level combined object, it is actually a deep-first search of the entire structure to find nodes, and the programmer who created the combined object is ignorant of these details. It is very easy to add, delete and find nodes in this hierarchy.
Disadvantages of combination mode:
The ease of use of a combined object may mask the cost of every operation it supports. Since any operation called by a combined object will be passed to all its sub-objects. If this hierarchy is large, the performance of the system will be affected. The normal operation of the combination mode requires some form of interface.
When combining objects and node classes are used as wrapping tools for HTML elements, combined objects must comply with HTML usage rules. For example, a table is difficult to convert into a combined object.
The stricter the interface inspection, the more reliable the combined object class will be.