Frontend Design Patterns: SOLID Principles and 23 Common Patterns Explained

Six SOLID Principles

The six SOLID principles—Dependence Inversion, Open‑Close, Single Responsibility, Law of Demeter, Interface Segregation, and Liskov Substitution—promote high cohesion and low coupling in software design.

These principles can be summarized as "high cohesion, low coupling".

23 Design Patterns Overview

The classic 23 design patterns are divided into three categories: Creational, Structural, and Behavioral.

Frontend Nine Design Patterns

1. Creational Patterns

1. Constructor (Builder) Pattern

// Requirement: create basic online information for a company employee
// Single employee creation can be done directly
const obj = {
    name: '张三',
    age: '20',
    department: '人力资源部门'
};
// When many employees need to be created, use a constructor pattern
class Person {
    constructor(obj) {
        this.name = obj.name;
        this.age = obj.age;
        this.department = obj.department;
    }
}
const person1 = new Person(obj);

2. Factory Pattern

// Requirement: after creating employee info, generate a business card for each employee
class setPerson {
    constructor(obj) {
        this.pesonObj = obj;
    }
    creatCard() {
        // create business card
    }
    otherFynction() {}
}
class Person {
    constructor(obj) {
        return new setPerson(obj);
    }
}
const person = new Person();
const card = person.creatCard({
    name: '张三',
    age: '20',
    department: '人力资源部门'
});

3. Singleton Pattern

// Requirement: determine application state and provide prompts based on the state
class applicationStation {
    constructor() {
        this.state = 'off';
    }
    play() {
        if (this.state === 'on') {
            console.log('已打开');
            return;
        }
        this.state = 'on';
    }
    shutdown() {
        if (this.state === 'off') {
            console.log('已关闭');
            return;
        }
        this.state = 'off';
    }
}
window.applicationStation = new applicationStation();
const application1 = window.applicationStation;
const application2 = window.applicationStation;

2. Structural Patterns

1. Adapter (Class) Pattern

// Requirement: adapt a Hong Kong plug to a mainland socket
class HKDevice {
    getPlug() {
        return '港行双圆柱插头';
    }
}
class Target {
    constructor() {
        this.plug = new HKDevice();
    }
    getPlug() {
        return this.plug.getPlug() + '+港行双圆柱转换器';
    }
}
const target = new Target();
target.getPlug();

2. Decorator Pattern

// Requirement: add different card styles based on employee seniority without modifying the original factory
class setPerson {
    constructor(obj) { this.pesonObj = obj; }
    creatCard() { /* create card */ }
    otherFynction() {}
}
class updatePerson {
    constructor(obj) { this.pesonObj = obj; }
    creatCard() {
        this.pesonObj.creatCard();
        if (this.pesonObj.seniorityNum < 1) {
            this.update(this.pesonObj);
        }
    }
    update(pesonObj) { /* additional processing */ }
}
const person = new setPerson();
const newPerson = new updatePerson(person);
newPerson.creatCard();

3. Proxy Pattern

// Requirement: ensure the application can only be used after login, using a proxy to check status
class applicationStation {
    init() { return 'hello'; }
}
class User {
    constructor(loginStatus) { this.loginStatus = loginStatus; }
}
class applicationStationProxy {
    constructor(user) { this.user = user; }
    init() {
        return this.user.loginStatus ? new applicationStation().init() : 'please Login';
    }
}
const user = new User(true);
const userProxy = new applicationStationProxy(user);
userProxy.init();

3. Behavioral Patterns

1. Observer Pattern

// Requirement: control smart home devices through a central hub
class MediaCenter {
    constructor() {
        this.state = '';
        this.observers = [];
    }
    attach(observer) { this.observers.push(observer); }
    getState() { return this.state; }
    setState(state) {
        this.state = state;
        this.notifyAllobservers();
    }
    notifyAllobservers() {
        this.observers.forEach(ob => ob.update());
    }
}
class observers {
    constructor(name, center) {
        this.name = name;
        this.center = center;
        this.center.attach(this);
    }
    update() { this.center.getState(); }
}

2. Template Method Pattern

// Requirement: onboarding new employees with a defined process
class EntryPath {
    constructor(obj) { /* some code */ }
    init() { /* initialize employee info */ }
    creatCard() { /* create employee card */ }
    inductionTraining() { /* onboarding training */ }
    trainingExamination() { /* post‑training test */ }
    personEntry() {
        this.init();
        this.creatCard();
        this.inductionTraining();
        this.trainingExamination();
    }
}

3. Command Pattern

// Requirement: control a game character via commands
class Receiver { execute() { /* run */ } }
class Operator { constructor(command) { this.command = command; } run() { this.command.execute(); } }
class command { constructor(receiver) { this.receiver = receiver; } execute() { this.receiver.execute(); } }
const soldier = new Receiver();
const order = new command(soldier);
const player = new Operator(order);
player.run();

While real‑world projects may not follow every principle strictly, understanding these patterns and principles helps developers design cleaner, more maintainable frontend code.