JS与设计模式之------策略模式Strategy(JavaScript设计模式详解：策略模式（Strategy）深度解析)

原创

ithorizon 7个月前 (10-21) 阅读数 27 #后端开发

JS与设计模式之策略模式Strategy

一、引言

在软件开发中，设计模式是一种被反复使用、大多数人认可的、经过分类编目的、代码设计经验的总结。策略模式（Strategy Pattern）是一种行为设计模式，它定义了一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。这种模式让算法的变化自主于使用算法的客户。本文将详细介绍JavaScript中的策略模式，并分析其应用场景和优势。

二、策略模式概述

策略模式首要包含以下几个角色：

策略接口（Strategy）：定义所有拥护的算法的公共接口。

具体策略（Concrete Strategy）：实现策略接口的类，提供具体的算法实现。

环境（Context）：使用策略接口的类，负责维护一个策略实例，并提供一个接口来访问策略的方法。

三、策略模式的实现

以下是一个易懂的JavaScript策略模式实现：


// 策略接口
var Strategy = function() {
    this.calculate = function() {};
};
// 具体策略1
var ConcreteStrategyA = function() {
    Strategy.call(this);
    this.calculate = function(data) {
        return data * 2;
    };
};
// 具体策略2
var ConcreteStrategyB = function() {
    Strategy.call(this);
    this.calculate = function(data) {
        return data + 3;
    };
};
// 环境
var Context = function(strategy) {
    this.strategy = strategy;
    this.setStrategy = function(strategy) {
        this.strategy = strategy;
    };
    this.calculate = function(data) {
        return this.strategy.calculate(data);
    };
};
// 使用策略
var context = new Context(new ConcreteStrategyA());
console.log(context.calculate(10)); // 输出：20
context.setStrategy(new ConcreteStrategyB());
console.log(context.calculate(10)); // 输出：13

四、策略模式的优势

策略模式具有以下优势：

算法可以自主于客户端变化。客户端可以选用需要切换算法。

避免使用多重条件判断语句，尽大概缩减损耗代码可读性。

易于扩展。新增策略时，只需添加新的具体策略类。

符合开闭原则。策略类可以自主于客户端变化，易于维护。

五、策略模式的应用场景

策略模式适用于以下场景：

存在多个相似算法，且算法之间可以互相替换。

算法依赖性于一些数据，这些数据在不同情况下大概出现变化。

需要在不同时间或不同环境下使用不同的算法。

六、JavaScript中的策略模式实例

以下是一个JavaScript中的策略模式实例，用于实现不同类型的促销折扣计算：


// 策略接口
var PromotionStrategy = function() {
    this.calculate = function(price) {};
};
// 具体策略1：无折扣
var NoDiscountStrategy = function() {
    PromotionStrategy.call(this);
    this.calculate = function(price) {
        return price;
    };
};
// 具体策略2：8折优惠
var EightDiscountStrategy = function() {
    PromotionStrategy.call(this);
    this.calculate = function(price) {
        return price * 0.8;
    };
};
// 具体策略3：满减优惠
var FullReductionStrategy = function() {
    PromotionStrategy.call(this);
    this.calculate = function(price) {
        if (price >= 100) {
            return price - 20;
        } else {
            return price;
        }
    };
};
// 环境
var ShoppingCart = function() {
    this.promotionStrategy = null;
    this.setPromotionStrategy = function(strategy) {
        this.promotionStrategy = strategy;
    };
    this.calculateTotalPrice = function(prices) {
        return prices.reduce((total, price) => {
            return total + this.promotionStrategy.calculate(price);
        }, 0);
    };
};
// 使用策略
var cart = new ShoppingCart();
cart.setPromotionStrategy(new NoDiscountStrategy());
console.log(cart.calculateTotalPrice([50, 60, 70])); // 输出：180
cart.setPromotionStrategy(new EightDiscountStrategy());
console.log(cart.calculateTotalPrice([50, 60, 70])); // 输出：144
cart.setPromotionStrategy(new FullReductionStrategy());
console.log(cart.calculateTotalPrice([50, 60, 70])); // 输出：160