在if / else语句中使用多个'elseif'会有什么更好的方法

时间:2018-04-25 17:11:18

标签: javascript jquery

我目前正在开发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)')
    }

4 个答案:

答案 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中,switchif / 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);