JS Design Patterns Summary Notes

# JS Design Patterns Summary Notes

# Introduction: The Growth Path of a Frontend Engineer

What fundamentally defines a frontend engineer is not the ever-changing technology landscape, but the things that don't change.

The so-called "things that don't change" are the ability to master technology.

Specifically, this breaks down into three levels:

Being able to solve concrete problems with robust code;
Being able to handle complex systems with abstract thinking;
Being able to plan larger-scale business with engineering mindset.

A person's theoretical foundation forms their baseline -- the stronger the theory, the higher the baseline. Set a goal and build a ladder upward, and reaching the goal becomes a matter of time. Many self-taught engineers spend their entire careers without reaching the baseline of an excellent engineer. Many of the profound insights they painstakingly arrive at are just natural knowledge to formally trained engineers. -- Wu Jun

# The "Dao" of Design Patterns

Design patterns are about "borrowing established solutions." Like using mathematical formulas -- you don't derive the formula from scratch every time.

# Core Concept

The core concept of design patterns -- encapsulate what varies
Ensure maintainability and extensibility.
Separate what changes from what doesn't, ensuring the changing parts remain flexible and the unchanging parts remain stable -- this is what makes code "robust."

# The "Techniques" of Design Patterns

The classic 23 design patterns, categorized as Creational, Structural, and Behavioral.

# Creational

Singleton Pattern
Prototype Pattern
Constructor Pattern
Factory Pattern
Abstract Factory Pattern

# Structural

Bridge Pattern
Facade Pattern
Composite Pattern
Decorator Pattern
Adapter Pattern
Proxy Pattern
Flyweight Pattern

# Behavioral

Iterator Pattern
Interpreter Pattern
Observer Pattern
Visitor Pattern
State Pattern
Memento Pattern
Strategy Pattern
Template Method Pattern
Chain of Responsibility Pattern
Command Pattern

# Summary:

Creational patterns encapsulate the variation in the process of creating objects.
Structural patterns encapsulate the variation in how objects are composed. Their purpose is to flexibly express the cooperation and dependency relationships between objects.
Behavioral patterns abstract out the ever-changing behaviors of objects, ensuring safe and convenient modification.

# Creational: Factory Pattern - Simple Factory -- Distinguishing "What Changes and What Doesn't"

First, understand the Constructor Pattern. In JavaScript, a constructor function is a constructor. Using constructor functions means using the Constructor Pattern.

# Constructor Pattern

function User(name, age, career){
  this.name = name
  this.age = age
  this.career = career
}
const user = New User('Zhang San', 18, 'Frontend Engineer')

1
2
3
4
5
6

What changes and what doesn't: the user's attributes (name, age, career) don't change -- that's the commonality. What changes are the attribute values -- that's the individuality.

# Simple Factory Pattern

function User(name , age, career, work) {
    this.name = name
    this.age = age
    this.career = career
    this.work = work
}

// Factory function (extract the changing parts into a separate function)
function Factory(name, age, career) {
    let work
    switch(career) {
        case 'coder':
            work =  ['Write code','Write system design', 'Fix bugs']
            break
        case 'product manager':
            work = ['Book meeting rooms', 'Write PRDs', 'Chase developers']
            break
        case 'boss':
            work = ['Drink tea', 'Read newspapers', 'Meet clients']

        // Assign responsibilities for other roles
        //case 'xxx':
            //...

    return new User(name, age, career, work)
}