JS-策略设计模式

设计模式:针对特定问题提出的简洁优化的解决方案

  • 一个问题有多种处理方案,而且处理方案随时可能增加或减少
  • 比如:商场满减活动
    • 满50元减5元
    • 满100元减15元
    • 满200元减35元
    • 满500元减100元
// 满减金额计算函数
function count(money, type) {
    if (type == '50_5') {
        return money - 5;
    } else if (type == '100_15') {
        return money - 15;
    } else if (type == '200_35') {
        return money - 35;
    } else if (type == '500_100') {
        return money - 100;
    } else {
        return money;
    }
}

console.log(count(60, '50_5')); // 55
console.log(count(101, '100_15')); // 86
  • 商场活动中,若需要增加或减少满减方案,则需要修改count函数
    • 代码封装应该遵循“开闭原则”,此时就应该使用策略设计模式
      • 可以将满减方案存储在对象中,使用闭包函数存储数据(满减方案)
      • 并且在闭包函数中,实现添加或移除折扣方案的方法
let count = (function() {
    // 满减折扣方案
    let countObj = {
        '50_5': function(money) { return money - 5 },
        '100_15': function(money) { return money - 15 },
        '200_35': function(money) { return money - 35 },
        '500_100': function(money) { return money - 100 }
    }
    // 金额计算
    function count(money, type) {
        if (countObj[type]) { // 折扣存在则使用折扣满减
            return countObj[type](money);
        }
        return money;
    }
    // 给count函数对象添加add方法(新增方案)
    count.add = function(type, fn) {
        countObj[type] = fn;
    }
    // 给count函数对象添加remove方法(移除方案)
    count.remove = function(type) {
        delete countObj[type];
    }
    return count;
})();

// 使用折扣计算金额
console.log(count(60, '50_5')); // 55
console.log(count(100, '100_15')); // 85
console.log(count(600, '500_100')); // 500

// 添加折扣方案
count.add('600_120', function(money) { return money - 120 });
console.log(count(600, '600_120')); // 480

// 移除折扣方案
count.remove('50_5');
console.log(count(60, '50_5')); // 60

你可能感兴趣的:(JavaScript,javascript,设计模式,前端)