前端设计模式-策略模式

news/2024/10/29 2:25:27/

什么是策略模式

策略(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};}
});

具体可参考这篇文章:https://juejin.cn/post/7172009616967942175

上述代码使用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]();
});

http://www.ppmy.cn/news/597877.html

相关文章

东北方言集锦T

Ttā[他爹] tā diē 旧时妇女结婚生子后,对人称自己的丈夫。[例]张大嫂一边喂孩子,一边对张铁匠说:“~,天都啥时辰了,你还不出去,还磨蹭啥?”tāi[胎歪] tāiwai 可叠成“胎胎歪歪”…

喻世明言 第三十一卷 闹阴司司马貌断狱(讲三国是如何开始的)

扰扰劳生,待足何时是足?据见定、随家丰俭,便堪龟缩。得意浓时休进步,须防 世事多番覆。枉教人、白了少年头,空碌碌。 谁不愿,黄金屋?谁不愿,千锺粟?算五行、不是这般题目…

千里走单骑·故事简介

建安五年(公元二百年)曹操作了丞相,更不把皇帝放在眼里,国舅董承自从看了皇帝写在衣带上的诏书,又苦无对策除掉曹操,心里愤慨、忧虑,便病倒了。献帝让太医吉平来给他治病。吉平看了皇帝密诏,决心要除掉曹操。两人便合议设下了计谋。不料隔墙有耳,董承的家奴秦庆童因与…

庞德致曹操:关于战胜关羽的可行性报告

敬爱的魏王千岁: 您好! 我是庞德——就是您一直记不住名字,老是称呼我“那个谁……那个绿脸的谁”那个。首先,我对自己今天上午的表现向您道歉:在您询问谁敢协助于禁将军去战关羽的时候,我从最后面…

一)关羽和赵云在敌人心目中的对比

一)关羽和赵云在敌人心目中的对比 1,关羽有一次被敌人称做英雄,庞德。赵云有五次被敌人称做英雄,曹操、李典、夏侯懋、郭淮、万政。 2,《关云长单刀赴会》中,“吕蒙、甘宁见云长手提大刀,亲握鲁…

三国41

新过五关斩六将[more] 关羽杀颜良、斩文丑,又领兵攻取汝南。班师回来,心中盘算:“这次出征可算功勋显赫,那奖金一定很是丰厚……”来到许昌城下,只见城下锣鼓喧天、鞭炮齐鸣,远征军统帅曹操亲自率人前来迎接…

史诗巨作[关云长][高清BD-RMVB/992M][国语/中文字幕]

【影片原名】The Lost Bladesman 【外文别名】”Guan yun chang” – China (original title) 【中文译名】关云长 【出品公司】Shanghai Film Group 【出品年代】2011 年 【上映日期】2011年4月28日 中国 【影片级别】Australia:M (2011) | SingaporeG | Hong Kong:IIB 【IMDB…

关羽和赵云谁更厉害

赵云 ,武艺出众,浑身是胆,有勇有谋,从数个事件中可看出(一)关羽和赵云在敌人心目中的对比。 1,关羽有一次被敌人称做英雄,庞德。赵云有五次被敌人称做英雄,曹操、李典、夏侯懋、郭淮、万政。 2,《关云长单刀…