【面试题】什么是策略模式？用了策略模式之后，再也不用写那么多 if else 了，真香-CSDN博客

本文链接：https://blog.csdn.net/2401_84438654/article/details/138363642

本文介绍了策略模式在前端面试中的应用，通过计算员工工资的示例展示了模式的使用，以及如何从第一版的if-else结构优化到策略模式，最后提到分享的HTML面试题资源。

摘要由CSDN通过智能技术生成

给大家推荐一个实用面试题库

1、前端面试题库（面试必备）推荐：★★★★★

地址：web前端面试题库

前言

从我个人理解来看，设计模式其实就藏在我们平时的代码中，只是有人把它们提、炼出来，赋予了一些专业的名词和定义，下面给大家介绍一个日常项目开发中非常实用的设计模式，也就是策略模式。

策略模式的定义

先来看下策略模式的定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

简单来说就是有多种选择，然后一般只会选择一种。从代码的角度来说就是，定义一系列的if和elseif，然后只会命中其中一个。

举个例子

话不多说，直接来看例子，比如我们需要计算员工工资，员工工资计算规则如下：

高级工：时薪为25块/小时
中级工：时薪为20块/小时
初级工：时薪为15块/小时

按每天10小时的工作时长来算。

一、第一版实现：

const calculateSalary = function (workerLevel, workHours = 10) {
    if (workerLevel === 'high') {
        return workHours * 25
    }
    if (workerLevel === 'middle') {
        return workHours * 20
    }
    if (workerLevel === 'low') {
        return workHours * 15
    }
}
console.log(calculateSalary('high')) // 250
console.log(calculateSalary('middle')) // 200

这段代码具有明显的缺点：

calculateSalary函数庞大，有许多的if else语句，这些语言需要覆盖所有的逻辑分支
calculateSalary函数缺乏弹性，如果新增一种员工等级higher，需要修改calculateSalary函数的内部实现，违反开放——封闭原则。
算法的复用性差

二、第二版实现（函数组合）：

当然，我们可以使用函数组合的方式重构代码，把每一个if中的逻辑单独抽离成一个函数。

const workerLevelHigh = function (workHours) {
    return workHours * 25
}

const workerLevelMiddle = function (workHours) {
    return workHours * 20
}
const workerLevelLow = function (workHours) {
    return workHours * 15
}

const calculateSalary = function (workerLevel, workHours = 10) {
    if (workerLevel === 'high') {
        return workerLevelHigh(workHours)
    }
    if (workerLevel === 'middle') {
        return workerLevelMiddle(workHours)
    }
    if (workerLevel === 'low') {
        return workerLevelLow(workHours)
    }
}
console.log(calculateSalary('high', 10)) // 250
console.log(calculateSalary('middle', 10)) // 200

这样会提高算法的复用性，但这种改善十分有限，calculateSalary函数依旧庞大和缺乏弹性。