常用8种设计模式：定义、JS示例代码、应用场景

原创于 2025-05-06 15:10:01 发布 · 1.2k 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#设计模式 #javascript #开发语言

Javascript理论与实践专栏收录该内容

129 篇文章

订阅专栏

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】

在这里插入图片描述

以下是八种常用的设计模式的定义、JavaScript示例代码以及应用场景：

1. 单例模式 (Singleton)

定义：
确保一个类只有一个实例，并提供一个全局访问点。

JavaScript 示例代码：

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

    sayHello() {
        console.log('Hello from singleton');
    }
}

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

console.log(instance1 === instance2); // true

应用场景：

数据库连接管理。
应用配置设置。

2. 工厂方法模式 (Factory Method)

定义：
定义一个创建对象的接口，但由子类决定要实例化的类是哪一个。

JavaScript 示例代码：

function createVehicle(type) {
    switch (type) {
        case 'car':
            return new Car();
        case 'bike':
            return new Bike();
        default:
            throw new Error('Unknown vehicle type.');
    }
}

function Car() {}
Car.prototype.drive = function() { console.log('Driving a car'); };

function Bike() {}
Bike.prototype.drive = function() { console.log('Riding a bike'); };

应用场景：

当需要根据不同的输入或环境创建不同类型的对象时。
减少代码重复和增加可维护性。

3. 观察者模式 (Observer)

定义：
当一个对象的状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。

JavaScript 示例代码：

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

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

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

应用场景：

实现事件处理系统。
在MVC架构中实现视图与模型之间的通信。

4. 策略模式 (Strategy)

定义：
定义一系列算法，将每个算法封装起来，并使它们可以互换。

JavaScript 示例代码：

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

    executeStrategy(a, b) {
        return this._strategy.doAlgorithm(a, b);
    }
}

const addStrategy = (a, b) => a + b;
const subtractStrategy = (a, b) => a - b;

const context = new Context(addStrategy);
console.log(context.executeStrategy(3, 2)); // 输出 5

应用场景：

支持多种支付方式的电子商务网站。
根据用户偏好选择不同的算法进行数据排序或过滤。

5. 装饰器模式 (Decorator)

定义：
动态地给一个对象添加一些额外的职责。

JavaScript 示例代码：

function coffee() {
    return "Coffee";
}

function sugar(coffeeFunc) {
    return function() {
        return coffeeFunc() + ", Sugar";
    }
}

function milk(coffeeFunc) {
    return function() {
        return coffeeFunc() + ", Milk";
    }
}

let myCoffee = coffee;
myCoffee = sugar(myCoffee);
myCoffee = milk(myCoffee);

console.log(myCoffee()); // 输出 Coffee, Sugar, Milk

应用场景：

动态为类的功能进行扩展。
需要在不修改原始类的情况下增加功能。

6. 适配器模式 (Adapter)

定义：
将一个类的接口转换成客户希望的另一个接口。使得原本由于接口不兼容而不能一起工作的那些类可以协同工作。

JavaScript 示例代码：

class OldCalculator {
    operation(x, y) {
        return x - y;
    }
}

class NewCalculator {
    minus(x, y) {
        return x - y;
    }
}

class Adapter extends OldCalculator {
    constructor() {
        super();
        this.newCalc = new NewCalculator();
    }

    operation(x, y) {
        return this.newCalc.minus(x, y);
    }
}

应用场景：

将第三方API集成到现有系统中。
解决两个不兼容接口的问题。

7. 外观模式 (Facade)

定义：
提供一个统一的接口，用来访问子系统中的一群接口，外观定义了一个高层接口，让子系统更容易使用。

JavaScript 示例代码：

class Facade {
    constructor(subsystem1, subsystem2) {
        this._subsystem1 = subsystem1 || new Subsystem1();
        this._subsystem2 = subsystem2 || new Subsystem2();
    }

    operation() {
        let result = 'Facade initializes subsystems:\n';
        result += this._subsystem1.operation1();
        result += this._subsystem2.operation1();
        return result;
    }
}

应用场景：

提供一个简单的接口来访问复杂系统的功能。
用于简化复杂的API调用。

8. 模板方法模式 (Template Method)

定义：
定义一个操作中的算法骨架，而将一些步骤延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下，重新定义算法中的某些步骤。

JavaScript 示例代码：

class Beverage {
    prepareRecipe() {
        this.boilWater();
        this.brew();
        this.pourInCup();
        this.addCondiments();
    }

    boilWater() {
        console.log('Boiling water');
    }

    pourInCup() {
        console.log('Pouring into cup');
    }

    brew() {} // 抽象方法

    addCondiments() {} // 抽象方法
}

class Coffee extends Beverage {
    brew() {
        console.log('Dripping Coffee through filter');
    }

    addCondiments() {
        console.log('Adding Sugar and Milk');
    }
}