前端设计模式之【策略模式】

设计模式之策略模式!

策略模式

策略模式主要注重良好代码的「 编程习惯 」和「 重构意识 」。

一、最常见的场景——(if-else)

function askPrice(tag, originPrice) {

  if(tag === '1') {
    // 处理的业务1
    return 结果
  }

  if(tag === '2') {
    // 处理的业务2
    return 结果
  }
  
  if(tag === '3') {
    // 处理的业务3
    return 结果
  }
  
  if(tag === '4') {
    // 处理的业务4
    return 结果
  }
    
}

分析一下上边应用场景出现的问题:

  • 违背了设计模式中的“ 单一职责原则 ”。一个函数处理了多个功能的代码块,第一,导致除了问题无法快速定位,代码块的代码太零散,如果有函数,直接断点跳到该功能函数中;第二,单一的功能没有被抽离,代码从头一下撸到底。
  • 违背了设计模式中的“ 开放封闭式原则 ”。第一,每次增加一个功能还是要修改原来的函数体,没有实现“对扩展开放,对修改封闭”的效果。第二,不仅自己开发麻烦,而且测试功能的时候会连累其他测试人员,进行一次回归测试要全部把该函数的功能全部测试一遍。

二、策略模式的重构

2.1 单一职责改进

每个函数只负责一个功能实现。

function gongneng1(){
// 处理的业务1
}

function gongneng2(){
// 处理的业务2
}

function gongneng3(){
// 处理的业务3
}

function gongneng4(){
// 处理的业务4
}

改进优点:

  • 定位 bug 精准 —— 断点直接知道逻辑中那个函数出现了问题。
  • 函数的复用 —— 每个功能函数都可以进行复用,不会出现整块代码的赋值粘贴。
  • 最大程度的对该函数的功能进行了最大程度的解耦。

2.2 开放封闭式原则改造

我们有新的功能需要添加到该函数中,一般我们先创建该功能函数,然后加到判断函数中去,这样做,修改了 if-else 的函数体,违背了“ 对扩展开放,对修改封闭 ”的效果。

其实在 if_else 函数中,完成的功能就是不同 功能标签不同功能 之间的映射。我们在完成映射功能的同时也不改变代码的结构—— 对象映射

1、将单个的功能写到对象中去。

const Processor = {
    gongneng1:function(){
        //业务一
    }
    gongneng2:function(){
        //业务二
    }
    gongneng3:function(){
        //业务三
    }
	gongneng4:function(){
        //业务四
    }
}

2、然后将标签与功能对应上(映射)。

function yingshe(tag) {
  return Processor[tag]()
}

3、新增加功能扩展

Processor.gongneng5 = function(){
	// 扩展的新功能
}

这样写完新功能代码之后,老功能的测试代码完全不用全部测试,而是只测试新功能就可以了。代码瞬间变的容易阅读。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章