A Design Pattern a Day is designed to get a first look at the essence of design patterns. It is currently implemented in javascript and Python. Of course, there are multiple implementations of each design pattern, but this small volume only documents the most straightforward

The original address is: Composite Patterns of a Design Pattern every day

Welcome to the personal technology blog: Godbmw.com. 1 original technical post per week! Open source tutorial (Webpack, design mode), interview brush questions (partial front), knowledge arrangement (weekly fragmentary), welcome long-term attention!

If you also want to carry on the knowledge collation + build the function perfect/design simple/fast start personal blog, please directly poketheme-bmw

0. Project address

  • Combined mode · All codes
  • A Design Pattern a day address

1. What is “combined mode”?

Composition pattern, which groups objects into a tree structure to represent a partial-whole hierarchy.

  1. Larger parent objects are constructed from smaller children, which are also made up of smaller children
  2. A single object and a combination of objects are consistent with the interfaces exposed by users, and different manifestations of the same interface also reflect polymorphism

2. Application scenarios

Composite mode can be used in applications where you need to operate on “tree structures”, such as scanning folders, rendering site navigation structures, and so on.

3. Code implementation

Here we use code to simulate the File scanning function and encapsulate the File and Folder classes. In composite mode, users can nest files or Folders into the Folder class to simulate a real “File directory” tree structure.

In addition, both classes provide scan interfaces. Scan under File refers to scanning files, and Scan under Folder refers to invoking scan methods of subfolders and subfiles. The whole process is depth-first.

3.1 python3 implementation

class File:  # file class
    def __init__(self, name):
        self.name = name

    def add(self):
        raise NotImplementedError()

    def scan(self):
        print('Scan file:' + self.name)


class Folder:  # folder class
    def __init__(self, name):
        self.name = name
        self.files = []

    def add(self, file):
        self.files.append(file)

    def scan(self):
        print('Scan folder:' + self.name)
        for item in self.files:
            item.scan()


if __name__ == '__main__':

    home = Folder("User root")

    folder1 = Folder("First folder")
    folder2 = Folder("Second folder")

    file1 = File("File No. 1")
    file2 = File("File No. 2")
    file3 = File("File No. 3")

    Add the file to the corresponding folder
    folder1.add(file1)

    folder2.add(file2)
    folder2.add(file3)

    Add the folder to a more advanced directory folder
    home.add(folder1)
    home.add(folder2)

    # Scan directory folder
    home.scan()

Copy the code

$python main.py is executed and the final output looks like this:

Scan folder: User root directory Scan folder: First folder Scan files: files 1 scan folder: second folder Scan files: files 2 Scan files: files 3Copy the code

3.2 ES6 implementation

/ / file
class File {
  constructor(name) {
    this.name = name || "File";
  }

  add() {
    throw new Error("File cannot be added under folder");
  }

  scan() {
    console.log("Scan file:" + this.name); }}// Folder class
class Folder {
  constructor(name) {
    this.name = name || "Folder";
    this.files = [];
  }

  add(file) {
    this.files.push(file);
  }

  scan() {
    console.log("Scan folder:" + this.name);
    for (let file of this.files) { file.scan(); }}}let home = new Folder("User root");

let folder1 = new Folder("First folder"),
  folder2 = new Folder("Second folder");

let file1 = new File("File No. 1"),
  file2 = new File("File No. 2"),
  file3 = new File("File No. 3");

// Add the file to the corresponding folder
folder1.add(file1);

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

// Add the folder to the more advanced directory folder
home.add(folder1);
home.add(folder2);

// Scan the directory folder
home.scan();
Copy the code

If you execute $node main.js, the output looks like this:

Scan folder: User root directory Scan folder: First folder Scan files: files 1 scan folder: second folder Scan files: files 2 Scan files: files 3Copy the code

4. Reference

  • JavaScript Design Patterns and Development Practices