说说JS中常用的设计模式？在实际开发中有什么应用场景吗？

前端设计诗
164 阅读4分钟

常用设计模式

JavaScript中常见的设计模式有很多种，它们是为了解决特定问题而被反复使用和验证的解决方案。这里列举几种常见的设计模式：

  1. 单例模式（Singleton Pattern）：

    • 单例模式确保一个类只有一个实例，并提供全局访问点。在JavaScript中，可以利用闭包和立即执行函数表达式（IIFE）来实现单例模式，例如： 
      const Singleton = (function() {
    let instance;

    function createInstance() {
        // 实例化操作
        return {/* 单例对象的定义 */};
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

  2. 工厂模式（Factory Pattern）：

    • 工厂模式用于创建对象，但不会暴露创建逻辑。它通过定义一个创建对象的接口来实现，可以根据条件返回不同类的实例。 
      function CarFactory() {}

CarFactory.prototype.createCar = function(type) {
    switch (type) {
        case 'SUV':
            return new SUV();
        case 'Sedan':
            return new Sedan();
        default:
            return new Car();
    }
};

  3. 观察者模式（Observer Pattern）：

    • 观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会得到通知并自动更新。在JavaScript中，可以利用发布/订阅模式（Pub/Sub）来实现观察者模式。 
      function ObserverList() {
    this.observers = [];
}

ObserverList.prototype.add = function(obj) {
    return this.observers.push(obj);
};

ObserverList.prototype.notify = function(context) {
    this.observers.forEach(function(observer) {
        observer.update(context);
    });
};

function Subject() {
    this.observers = new ObserverList();
}

Subject.prototype.addObserver = function(observer) {
    this.observers.add(observer);
};

Subject.prototype.notifyObservers = function(context) {
    this.observers.notify(context);
};

  4. 策略模式（Strategy Pattern）：

    • 策略模式定义了一系列算法，将每个算法都封装起来，并且使它们可以互换。客户端可以根据需要选择合适的算法。 
      function Context(strategy) {
    this.strategy = strategy;
}

Context.prototype.executeStrategy = function() {
    return this.strategy.execute();
};

function ConcreteStrategyA() {}
ConcreteStrategyA.prototype.execute = function() {
    // 具体策略A的执行逻辑
};

function ConcreteStrategyB() {}
ConcreteStrategyB.prototype.execute = function() {
    // 具体策略B的执行逻辑
};

  5. 装饰器模式（Decorator Pattern）：

    • 装饰器模式动态地给对象添加额外的职责。它是通过创建包装对象，也就是装饰来包裹真实对象的方式来实现的。 
      function Pizza() {
    this.cost = function() {
        return 10;
    };
}

function ExtraCheese(pizza) {
    let cost = pizza.cost();
    pizza.cost = function() {
        return cost + 2;
    };
}

let pizza = new Pizza();
ExtraCheese(pizza);

console.log(pizza.cost()); // 输出 12

这些设计模式在JavaScript中可以帮助开发者解决复杂问题，提高代码的可维护性、可扩展性和重用性。理解和熟练运用设计模式能够使代码更加结构化、灵活和易于理解。

在实际开发中有什么应用场景吗？

设计模式在实际开发中有很多应用场景，以下是几个常见的例子：

  1. 单例模式：

    • 应用场景：当需要确保系统中只有一个实例存在时，比如全局缓存、全局配置、日志记录器等。在JavaScript中，单例模式经常用于管理全局状态或资源，例如全局的状态管理器。
    • 示例：Redux中的Store就是一个单例，整个应用共享同一个Store状态。

  2. 工厂模式：

    • 应用场景：当需要根据不同条件创建不同对象时，可以使用工厂模式。例如，根据用户类型创建不同的用户对象，或者根据配置文件创建不同的连接器。
    • 示例：在React中，使用工厂模式来创建虚拟DOM元素和组件实例。

  3. 观察者模式：

    • 应用场景：当一个对象的状态变化需要通知其他多个对象，并且这些对象的响应可以动态增加或减少时，可以使用观察者模式。例如，事件系统、UI组件的数据绑定和更新。
    • 示例：在前端开发中，订阅事件、监听数据变化以更新UI是观察者模式的典型应用。

  4. 策略模式：

    • 应用场景：当一个算法可以被多种不同的方式实现，并且需要动态地在不同实现之间切换时，可以使用策略模式。例如，排序算法、表单验证、计算税费等。
    • 示例：在表单验证中，可以根据不同的输入字段选择不同的验证策略。

  5. 装饰器模式：

    • 应用场景：当需要在不改变对象自身的基础上，动态地给对象添加功能时，可以使用装饰器模式。例如，动态添加日志、权限验证、缓存等功能。
    • 示例：在Express框架中，中间件就是一种装饰器模式的应用，通过中间件可以动态地向请求和响应对象添加功能。

这些设计模式能够帮助开发者更好地组织和管理代码，提高代码的灵活性、可维护性和重用性。虽然在JavaScript中并不需要强制使用设计模式，但了解并正确地应用设计模式可以使得代码更加清晰和易于扩展，特别是在大型项目或团队协作中尤为重要。

avatar
文章
阅读
粉丝