Combination mode parsing of JavaScript design Patterns _js Object-oriented

Source: Internet
Author: User
Tags class definition
What do you say?! Like an animal (a combination of objects), when it has a descendant (a leaf object), its descendants have some function (such as digging a hole, hearing well, etc.); it's like a tree, It has a root (a combination of objects) and then the other sticks that come out of the tree (the combination of objects) and the leaves (leaf objects) from these sticks to the foreign minister. In other words, when the ancestors have already had, so long as the other children derived from this ancestor (including the other objects under this ancestor) already have a certain function, it seems to seem like some inheritance. Group mode has two types of objects in the hierarchical system of the grouped objects: leaf objects and grouped objects. Combinatorial mode is good at manipulating large numbers of objects.
"Combo Mode" is when you're working on a project, and we're going to define the methods that will appear in this project in the composite object (including the methods in the Leaf object), and their leaf objects will inherit the grouped objects. When a composite object is instantiated, the method of its leaf object is also instantiated accordingly. Maybe I'm a little confused, let's use an example to illustrate it.
"Combo Mode" is a pattern tailored to create a dynamic user interface on the web. With this pattern, you can use a command to fire complex or recursive behavior on multiple objects.
There are two great benefits to using the combination mode:
1, the same method can be used to handle the collection of objects and specific child objects.
2, can be used to organize a number of child objects into a tree-shaped structure, and the entire tree can be traversed.
The combination mode is suitable for use only if you have the following two conditions:
1, there are a number of organizations organized into a hierarchical system of objects (the specific structure may not be known during the development).
2, want to this batch of objects or a part of the object of the truth an operation.
Here's a look at the example:
The specific requirement is to do a picture library and optionally hide or display a specific part of the picture library. This may be a separate picture, or it may be a picture library. Now you need two classes to do this: The combination object class used as a picture library and the Leaf object class for the picture itself, the following code:
In the above code, the first definition is the interface that the composite object class and the Leaf object class should implement. In addition to the regular combination perspective of a penny, these classes are afraid of bullying soft operations that include only hide and show. Next we define the leaf object. The leaf object implements hide and show with the following code:
Copy Code code as follows:

var composite = new Interface (' Composite ', [' Add ', ' Remove ', ' getchild ']); Check the method that the composite of the joint object should have
var galleryitem = new Interface (' Galleryitem ', [' Hide ', ' show ']); Check the method that the galleryitem of the joint object should have
Dynamicgallery Class
var dynamicgallery = function (ID) {//Implementation Composite,galleryitem Composite object class
This.children = [];

This.element = document.createelement (' div ');
This.element.id = ID;
This.element.className = ' dynamic-gallery ';
}
Dynamicgallery.prototype = {
Implement 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++) {
if (node = child) {
This.children.splice (i, 1);
Break
}
}
This.element.removeChild (Child.getelement ());
},
Getchild:function (i) {
return this.children[i];
},
Implement Dynamicgallery Composite 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 method
Getelement:function () {
return this.element;
}
}

The following are the appropriate ways to set the Leaf object:
Copy Code code as follows:

Galleryimage class
var galleryimage = function (src) {//implementation of the methods defined in composite and Galleryitem composite 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 have to implement these methods, we just need to define
Add:function () {},
Remove:function () {},
Getchild:function () {},
Implement Galleryitem interface
Hide:function () {
This.element.style.display = ' None ';
},
Show:function () {
This.element.style.display = ';
},
Help method
Getelement:function () {
return this.element;
}
}

This is an example of how the combination mode works. Each 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 remainder of this class definition consists of an empty composite object method (because this is a leaf node) and a galleryitem required operation. Now we can use these two classes to manage the picture:
Copy Code code 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 < i++) {
Vacationphotos.add (New Galleryimage ('/img/vac/image-' + i + '. jpg '));
}
Topgallery.add (Vacationphotos);
Topgallery.show ();
Vacationphotos.hide ();

The benefits of combination mode, the use of combination mode, simple operation can produce complex results. You do not need to write the master manual traversal of the array or other data structure of the adhesive code, only the topmost object to perform operations, each of the main child object to pass this operation. This is especially useful for operations that are repeatedly performed. In combinatorial mode, the coupling between objects is very loose. Whenever you perform an operation on a top-level composite object, you are actually trying to prioritize the entire structure to find the node.
The disadvantage of combinatorial mode is that any operation that is invoked on the combined mode will be well north to all its child objects, and if the hierarchy is large, the performance of the system will be affected.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.