JavaScript Design Patterns and development practices---reading notes (10) Combo mode

The combination pattern is the use of small sub-objects to build larger objects, and these small sub-objects may be made up of smaller "grandchild objects".

Combined mode combines objects into a tree structure to represent a "partial-whole" hierarchy.

The role of abstract classes in combinatorial mode:

The great advantage of combining patterns is that they can be treated consistently with composite objects and base Objects. This transparency brings convenience, especially in the static type Language.

The difficulty in implementing the combinatorial pattern in JavaScript is to ensure that both the composite object and the leaf object have the same method, which usually requires an interface check with the duck type Idea.

Security issues arising from transparency:

Example of a combined Pattern-scan folder

The relationship between a folder and a file is well suited for use in combination Mode.

varFolder =function(name) { this. Name =name;  this. Files = [];    }; Folder.prototype.add=function(file) { this. Files.push (file);    }; Folder.prototype.scan=function() {console.log (' Start Scan folder ' + this. name);  for(vari=0,file,files= this. files;file=files[i++];        ) {file.scan ();    }    }; varFile =function(name) { this. Name =name;    }; File.prototype.add=function(){        Throw NewError (' No more files can be added under the file ');    }; File.prototype.scan=function() {console.log (' Start scan file ' + this. name);    }; //create some folders and file objects, and let them combine into a tree    varfolder =NewFolder (' Learning materials '); varFolder1 =NewFolder (' JavaScript '); varFolder2 =NewFolder (' JQuery '); varFile1 =NewFile (' JavaScript1 '); varFile2 =NewFile (' JavaScript2 '); varFile3 =NewFile (' JAVASCRIPT3 ');    Folder1.add (file1);    Folder2.add (file2);    Folder.add (folder1);    Folder.add (folder2);    Folder.add (file3); varFolder3 =NewFolder (' Nodejs '); varFile4 =NewFile (' in layman ');    Folder3.add (file4); varFile5 =NewFile (' 123 ');    Folder.add (folder3);    Folder.add (file5); Folder.scan ();

Some notable places to Watch:

1. Combination mode is not a parent-child relationship

A composite pattern is a has-a (aggregation) relationship, not a Is-a. A composite object contains a set of leaf objects, but the leaf is not a subclass of Composite. A composite object delegates a request to all the leaf objects it contains, and the key to cooperating is to have the same interface.

2. Consistency of leaf object operations

3. Bidirectional mapping Relationship

4. Improve the performance of composite mode with the responsibility chain mode

Reference Parent Object:

Sometimes we need to keep a reference to the parent node on the child node, such as when using a responsibility chain in a combined pattern, it may be necessary to have the request bubbling through the child nodes toward the parent Node. And when we delete a file, we actually delete the file from the upper folder where the file is Located.

    varFolder =function(name) { this. Name =name;  this. Parent =NULL;//Add This.parent Property         this. Files = [];    }; Folder.prototype.add=function(file) {file.parent= this;//Set Parent Object         this. Files.push (file);    }; Folder.prototype.scan=function() {console.log (' Start Scan folder ' + this. name);  for(vari=0,file,files= this. files;file=files[i++];        ) {file.scan ();    }    }; Folder.prototype.remove=function(){        if(! this. parent) {//the root node or the free node outside the tree            return; }         for(varFiles = this. parent.files,l = files.length;l>=0; l--){            varFile =files[l]; if(file = = this) {files.splice (l,1);    }        }    }; varFile =function(name) { this. Name =name;  this. Parent =NULL;    }; File.prototype.add=function(){        Throw NewError (' No more files can be added under the file ');    }; File.prototype.scan=function() {console.log (' Start scan file ' + this. name);    }; File.prototype.remove=function(){        if(! this. parent) {//the root node or the free node outside the tree            return; }         for(varFiles = this. parent.files,l = files.length;l>=0; l--){            varFile =files[l]; if(file = = this) {files.splice (l,1);    }        }    }; varfolder =NewFolder (' Learning materials '); varFolder1 =NewFolder (' JavaScript '); varFile1 =NewFolder (' JavaScript1 '); Folder1.add (NewFile (' 123 '));    Folder.add (folder1);    Folder.add (file1);    Folder1.remove (); Folder.scan ();

When to use the combined mode:

• Represents part of an object-the overall hierarchy
• Customers want to treat all objects in the tree uniformly.

JavaScript Design Patterns and development practices---reading notes (10) Combo mode