前端学设计模式-策略模式（前端策划）

本文来自我的小伙伴晨慌，全网首发

读《大话设计模式》-简单工厂模式总结

策略模式是一种定义一系列算法的方法，从概念上来看，所有这些算法完成的都是相同的工作，只是实现不同，

他可以以相同的方式调用所有的算法，减少了各种算法类与使用算法类之间的耦合【DPE】

网上归纳

主要解决： 在有多种算法相似的情况下，使用 if...else 所带来的复杂和难以维护。

何时使用： 一个系统有许多许多类，而区分它们的只是他们直接的行为。

优点： 1、算法可以自由切换。 2、避免使用多重条件判断。 3、扩展性良好。

缺点： 1、策略类会增多。 2、所有策略类都需要对外暴露。

使用场景：

1、如果在一个系统里面有许多类，它们之间的区别仅在于它们的行为，那么使用策略模式可以动态地让一个对象在许多行为中选择一种行为。

2、一个系统需要动态地在几种算法中选择一种。

3、如果一个对象有很多的行为，如果不用恰当的模式，这些行为就只好使用多重的条件选择语句来实现。

注意事项： 如果一个系统的策略多于四个，就需要考虑使用混合模式，解决策略类膨胀的问题

JavaScript中如何运用策略模式呢？

下面我引用《大话设计模式》的例子，用前端JavaScript来简答实现

例： 做一个商场收银软件，营业员根据客户所购买商品的单价和数量，向客户收费。

扩展：增加打折，增加满减，返利收费

//普通模式
function CashSuper(textPrice,textNum,type){
  switch(type){
      1://正常
      	return textPrice * textNum;
      2://打八折
      	return textPrice * textNum * 0.8;
      3://满减
        ...
    } 
}
/*客户端*/
CashSuper(1,1,1);

/*----------------------------------------------------------*/

//策略模式
function CashSuper(textPrice,textNum){
  this.textPrice = textPrice;
  this.textNum = textNum;
  this.sum = 0;
}
//获取值
CashSuper.prototype.getResult = function(){return this.sum;}  
//设置策略方法
CashSuper.prototype.setStategy = function(stategy){
  if(typeof strategy != 'function'){
    console.err('argument[2]必须为方法')
    return ;
  }
  this.sum = strategy(textPrice,textNum)
}  
//正常策略
function CashNormal(){
  return function(textPrice,textNum){
    return textPrice*textNum;
  }
}
function CashReturn(){...}
//打折策略
function CashRebate(rate){
  return function(textPrice,textNum){
    return textPrice*textNum*rate;
  }
}

/*客户端*/
var a = new CashSuper(10,5);
a.setStategy(CashNormal());
a.getResult() //50

a.setStategy(CashRebate(0.8);//0.8折
a.getResult() //4    

//借助工场方法 返回策略
function getStrategy(type){
  switch(type){
    case 1:
      return CashNormal
  }
}

上述方法中，

普通模式存在这些问题

1. 扩展性差,添加功能都要改动CashSuper，如果加85折，也要在上面添加type。

2. 性能上不佳,每增加一次功能都要添加一次判断。

借用策略模式，我们可以随意地切换不同的算法，不同策略，只要创建一个方法工厂实现，扩展性好，且少了一些没必要的if判断，性能要优于普通模式

倘若策略过多，我们还可以使用工厂模式来划分我们的策略。