JS design patterns first met (seven) - combined mode

definition

Combined mode is to use a small child objects to create larger objects, and these small sub-object itself may be composed of smaller "Sun object" constituted.

Examples of a combination of 7.1 - Scan Folder

//文件夹类
function Folder(name) {
    this.name = name;
    this.files = [];
    this.parent = null;
}
Folder.prototype.add = function(file) {
    file.parent = this;
    this.files.push(file);
    
}
Folder.prototype.scan = function() {
    console.log('开始扫描文件夹 => ',this.name);
    for (let i=0; i<this.files.length; i++) {
        const file = this.files[i];
        file.scan();
    }
}
Folder.prototype.remove = function(file) {
    if (!this.parent) {
        return false;
    }
    const files = this.files;
    const len = files.length;
    for (let i=files[len]; i >= 0; i--) {
        if (files[i] === file) {
            files.splice(i,1);
        }
    }
}
// 文件类
function File(name) {
    this.name = name;
    this.parent = null;
}
File.prototype.add = function() {
    throw new Error('file下面不能添加文件');
}
File.prototype.scan = function() {
    console.log('开始扫描文件 => ',this.name);
}
File.prototype.remove = function() {
    if (!this.parent) {
        return false;
    }
    const files = this.files;
    const len = files.length;
    for (let i=files[len-1]; i >= 0; i--) {
        if (files[i] === file) {
            files.splice(i,1);
        }
    }
}

const Ftimo = new Folder('Ftimo');
const Ffe = new Folder('Ffe');
const Fjs = new Folder('Fjs');
const Fes6 = new Folder('Fes6');
const Freact = new Folder('Freact');
const Fredux = new Folder('Fredux');
const findex = new File('findex');
const fcss = new File('fcss');
const fless = new File('fless');
const fjavascript = new File('fjavascript');
const fjava = new File('fjava');
Ftimo.add(Ffe);
Ffe.add(Fjs);
Ffe.add(Fes6);
Fjs.add(findex);
Fjs.add(fcss);
Fjs.add(fless);
Ffe.add(fjavascript);
Ffe.add(fjava);
Fjs.add(Freact);
Fjs.add(Fredux);
Ftimo.scan();
复制代码

7.2 optimized code

复制代码

7.3 Notes

• Combined mode is not the father-son relationship, but the parent-child relationship
• Consistency leaf object operation
• Bi-directional mapping between
• Improving the performance of a combination pattern duty chain.

When used in combination with any pattern 7.4

1. An object representing the whole hierarchy section. Combined mode can easily construct a tree structure to represent the part of the whole object. In particular we are not sure when the tree level in the end how many exist during development. After the completion of the final structure of the tree, just the topmost object request by trees, we will be able to unify the operations of the entire tree.
2. Customers want a unified treatment of all objects in the tree. Combination mode enables customers to distinguish combination of objects and leaf objects can be ignored, the customer in the face of the tree, do not care about the object currently being processed is a leaf object or combination of objects, will not write a bunch of if, else statements are handle them. Group objects and leaf objects will each do their own thing right, which is a combination model is the most important capability.

7.5 summary

1. Combined mode allows the use of a tree structure of our way to create an object. We can apply the same operation on the object and the combination of a single object. In most cases, we can ignore the difference between the combination of objects and individual objects, so to handle them in a consistent manner.
2. If too many objects created by combining patterns, these objects may make the system can not afford.

Reproduced in: https: //juejin.im/post/5d03a4c0518825092c716ecd