【JavaScript设计模式与开发实践】第五章-策略模式

[Kelichao]

策略模式

• 策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

/*
 * 编写一个名为calculateBonus 的函数来计算每个人的奖金数额,需要接收两个参数：
 * 员工的工资数额和绩效考核等级。
 */
var calculateBonus = function( performanceLevel, salary ){

    // 问题是充斥着if语句
    if ( performanceLevel === 'S' ){
        return salary * 4;
    }

    if ( performanceLevel === 'A' ){
        return salary * 3;
    }

    if ( performanceLevel === 'B' ){
        return salary * 2;
    }
};

calculateBonus( 'B', 20000 ); // 输出：40000
calculateBonus( 'S', 6000 ); // 输出：24000

缺点

• calculateBonus 函数比较庞大，包含了很多if-else 语句，这些语句需要覆盖所有的逻辑
  分支。
• calculateBonus 函数缺乏弹性，如果增加了一种新的绩效等级C，或者想把绩效S 的奖金
  系数改为5，那我们必须深入calculateBonus 函数的内部实现，这是违反开放封闭原则的。
• 算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们的选择
  只有复制和粘贴。

改进

• 以json对象的形式除去json

var strategies = {
    "S": function( salary ){
        return salary * 4;
    },
    "A": function( salary ){
        return salary * 3;
    },
    "B": function( salary ){
        return salary * 2;
    }
};


var calculateBonus = function( level, salary ){
    return strategies[ level ]( salary );
};

console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000

实例

• 这段代码如果要增加按键，就要添加else-if语句

 $(document).on("keydown", function(event) {

    if(event.keyCode === 13) {// 回车键
        console.log(13)
    } else if (event.keyCode === 39) {// 向右
        console.log(39)
    } else if(event.keyCode === 37){// 向左
        console.log(37)
    } else if (event.keyCode === 40) {
        console.log(40)
    }
});

改进实例

// 一个个独立的配置项
var codeConfig = {
    "13": function() {
        console.log(13);
    },
    "39": function() {
        console.log(39);
    },
    "37": function() {
        console.log(37);
    },
    "40": function() {
        console.log(40);
    }
}

// 这部分不需要改动，只需要改动配置项
$(document).on("keydown", function(event) {
    if (codeConfig[event.keyCode]) {
        codeConfig[event.keyCode]();
    }
});