js常用设计模式：JavaScript常用设计模式解析

JavaScript是一门灵活且强大的编程语言，其设计模式在现代前端开发中扮演着至关重要的角色，设计模式是解决特定问题的可复用解决方案，它们帮助开发者编写更清晰、可维护、可扩展的代码，本文将介绍JavaScript中常用的几种设计模式，包括它们的实现方式、适用场景以及实际应用示例。

面向对象设计模式

单例模式（Singleton Pattern）

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

实现方式：通过闭包和立即执行函数表达式（IIFE）实现。

示例代码：

const Singleton = (function() {
    let instance;
    function createInstance() {
        const obj = new Object();
        obj.name = "Singleton";
        obj.getName = function() {
            return this.name;
        };
        return obj;
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

应用场景：配置管理、全局缓存、数据库连接池等。

工厂模式（Factory Pattern）

定义：使用一个工厂函数根据输入参数返回不同类型的对象。

实现方式：通过函数返回对象或类的实例。

示例代码：

function createAnimal(type) {
    let animal;
    if (type === 'dog') {
        animal = new Dog();
    } else if (type === 'cat') {
        animal = new Cat();
    }
    return animal;
}

应用场景：对象创建逻辑复杂时,如创建不同类型的UI组件。

原型模式（Prototype Pattern）

定义：通过共享原型对象来实现对象的创建和继承。

实现方式：利用JavaScript的原型链。

示例代码：

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const dog = new Dog("Buddy");
dog.speak(); // 输出：Buddy makes a noise.

应用场景：继承和原型链操作,如类库扩展。

函数式设计模式

模块模式（Module Pattern）

定义：将代码封装在一个函数中,返回需要暴露的对象。

实现方式：利用闭包隐藏私有变量和方法。

示例代码：

const Module = (function() {
    let privateVar = "Private";
    function privateMethod() {
        console.log("Private method called");
    }
    return {
        publicMethod: function() {
            console.log(privateVar);
            privateMethod();
        }
    };
})();

应用场景：封装私有变量和方法,避免全局污染。

观察者模式（Observer Pattern）

定义：定义对象间的一对多依赖关系，当一个对象状态改变时,所有依赖者会收到通知。

实现方式：使用事件监听或发布-订阅模式。

示例代码：

const events = {
    listeners: {},
    on(eventName, callback) {
        if (!this.listeners[eventName]) {
            this.listeners[eventName] = [];
        }
        this.listeners[eventName].push(callback);
    },
    emit(eventName, data) {
        if (this.listeners[eventName]) {
            this.listeners[eventName].forEach(callback => callback(data));
        }
    }
};
events.on('customEvent', data => console.log('Event received:', data));
events.emit('customEvent', 'Hello World');

应用场景：事件处理、状态同步、实时数据更新。

组合模式（Composite Pattern）

定义：将对象组合成树形结构，以实现部分-整体的操作。

实现方式：定义一个包含叶子节点和容器节点的组件类。

示例代码：

class Component {
    constructor(name) {
        this.name = name;
    }
    add(component) {
        throw new Error("Method not implemented");
    }
    remove(component) {
        throw new Error("Method not implemented");
    }
    getChild(index) {
        throw new Error("Method not implemented");
    }
    operation() {
        throw new Error("Method not implemented");
    }
}
class Leaf extends Component {
    operation() {
        return `Leaf ${this.name} operation`;
    }
}
class Composite extends Component {
    constructor(name) {
        super(name);
        this.children = [];
    }
    add(component) {
        this.children.push(component);
        return this;
    }
    operation() {
        let result = `Composite ${this.name} operation`;
        for (let child of this.children) {
            result += `\n${child.operation()}`;
        }
        return result;
    }
}
const leaf1 = new Leaf("A");
const leaf2 = new Leaf("B");
const composite = new Composite("Group");
composite.add(leaf1).add(leaf2);
console.log(composite.operation());

应用场景：树形结构数据处理，如文件系统、UI组件嵌套。

其他常用设计模式

装饰者模式（Decorator Pattern）

定义：动态地给对象添加功能,而不改变原对象。

实现方式：通过函数或类包装对象。

示例代码：

function Component() {}
Component.prototype.operation = function() {
    return "Component operation";
};
function Decorator(base) {
    this.base = base;
}
Decorator.prototype.operation = function() {
    return `Decorator: ${this.base.operation()}`;
};
const component = new Component();
const decorated = new Decorator(component);
console.log(decorated.operation());

应用场景：权限控制、日志记录、性能优化。

策略模式（Strategy Pattern）

定义：定义一系列算法，将它们封装在独立的类中,使得它们可以互相替换。

实现方式：使用对象或类存储不同算法。

示例代码：

const strategies = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b
};
class Calculator {
    constructor(strategy) {
        this.strategy = strategy;
    }
    execute(a, b) {
        return this.strategy(a, b);
    }
}
const calculator = new Calculator(strategies.add);
console.log(calculator.execute(5, 3)); // 输出：8

应用场景：算法切换、条件判断、多种处理方式。

设计模式是JavaScript开发中的重要工具，它们帮助开发者写出更优雅、可维护的代码，虽然JavaScript是一门灵活的语言，设计模式的实现方式可能与传统面向对象语言有所不同，但核心思想依然适用，掌握这些设计模式，能够让你在开发中更加得心应手,写出高质量的代码。

无论是面向对象设计模式、函数式设计模式，还是其他高级设计模式，理解它们的思想并灵活运用，才是真正的目标,希望本文能帮助你更好地理解和应用JavaScript中的设计模式。