在业务开发中,常遇到复杂的 if-else 判断,使用 if-else 来判断,嵌套过深,会遇到很多问题
- 判断次数很多,影响页面性能
- 需要迭代,需求方增加或修改了判断条件时,需要从新对判断条件进行梳理,及有可能改错
如何使用便捷的方法来处理复杂判断呢。现以一个实际需求为例: 调用领取接口且判断用户是否登陆后,根据4个判断条件,有4种类型的弹窗需要展示,判断条件如下
const resData = {
// 是否领取了卡券
sentNewUserReward: false,
// 是否使用了卡券
usedNewUserReward: false,
// 卡券是否过期
expired: false,
// 是否新用户
newer: true,
};
const { sentNewUserReward, newer, usedNewUserReward, expired } = resData;
需求到手,先用就用 if-else 来实现吧
//判断逻辑
// 已发送 已使用
if (sentNewUserReward && usedNewUserReward) {
console.log('已经领取弹窗');
} else if (sentNewUserReward && !usedNewUserReward && !expired) {
console.log('展示成功领取页');
} else if (sentNewUserReward && !usedNewUserReward && expired && newer) {
console.log('成功领取福利弹窗');
} else if (sentNewUserReward && !usedNewUserReward && expired && !newer) {
console.log('新用户才可以领取弹窗');
} else if (newer) {
console.log('成功领取福利弹窗');
} else {
console.log('新用户才可以领取弹窗');
}
看起来还不难实现,那如果下次迭代,需求方再加一个判断条件,是否加入了队伍,加入了队伍需要判断是否使用卡券、未加入队伍要判断是否是新用户。应该怎么修改这些判断呢。
哎,我抓破头都难想出来怎么写,之前有看到过网上的解决方案,使用表编程来替换 if-else 写复杂的判断。我们来看下怎么实现吧
表编程
先从简单的范例开始,需求:根据输入的数字 1-7 获取周几
getweek(value){
this.dayOfWeek = value;
if(this.dayOfWeek == 1){
this.Week = "星期一";
}else if(this.dayOfWeek == 2){
this.Week = "星期二";
}else if(this.dayOfWeek == 3){
this.Week = "星期三";
}else if(this.dayOfWeek == 4){
this.Week = "星期四";
}else if(this.dayOfWeek == 5){
this.Week = "星期五";
}else if(this.dayOfWeek == 6){
this.Week = "星期六";
}else if(this.dayOfWeek == 0){
this.Week = "星期日";
}
}
使用 if-else 的代码还是格外的多,毫无美感可言。如果加一个需求,需要输出中英文两种星期的文字呢,直接使用表驱动编程来实现吧
不需要输出双语格式的代码
// 使用一个map存起来
let weekdayMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
this.Week = weekdayMap[value];
输出双语格式
let weekdayMap = {
'zh-cn': ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
'en-us': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
};
this.Week = weekdayMap[language][value];
现在继续看最开始的例子,把 4 个条件翻译成一个 key 值,value 存的是一个具体调用的方法,直接调用这个方法即可:
const map = {
a: () => {
console.log('成功领取福利弹窗');
},
b: () => {
console.log('新用户才可以领取弹窗');
},
};
map.a()
现在需要思考如何把 4 个条件转换成 key 值,根据流程图,可得出,每个条件对最终弹窗的影响有 3 种情况:正影响(true)、负影响(false)、无影响(any)。有了这三种状态,再把 4 个条件的排序按照下边顺序固定:sentNewUserReward, usedNewUserReward, expired, newer,得出我们的 key
const mapArray = [sentNewUserReward, usedNewUserReward, expired, newer];
const map = {
'false-any-any-true': () => {
console.log('成功领取福利弹窗');
},
'false-any-any-false': () => {
console.log('新用户才可以领取弹窗');
},
'true-true-any-any': () => {
console.log('已经领取弹窗');
},
'true-false-false-any': () => {
console.log('展示成功领取页');
},
'true-false-true-true': () => {
console.log('成功领取福利弹窗');
},
'true-false-true-false': () => {
console.log('新用户才可以领取弹窗');
}
};
map 的结构完成,现在还需要把 4 个判断条件转换成 map 内 key 的结构:
for (let i = 0; i < mapKeys.length; i++) {
let currentKeyArr = mapKeys[i].split('-').map((item, index) => {
if (item === 'any') return `${mapArray[i]}`;
return item;
});
}
// 输出如下
currentKeyArr==>> [ 'false', 'false', 'false', 'true' ]
currentKeyArr==>> [ 'false', 'false', 'false', 'false' ]
currentKeyArr==>> [ 'true', 'true', 'false', 'false' ]
currentKeyArr==>> [ 'true', 'false', 'false', 'true' ]
currentKeyArr==>> [ 'true', 'false', 'true', 'true' ]
currentKeyArr==>> [ 'true', 'false', 'true', 'false' ]
key 转换完成,优化下代码
function getMapKey(map, mapArray) {
const mapKeys = Object.keys(map);
// 遍历map的keyArr,与MapArray内的值进行对比,如果都相同,停止循环,赋值给执行的函数
for (let i = 0; i < mapKeys.length; i++) {
let currentKeyArr = mapKeys[i].split('-').map((item, index) => {
if (item === 'any') return `${mapArray[i]}`;
return item;
});
const currentArrayStr = currentKeyArr.join('-');
const mapArrayStr = mapArray.join('-');
if (currentArrayStr === mapArrayStr) {
return mapKeys[i];
}
}
}
map[getMapKey(map, mapArray)]();
ok,现在判断条件与每种条件需要执行的方法实现了分离,大部分修改判断条件的需求变更,只需要在 map 做一个更改即可实现。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!