前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
什么是策略模式
策略（Strategy）模式的定义：该模式定义了一系列算法，并将每个算法封装起来，使他们可以相互替换，且算法的变化不会影响使用算法的客户。
要解决的问题
假设我们需要写一个计算年终奖的函数，我们的代码可能长这样
const bonus = function (level, salary) { if (level === "S") { return salary * 1.1; } if (level === "A") { return salary * 1; } if (level === "B") { return salary * 0.9; } };
这样写代码会有一些问题：
- 如果情况较多，判断逻辑也会很多，代码会比较乱
- 违反了设计原则的开发封闭原则（对拓展开放，对修改封闭），增加逻辑必须修改原函数
我们可以借助策略模式进行优化。
单一职责改造
上述代码每一个条件中的 return 语句 是一个算法，我们可以将每个算法封装成一个函数
const levelS = (salary) => { return salary * 1.1; }; const levelA = (salary) => { return salary * 1; }; const levelB = (salary) => { return salary * 0.9; }; const bonus = function (level, salary) { if (level === "S") { return levelS(salary); } if (level === "A") { return levelA(salary); } if (level === "B") { return levelB(salary); } };
这样封装完后，每中计算奖金的算法都被单独抽离，便于维护。但如果有其他情况时，我们依然要向bonus函数里写if语句，我们需要继续优化
开发封闭改造
const levelObj = { S: (salary) => { return salary * 1.1; }, A: (salary) => { return salary * 1; }, B: (salary) => { return salary * 0.9; }, }; const bonus = function (level, salary) { return levelObj[level](salary); };
这样修改后，如果还有D情况，我们就可以这样修改
levelObj.D = (salary)=> { return salary * 0.8; },
可见，策略模式能更好的解决if语句的循环嵌套。
上面每一个算法S，A，B，D内的逻辑不管如何变化，都不会影响bonus的核心逻辑，因此，我们说：策略模式定义了一系列算法，并将每个算法封装起来，使他们可以相互替换，且算法的变化不会影响使用算法的客户。
在vite配置中的使用
假设我们的vite有三个配置文件，一个公用的viteBaseConfig配置，dev模式的viteDevConfig配置，生产模式的viteProdConfig配置。
import { defineConfig } from "vite"; import viteBaseConfig from "./vite.base.config"; import viteDevConfig from "./vite.dev.config"; import viteProdConfig from "./vite.prod.config"; export default defineConfig(({ command, mode, ssrBuild }) => { if (command === "serve") { return { // dev 独有配置 ...viteBaseConfig, ...viteProdConfig }; } else { // command === 'build' return { // build 独有配置 ...viteBaseConfig, ...viteDevConfig }; } });
上述代码使用if语句来根据不同模式返回不同的配置项，我们根据刚才所学知识进行优化下。
单一职责改造
//.... export default defineConfig(({ command, mode, ssrBuild }) => { const build = () => { // Object.assign中的{}是为了防止viteBaseConfig被修改。 Object.assign({}, viteBaseConfig, viteProdConfig) }, const serve = () => { // Object.assign中的{}是为了防止viteBaseConfig被修改。 Object.assign({}, viteBaseConfig, viteDevConfig) }, if (command === "serve") { return build() } else { // command === 'build' return serve(); } });
Object.assign() Object.assign() 方法将所有可枚举属性从一个或多个源对象复制到目标对象，返回修改后的对象。 注意：该方法会修改源对象！
const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget === target); // expected output: true
开发封闭改造
const envResolver = { build: () => Object.assign({}, viteBaseConfig, viteProdConfig), serve: () => Object.assign({}, viteBaseConfig, viteDevConfig), }; export default defineConfig(({ command, mode, ssrBuild }) => { return envResolver[command](); });
前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
