我目前正在开发PhoneGap应用程序。我有一个相当大的if / else语句,只是简单地将字符串与API响应中的JSON进行比较。减少代码并提高效率的最佳方法是什么?请参阅以下代码:
代码:
current = JSON.stringify( value.main ).replace(/['"]+/g, '');
// strings to compare to currerent weather conditions
var stringSnow = "Snow";
var stringRain = "Rain";
var stringFog = "Fog"
var stringMist = "Mist";
var stringClear = "Clear";
var stringClouds = "Clouds";
var stringHaze = "Haze";
// Update homescreen background
if (stringSnow === current)
{
// console.log("Its Snowing");
$('body').css('background-image', 'url(assets/weatherBG/wall_snow.jpg)');
}
else if (stringRain === current)
{
//console.log("its raining");
$('body').css('background-image', 'url(assets/weatherBG/wall_rain.jpg)');
}
else if (stringMist === current)
{
//console.log("its mist");
$('body').css('background-image', 'url(assets/weatherBG/wall_fog.jpg)');
}
else if (stringFog === current)
{
//console.log("its Foggy");
$('body').css('background-image', 'url(assets/weatherBG/wall_fog.jpg)');
}
else if (stringClear === current)
{
//console.log("its clear");
$('body').css('background-image', 'url(assets/weatherBG/wall_clear.jpg)');
}
else if (stringClouds === current)
{
//console.log("its Cloudy");
$('body').css('background-image', 'url(assets/weatherBG/wall_cloudy.jpg)');
}
else if (stringHaze === current)
{
//console.log("its hazy");
$('body').css('background-image', 'url(assets/weatherBG/wall_cloudy.jpg)')
}
答案 0 :(得分:4)
我使用查找表:
var backgrounds = {
Snow: "wall_snow.jpg",
Rain: "wall_rain.jpg",
// ...
};
然后
var url = backgrounds[current] || "default.jpg";
$('body').css('background-image', 'url(assets/weatherBG/' + url + ')');
在查找表不起作用的情况下,switch
语句有时是一个不错的选择。在JavaScript中,switch
与if
/ else
具有===
比较,只是语法不同(案例标签甚至可以是表达式)。
答案 1 :(得分:1)
使用多个else / if语句的替代方法是使用开关。这种语言结构仅适用于"简单"检查,就像你的用例一样。
您可以像下面这样使用它:
df1
另外考虑为模板URL创建一个辅助函数,如下所示:
shape vd_pct vd_type
0 A2 0.78 vd4
1 A1 0.33 vd1
2 B1 0.48 vd2
3 B1 0.38 vd1
4 A2 0.59 vd3
该功能将帮助您减少冗余并提高可读性,如下所示:
switch(current) {
case 'Snow':
$("body").css("background-image", "url(assets/weatherBG/wall_snow.jpg)");
break;
// ...
default:
// Else block
break;
}
希望这会对你有所帮助,编码很快:)。
答案 2 :(得分:0)
您可以创建一个键,然后将电流传递到该对象,如此
current = 'snow';
// strngs to compare to currerent weather conditions
const options = {
snow: 'http://via.placeholder.com/350x150',
rain: 'http://via.placeholder.com/450x250'
}
// you can added your base path after url or added it in the key
// if changes between images
$('body').css('background-image', `url(${options[current]})`);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
答案 3 :(得分:0)
切换语句怎么样?
let image;
switch(current){
case "Snow":
image = "url(assets/weatherBG/wall_snow.jpg)";
break;
case "Rain":
image = "url(assets/weatherBG/wall_rain.jpg)";
break;
// handle other cases like: Fog, Mist, Clear, Clouds, Haze in the same way
default:
image = "url(assets/weatherBG/nothing.jpg)"
}
$("body").css("background-image", image);