js设计模式有哪些：JS设计模式实战解析，10种常用设计模式详解与应用指南

来源：网络作者：日期：2025-11-15 07:26:30

在JavaScript开发中，设计模式作为解决特定问题的编程经验结晶，已成为提升代码质量的关键要素，本文将深入解析JavaScript中最常用的10种设计模式，从理论到实践，结合具体代码示例，帮助开发者掌握这些提升代码可维护性、可扩展性的利器。

单例模式：确保全局唯一实例

const Singleton = (function() {
    let instance;
    function createInstance() {
        const obj = new Object("Singleton Instance");
        obj.execute = function() {
            console.log("Operation completed");
        };
        return obj;
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

单例模式通过闭包和立即执行函数实现真正的全局唯一实例，避免全局变量污染，特别适用于配置管理、数据缓存等场景。

工厂模式：对象创建的抽象封装

class CarFactory {
    static createCar(type) {
        switch(type) {
            case 'sedan': return new Sedan();
            case 'suv': return new SUV();
            default: throw new Error('Invalid car type');
        }
    }
}
class Sedan {
    drive() { console.log("Sedan driving"); }
}
class SUV {
    drive() { console.log("SUV driving"); }
}

工厂模式将对象创建过程封装，使代码更加解耦，便于扩展新类型，是应对"new"操作符滥用的有效方案。

js设计模式有哪些：JS设计模式实战解析，10种常用设计模式详解与应用指南

观察者模式：实现事件驱动架构

class Subject {
    constructor() {
        this.observers = [];
    }
    subscribe(fn) {
        this.observers.push(fn);
    }
    unsubscribe(fn) {
        this.observers = this.observers.filter(obs => obs !== fn);
    }
    notify(data) {
        this.observers.forEach(fn => fn(data));
    }
}
// 使用示例
const subscription = Subject.subscribe(data => console.log(data));
Subject.notify("Hello Observer");
Subject.unsubscribe(subscription);

观察者模式实现发布-订阅机制，广泛应用于事件处理、状态同步等场景,是构建可扩展应用的核心模式。

策略模式：动态切换算法实现

class Context {
    constructor(strategy) {
        this.strategy = strategy;
    }
    executeStrategy(data) {
        return this.strategy.calculate(data);
    }
}
const strategies = {
    average: data => data.reduce((a, b) => a + b) / data.length,
    max: data => Math.max(...data),
    min: data => Math.min(...data)
};
// 使用示例
const context = new Context(strategies.average);
console.log(context.executeStrategy([1,2,3,4])); // 2.5

策略模式将算法封装为独立对象，使算法可互换,特别适用于需要在运行时选择不同算法的场景。

模块模式：封装私有方法与状态

const Module = (function() {
    let privateVar = 0;
    function privateMethod() {
        privateVar++;
    }
    return {
        publicMethod: function() {
            privateMethod();
            console.log(privateVar);
        }
    };
})();

模块模式利用闭包封装私有成员，实现真正的信息隐藏,是构建可维护模块的最佳实践。

js设计模式有哪些：JS设计模式实战解析，10种常用设计模式详解与应用指南

原型链：实现继承的底层机制

function Parent() {}
Parent.prototype = {
    constructor: Parent,
    parentMethod: function() { console.log("Parent method"); }
};
function Child() {}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.childMethod = function() { console.log("Child method"); };
const child = new Child();
child.parentMethod(); // 继承自Parent
child.childMethod();  // 自身方法

原型链是JavaScript实现继承的核心机制,理解原型链对于掌握ES6类继承同样重要。

组合模式：树形结构的数据处理

class Component {
    add(component) {}
    remove(component) {}
    getChild(index) {}
    operation() {
        console.log("Default operation");
    }
}
class Leaf extends Component {
    operation() {
        console.log("Leaf operation");
    }
}
class Composite extends Component {
    constructor() {
        super();
        this.children = [];
    }
    add(component) { this.children.push(component); }
    operation() {
        console.log("Composite operation");
        this.children.forEach(child => child.operation());
    }
}

组合模式将对象组织成树形结构，统一处理叶子节点和容器节点，适用于文件系统、UI组件等树形结构场景。

适配器模式：解决接口兼容问题

class OldSystem {
    legacyMethod() {
        console.log("Legacy method called");
    }
}
class Adapter {
    constructor() {
        this.oldSystem = new OldSystem();
    }
    newMethod() {
        this.oldSystem.legacyMethod();
        console.log("Adapted to new interface");
    }
}
// 使用示例
const adapter = new Adapter();
adapter.newMethod();

适配器模式使不兼容的接口能够协同工作,是系统集成和第三方库整合的得力助手。

js设计模式有哪些：JS设计模式实战解析，10种常用设计模式详解与应用指南

装饰者模式：动态扩展对象功能

class Component {
    operation() { console.log("Base operation"); }
}
class Decorator extends Component {
    constructor(component) {
        super();
        this.component = component;
    }
    operation() {
        console.log("Decorator before");
        this.component.operation();
        console.log("Decorator after");
    }
}
// 使用示例
const obj = new Component();
const decorated = new Decorator(obj);
decorated.operation();

装饰者模式通过添加责任链动态扩展对象功能，避免继承带来的臃肿，特别适用于权限控制、日志记录等场景。