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';
或者你可以創建另一個物件來存儲按鈕名稱,就像圖片路徑一樣。
