typescript - 重构 JavaScript 代码中的 switch-case 语句
我如何重构这段代码,以便避免重复使用 dailogObj.image?如果不是第5种情况需要两个赋值,我本会写一个 return 语句。
getDialogData(imageNum): any {
const dailogObj = {
image: '',
buttonName: 'Learn More'
};
switch (imageNum) {
case 1:
dailogObj.image = '../../../assets/images/Red-Image.png';
break;
case 2:
dailogObj.image = '../../../assets/images/blue-image-orgl.png';
break;
case 3:
dailogObj.image = '../../../assets/images/Green-Image-2.png';
break;
case 4:
dailogObj.image = '../../../assets/images/Gold-Image.png';
break;
case 5:
dailogObj.image = '../../../assets/images/green-img-orgl.png';
dailogObj.buttonName = 'Read Her Story';
break;
case 6:
dailogObj.image = '../../../assets/images/Red-Image-2.png';
break;
case 7:
dailogObj.image = '../../../assets/images/Blue-Image-2.png';
break;
case 8:
dailogObj.image = '../../../assets/images/Gold-Image-2.png';
break;
}
return dailogObj;
}
答案#1
你可以将该赋值提取到它自己的条件中,并仅使用数组来设置image属性:
getDialogData(imageNum): any {
const dailogObj = {
image: '',
buttonName: 'Learn More'
};
// Handle the default case if imageNum is not in range [1..9]
if (imageNum >=1 && imageNum <=9) {
// Special treatment of image number 5
if (imageNum == 5) {
dailogObj.buttonName = 'Read Her Story';
}
// If it is in range, pick the right image:
var images =
['../../../assets/imfages/Red-Image.png',
'../../../assets/images/blue-image-orgl.png',
'../../../assets/images/Green-Image-2.png',
'../../../assets/images/Gold-Image.png',
'../../../assets/images/green-img-orgl.png',
'../../../assets/images/Red-Image-2.png',
'../../../assets/images/Blue-Image-2.png',
'../../../assets/images/Gold-Image-2.png'];
dailogObj.image = images[imageNum - 1];
}
return dailogObj;
}
答案#2
images = {
1: '../../../assets/images/Red-Image.png',
2: '../../../assets/images/blue-image-orgl.png',
...
8: '../../../assets/images/Gold-Image-2.png'
};
dailogObj.image = images[imageNum];
dailogObj.buttonName = imageNum == 5 ? 'Read Her Story' : 'Learn More';
或者你可以创建另一个对象来存储按钮名称,就像存储图片路径一样。
