当前位置: 首页 > Web前端 > JavaScript

策略模式在前端的应用

时间:2023-03-27 00:21:11 JavaScript

策略模式定义了一系列的算法,将它们一个一个封装起来,让它们相互替代。策略模式一般分为策略类(封装具体算法,负责策略的具体逻辑计算)+环境类(接收用户请求,将请求委托给某个策略),将算法的使用和实现分开算法,并消除了大量的条件分支语句。在具体的应用中,我们经常会遇到基于状态不同的处理逻辑。通常使用if-else来处理,或者switch。但是大量的业务逻辑和状态判断被封装在一起,功能显得冗余和凌乱。我应该怎么办?以超市打折场景为例:价格类型为“预售价”时,满100-20,满100减10%;当价格类型为“大促价”时,订单满100-30可享20折,低于100当价格类型为“退货价”时,200-50不叠加。当价格类型为“尝鲜价”时,直接给予50%的折扣。首先将各个状态的逻辑处理封装成一个函数(对应策略类)。然后判断类型,选择一个处理函数(对应环境类)。//处理预热价格functionprePrice(originPrice){if(originPrice>=100){returnoriginPrice-20}returnoriginPrice*0.9}//处理大卖价格functiononSalePrice(originPrice){if(originPrice>=100){returnoriginPrice-30}returnoriginPrice*0.8}//处理返回价格functionbackPrice(originPrice){if(originPrice>=200){returnoriginPrice-50}returnoriginPrice}//处理新鲜价格functionfreshPrice(originPrice){originPrice*0.5}//处理新用户价格functionnewUserPrice(originPrice){if(originPrice>=100){returnoriginPrice-50}returnoriginPrice}functionaskPrice(tag,originPrice){//处理预热价格if(tag==='pre'){returnprePrice(originPrice)}//处理大减价if(tag==='onSale'){returnonSalePrice(originPrice)}//处理退货价格if(tag==='back'){returnbackPrice(originPrice)}//处理尝鲜价格if(tag==='fresh'){returnfreshPrice(originPrice)}//处理新价格eif(tag==='newUser'){返回newUserPrice(originPrice)}}不过代码看起来还是很冗余,没有实现“对扩展开放,对修改关闭”的效果。在判断类型的时候,还是通过多个if-else语句来实现与处理函数的映射关系,那么在JS中,有没有什么方法可以帮助我们理清映射关系,又不破坏代码的灵活性呢?答案是对象映射!将逻辑处理函数封装在一个对象中//定义一个查询处理器对象constpriceProcessor={pre:originPrice=>{if(originPrice>=100){returnoriginPrice-20;}返回原始价格*0.9;},onSale:originPrice=>{if(originPrice>=100){returnoriginPrice-30;}返回原始价格*0.8;},返回:originPrice=>{if(originPrice>=200){returnoriginPrice-50;}返回产地,价格;fresh:originPrice=>{returnoriginPrice*0.5;},};当需要某个类型对应的处理函数时,可以直接调用对象方法functionaskPrice(tag,originPrice){returnpriceProcessor[tag](originPrice)}如果要新增加策略,只需要向对象添加一个方法priceProcessor.newUser=function(originPrice){if(originPrice>=100){returnoriginPrice-50;}returnoriginPrice;}总结:在日常使用中,如果有大量的状态判断和逻辑处理,可以采用策略模式,将状态判断和逻辑处理拆分,剔除大量的条件分支语句,实现原理“对扩展开放,对修改关闭”。不要成为一个如果否则的人!