JS设计模式详解|极客笔记

JS设计模式详解

什么是设计模式

在软件开发领域，设计模式是一套被反复使用、多数人知晓的编程经验。它是对问题的一个通用解决方案，可以用来解决在软件开发中经常遇到的各种问题。

设计模式并不是一种新的技术，而是一种编程思想，是对软件开发过程中反复出现的问题的最佳解决方法。通过使用设计模式，可以提高代码的可维护性、可读性，并且可以减少代码的冗余，提高代码的复用性。

JS设计模式的分类

JS设计模式主要分为以下三种类型：

创建型设计模式

创建型设计模式关注的是如何创建对象。主要包括工厂模式、构造函数模式、原型模式、单例模式等。

工厂模式

工厂模式是一种创建型设计模式，将对象的创建过程封装到一个函数中，通过调用这个函数来创建对象。工厂模式主要有简单工厂模式、工厂方法模式和抽象工厂模式。

示例代码：

// 简单工厂模式
function createCar(type) {
    let car;
    switch (type) {
        case 'SUV':
            car = new SUV();
            break;
        case 'Sedan':
            car = new Sedan();
            break;
        default:
            car = new SUV();
    }
    return car;
}

构造函数模式

构造函数模式是一种创建对象的方式，通过构造函数来创建对象，构造函数中定义对象的属性和方法。

示例代码：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log('Hello, my name is ' + this.name);
    };
}
let person = new Person('Alice', 25);
person.sayHello();

结构型设计模式

结构型设计模式关注如何组合类和对象以形成更大的结构。主要包括适配器模式、装饰者模式、代理模式、外观模式、桥接模式、组合模式和享元模式。

适配器模式

适配器模式用于解决接口不兼容的问题，将一个接口转换为另一个消费者希望的接口。适配器模式主要有类适配器模式和对象适配器模式。

示例代码：

// 对象适配器模式
class Adapter {
    constructor(adaptee) {
        this.adaptee = adaptee;
    }
    request() {
        return this.adaptee.specificRequest().split('').reverse().join('');
    }
}

class Adaptee {
    specificRequest() {
        return 'Adaptee';
    }
}

let adaptee = new Adaptee();
let adapter = new Adapter(adaptee);
console.log(adapter.request()); // 'eetpAd'

行为型设计模式

行为型设计模式关注对象之间的通信，主要包括观察者模式、模板方法模式、策略模式、命令模式、状态模式、职责链模式和访问者模式。

观察者模式

观察者模式定义了对象之间的一对多关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。观察者模式主要包括主题(Subject)和观察者(Observer)两个角色。

示例代码：

class Subject {
    constructor() {
        this.observers = [];
    }
    addObserver(observer) {
        this.observers.push(observer);
    }
    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }
    notifyObservers() {
        this.observers.forEach(observer => observer.update());
    }
}

class Observer {
    update() {
        console.log('Observer is updated');
    }
}

let subject = new Subject();
let observer1 = new Observer();
let observer2 = new Observer();
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers();