Portfolio model

What is composite mode

The composite pattern is to build larger objects from smaller children, which themselves may be made up of smaller ‘grandchildren’.

Simply put, the composite pattern is a tree structure. Objects with children are called composite objects, and objects without children are called leaf objects. Requests are passed down from the top of the tree, similar to the depth traversal of a binary tree.

The use of composite patterns

  • Represents a tree structure.
  • Treat composite objects and leaf objects identically

Composite patterns in JavaScript

Since the composite pattern treats both composite objects and leaf objects identically, you need to ensure that both composite objects and leaf objects have the same methods. In JavaScript, object polymorphism is inherent, and no compiler checks the type of variable. So you usually need to use duck type thinking for interface checking.

Examples of composite patterns ———— scan folders

In a file system, folders correspond to composite objects and files correspond to leaf objects. When we operate on a folder, we don’t care about the contents of the folder, we just operate on the folder, and then the folder operation recurses down.

const Folder = function(name) {
    this.name = name;
    this.files = [];
};

Folder.prototype.add = function(file) {
    this.files.push(file);
};

Folder.prototype.scan = function() {
    console.log('Start scanning folders:' + this.name);

    for (let i = 0, file, files = this.files; (file = files[i++]); ) { file.scan(); }};const File = function(name) {
    this.name = name;
};

File.prototype.scan = function() {
    console.log('Start scanning files:The ${this.name}`);
};

File.prototype.add = function() {
    throw new Error('File cannot add file');
};

let folder = new Folder('front end');

let folder1 = new Folder('frame');
let folder2 = new Folder('JavaScript');

let file1 = new File('Html');
let file2 = new File('Css');
let file3 = new File('Vue');

folder1.add(file3);
folder2.add(file1);
folder2.add(file2);

folder.add(folder1);
folder.add(folder2);

folder.scan();
Copy the code

When to use composite patterns

  • Represents a partial-whole hierarchy of objects. The composite pattern makes it easy to construct a tree to represent the partial-global structure of an object.
  • You want to treat all objects in the tree uniformly. Composite mode allows users to ignore the distinction between composite objects and leaf objects, and the customer does not care whether the object being processed is composite or leaf objects when facing the tree.

summary

The composite pattern is not perfect, and may result in a system in which every object looks pretty much like every other object. Their differences are only apparent at run time, which makes the code hard to understand. In addition, because every object must be uniform, that is, every object created must have methods that are required by the object itself, as well as composite pattern uniform methods, creating too many objects can become too much for the system to handle.