前端设计模式——01策略模式

前端设计模式——策略模式

策略这个词应该怎么理解，打个比方说，我们出门的时候会选择不同的出行方式，比如骑自行车、坐公交、坐火车、坐飞机、坐火箭等等，这些出行方式，每一种都是一个策略。

策略模式的定义：

定义一系列算法，把他们一个个封装起来，并且他们可以相互替换。 或许这样说比较难以理解，举个例子来说，比如你看中的一件衣服，今天打八折，明天打七五折，后天又打八折，这只是算法的不同，也就是策略的不同。

策略模式的应用：

举个例子：某个公司需要设计一个算法为公司的员工计算年终奖金，绩效为S的人有4倍工资，绩效为A的人3倍工资，B的人是2倍。首先我们使用常规的方法实现：

let calculateBonus = function (level,salary) {
    
    
    if(level === 'S')
    {
    
    
        return salary*4;
    }
    if(level === 'A')
    {
    
    
        return salary*3;
    }
    if(level === 'B')
    {
    
    
        return salary*2;
    }
}
calculateBonus('S',10000) //输出40000
calculateBonus('B',10000) //输出20000

这种做法缺点就是可扩展性不高，如果公司增加新的考核方案就需要更改代码实现。接着我们使用策略模式实现：

let strategies = {
    
    
    "S" :function(salary) {
    
    
        return salary*4
    },
    "A" :function(salary) {
    
    
        return salary*3
    },
    "B" :function(salary) {
    
    
        return salary*2
    },
    "C" :function(salary) {
    
    
        return salary*1
    },
}
// 引用
let calculateBonus = function (level,salary) {
    
    
    return strategies[level](salary);
}
calculateBonus('S',20000)//输出80000

这样的话就将算法的使用和实现分离开了，在真正的项目中，可以使用json文件或者config文件配置策略。

实际上好多优秀的框架的设计都使用了这种模式，比如Element当中的表单验证，感兴趣的同学可以拜读element的源码。
https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue

如果你觉得这篇文章对你有帮助的话，欢迎关注点赞收藏三连。。