JS设计模式|极客笔记

JS设计模式

概述

JavaScript是一种灵活、多范式的语言，可以通过各种方式来解决问题。设计模式是一种在软件开发中应用广泛的解决方案，用于解决特定问题的常见模式。

JS设计模式是指在编写JavaScript代码时经常使用的一些设计模式，可以有效地提高代码的可维护性、可读性和性能。

在本文中，我们将介绍一些常见的JS设计模式，包括工厂模式、单例模式、观察者模式、策略模式和代理模式。

工厂模式

工厂模式是一种用于创建对象的设计模式，它将对象的创建过程封装到一个函数中，用户只需要调用这个函数就可以创建对象。工厂模式有两种变体：简单工厂模式和工厂方法模式。

简单工厂模式

简单工厂模式是最简单的工厂模式，它通过一个工厂函数来创建对象。这个工厂函数通常包含一个switch语句，根据传入的参数创建不同类型的对象。

function createShape(type) {
    switch (type) {
        case 'circle':
            return new Circle();
        case 'rectangle':
            return new Rectangle();
        default:
            return null;
    }
}

function Circle() {
    this.type = 'circle';
}

function Rectangle() {
    this.type = 'rectangle';
}

const circle = createShape('circle');
const rectangle = createShape('rectangle');

console.log(circle.type); // 输出: circle
console.log(rectangle.type); // 输出: rectangle

工厂方法模式

工厂方法模式是一种更加灵活的工厂模式，它将具体对象的创建过程延迟到子类中实现。

class ShapeFactory {
    createShape() {
        // 抽象方法，由子类实现
    }
}

class CircleFactory extends ShapeFactory {
    createShape() {
        return new Circle();
    }
}

class RectangleFactory extends ShapeFactory {
    createShape() {
        return new Rectangle();
    }
}

class Circle {
    constructor() {
        this.type = 'circle';
    }
}

class Rectangle {
    constructor() {
        this.type = 'rectangle';
    }
}

const circleFactory = new CircleFactory();
const rectangleFactory = new RectangleFactory();

const circle = circleFactory.createShape();
const rectangle = rectangleFactory.createShape();

console.log(circle.type); // 输出: circle
console.log(rectangle.type); // 输出: rectangle

单例模式

单例模式是一种只允许创建一个实例的设计模式，它通常用于全局对象或共享资源的管理。单例模式可以保证在整个应用程序中只存在一个实例，避免了重复创建实例的开销。

class Singleton {
    constructor() {
        if (Singleton.instance) {
            return Singleton.instance;
        }
        Singleton.instance = this;
    }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 输出: true

观察者模式

观察者模式是一种对象间的一对多依赖关系，当一个对象状态发生改变时，所有依赖于它的对象都将得到通知并自动刷新。

class Subject {
    constructor() {
        this.observers = [];
    }

    addObserver(observer) {
        this.observers.push(observer);
    }

    notifyAll() {
        this.observers.forEach(observer => {
            observer.update();
        });
    }
}

class Observer {
    constructor(name) {
        this.name = name;
    }

    update() {
        console.log(`${this.name} received the notification.`);
    }
}

const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyAll();
// 输出:
// Observer 1 received the notification.
// Observer 2 received the notification.

策略模式

策略模式是一种定义一系列算法的方法，并将每种算法封装到独立的类中，使得它们可以互相替换。使用策略模式可以使得算法的使用者与算法的实现分离，从而提高代码的灵活性和可维护性。

class Strategy {
    execute() {
        // 抽象方法，由具体策略类实现
    }
}

class StrategyA extends Strategy {
    execute() {
        console.log('Strategy A is executed.');
    }
}

class StrategyB extends Strategy {
    execute() {
        console.log('Strategy B is executed.');
    }
}

class Context {
    constructor(strategy) {
        this.strategy = strategy;
    }

    executeStrategy() {
        this.strategy.execute();
    }
}

const strategyA = new StrategyA();
const strategyB = new StrategyB();

const contextA = new Context(strategyA);
const contextB = new Context(strategyB);

contextA.executeStrategy(); // 输出: Strategy A is executed.
contextB.executeStrategy(); // 输出: Strategy B is executed.

代理模式

代理模式是一种对象结构型模式，它提供一个代理对象来控制对原对象的访问。代理对象通常在访问对象的基础上实现一些额外的功能，比如权限控制、缓存等。

class RealSubject {
    request() {
        console.log('Real Subject is requested.');
    }
}

class Proxy {
    constructor(realSubject) {
        this.realSubject = realSubject;
    }

    request() {
        this.realSubject.request();
    }
}

const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);

proxy.request(); // 输出: Real Subject is requested.