JavaScript如何实现策略模式

这篇文章主要介绍了JavaScript如何实现策略模式的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现策略模式文章都会有所收获，下面我们一起来看看吧。

创新互联公司是一家专业提供威县企业网站建设,专注与网站制作、成都网站建设、H5页面制作、小程序制作等业务。10年已为威县众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

策略模式：定义了一系列家族算法，并对每一种算法单独封装起来，让算法之间可以相互替换，独立于使用算法的客户。

通常我并不会记得“牛顿***定律”的具体内容，所以我也难保证我会对这个定义记得多久……用FE经常见到的东西来举个例子说明一下：

$("div").animation({left: '50px'},1000,'easein');  $("div").animation({left: '50px'},1000,'linear');  $("div").animation({left: '50px'},1000,'swing');  //看***三个关于动画效果的参数  //Jquery文档总提到easing(第三个参数):要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

我们在对元素设置动画的缓动效果，实际就是策略模式的一种实现。这样的缓动算法跟我们使用Jquery的人来说没有直接关系，假如我的项目中某个动 画需要一种新的算法效果，那么我们再去开发一个插件就好了。反之，如果Jquery没有提供这样一种插件机制，那针对需求变化难不成要去改动Jquery 的源码吗？

我先来模拟一下策略模式的基本代码形态：

                            function ConcreteStrategyA(){             this.AlgorithmInterface = function(){                 console.log("算法A");             }         }          function ConcreteStrategyB(){             this.AlgorithmInterface = function(){                 console.log("算法B");             }         }          function ConcreteStrategyC(){             this.AlgorithmInterface = function(){                 console.log("算法C");             }         }          //Context,用一个createStrategy来配置，维护一个对Strategy对象的引用          function Context(strategy){             this.strategy = strategy;             this.ContextInterface = function(){                 strategy.AlgorithmInterface();             }          }          //应用         var context1 = new Context(new ConcreteStrategyA());         context1.ContextInterface();          var context2 = new Context(new ConcreteStrategyB());         context2.ContextInterface();          var context3 = new Context(new ConcreteStrategyC());         context3.ContextInterface();       

通常来说，具体的某一种算法必须保证实现了某一些接口或者继承某个抽象类，才不会发生类型错误，在javascript中去实现接口、抽象类、继承等特性要费一些周章，所以我这个例子是不严谨的，仅从最简单的实现方式着手。

具体实现一个商场收银系统：包括一个单独js文件，和一个具体的实现html文件

//因为要用到数值验证，所以...这里用的是jquery2.1里面的isNum function isNum(obj){     return obj - parseFloat(obj)>=0; } //算法A，没有活动，正常收费 function ConcreteStrategyA(){     this.AlgorithmInterface = function(money){         return money;     } } //算法B，满300减100 function ConcreteStrategyB(MoneyCondition,MoneyReturn){     this.MoneyCondition = MoneyCondition,     this.MoneyReturn    = MoneyReturn;      this.AlgorithmInterface = function(money){         var result=money;         if(money>=MoneyCondition){             result = money - Math.floor(money/MoneyCondition)*MoneyReturn;         }         return result;     } } //算法C，打折 function ConcreteStrategyC(moneyRebate){     this.moneyRebate = moneyRebate;     this.AlgorithmInterface = function(money){         return money*this.moneyRebate;     } }  //Context,用一个createStrategy来配置，维护一个对Strategy对象的引用 //这里将算法相关的从客户端剥离出来，简单工厂模式 function Context(type){     this.strategy = null;     switch(type){         case "a":             this.strategy = new ConcreteStrategyA();             break;         case "b":             this.strategy = new ConcreteStrategyB("300","100");             break;         case "c":             this.strategy = new ConcreteStrategyC("0.8");             break;     }      this.ContextInterface = function(money){         if(!isNum(money)){             money = 0;         }         return this.strategy.AlgorithmInterface(money);     }  }

HTML部分：

                          .block {             padding:5px 0;             border-bottom:1px solid #ccc;         }         .menu {margin:10px auto;text-align: center;}                     单价(RMB)：数量：计算方式：正常收费满300减100打8折合计：