The combination mode in the design mode is used in JavaScript program construction, and the design mode is javascript

The combination mode in the design mode is used in JavaScript program construction, and the design mode is javascript

Definition

Combination, as its name implies, refers to creating a single object with objects containing multiple parts. This single entity will be used as an access point for all of these parts. Although this greatly simplifies the operation, it may also be quite deceptive, because there is no implicit way to clearly indicate how many parts the combination contains.
The purpose of the combination mode is to decouple the internal architecture of customer programs and complex elements so that customer programs treat all child elements equally.

Every child node can make a complex existence. For a parent node, you do not need to know the complexity of the child node or implement the complexity of the child node. You only need to pay attention to the specific method of the child node, you can use subnodes. Simplifies the relationship between parent and child.

The same is true for sub-nodes. Too many interface exposures are sometimes abuse and reduce external dependencies.

Example
We 'd better use an illustration combination. In, you can see two different types of objects: Containers and libraries are combined, and images are blades. A combination can carry sub-items, but generally does not implement more actions. The blade contains the vast majority of actions, but cannot carry subitems, at least in traditional combination examples.

This example creates a picture library and uses it as an example of the combination mode. There are only three layers: album, library, and image. The album and library will be combined, and the image is a blade, as shown in the figure above. This is a more explicit structure than the requirements of the combination itself, but for this example, it makes sense to limit these layers to only combinations or blades. The standard combination does not limit which structural layers can have blades, nor limit the number of blades.

To start the operation, you should first create the GalleryComposite "class" for the album and library ". Please note that I am using jQuery to perform DOM operations to simplify the process.

var GalleryComposite = function (heading, id) {  this.children = [];  this.element = $('<div id="' + id + '" class="composite-gallery"></div>')  .append('
This location is a bit tricky. Can I explain it more? We also use the add, remove, and getChild methods to construct this combination. In this example, remove and getChild are not actually used, but they are useful for creating dynamic combinations. The hide, show, and getElement methods are used to manipulate the DOM. This combination is intended to be displayed on the page as a library representation. The combination can control these library elements through hide and show. If you call hide on an album, the entire album will disappear, or you can only call it on a single image, so that only the image will disappear.
Create a GalleryImage class. Note that it uses the same method as GalleryComposite. In other words, they implement the same interface. The difference is that the image is a blade, so no operations are actually performed on subitem-related methods, just as they do not have any subitem. You must use the same interface to run the combination. Because the combination element does not know whether it is added to another combination element or blade, if you try to call these methods on its subitems, you need to run the combination completely normally, no errors.

var GalleryImage = function (src, id) {  this.children = [];  this.element = $('')  .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;  }}
Since you have built an object prototype, you can use it now. You can see the code for building the image library.
var container = new GalleryComposite('', 'allgalleries');var gallery1 = new GalleryComposite('Gallery 1', 'gallery1');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();
Benefits of the combination mode:
Simple operations can also produce complex results. You only need to perform operations on the top-level objects, so that each sub-object 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. As long as they implement the same interface, changing their location or swapping them is just a breeze. It promotes code reuse and facilitates code reconstruction.
Every time you perform an operation on the top-level composite object, you actually perform a deep-first search on the entire structure to find nodes. The programmer who creates the composite object knows nothing about these details. Adding, deleting, and searching nodes in this hierarchy are easy.
Disadvantages of the combination mode:
The ease of use of composite objects may mask the cost of each operation it supports. Because any operation called by the composite object will be passed to all its sub-objects, if the hierarchy is large, the system performance will be affected. The normal operation of the combination mode requires some form of interface.
When composite objects and node classes are used as packaging tools for HTML elements, composite objects must comply with HTML usage rules. For example, it is difficult to convert a table into a composite object.
The stricter the interface check, the more reliable the composite object class is.