Избавиться от циклов if

210

22 апреля 2018, 22:31

Проверяю мой класс games на название игры. Проверку делаю циклом if, но игр будет около 30 и что 30 циклов if делать? Не правильно же. Решить мою проблему?

  var game_name = document.getElementsByClassName("games")[0].innerHTML;
    if(game_name === 'games1'){
        games1();
    }
    if(game_name === 'games2'){
        games2();
    }
    if(game_name === 'games3'){
        games3();
    }

Answer 1

switch(game_name) {
  case "game1":
    game1();
    break;
  case "game2":
    game2();
    break;
...
}

Answer 2

Может лучше массив функций?

//Массив функций 
var games = [ 
  function() { console.log("игра 0"); },  
  function() { console.log("игра 1"); },  
  function() { console.log("игра 2"); } 
]; 
//Выбор игры 
var game = prompt("Введите id игры (0 ... "+games.length+")"); 
 
//Проверить игру на существование 
try { 
  games[game](); 
} 
// Вывести сообщение при исключении 
catch 
{ 
  console.log("Такой игры нет"); 
}

Answer 3

Судя по тому, что у вас все фунции игр лежат в глобальной области видимости, и названия совпадают с именами функций, проще всего вызвать функцию по имени в глобальном объекте(window).

var game_name = ...;
var game = window[game_name];
if (game) game();
else console.error('Unknown game', game_name);

Answer 4

Спасибо, почитал документацию. Нашел оптимальное

var games = {
    'game1': game1,
    'game2': game2,
    'game3': game13
};

games[game_name]();

Answer 5

var game_name = document.querySelector(".games").textContent.trim(); 
(this[game_name] || $noop)();  
 
function game3() { console.log('Привет! Я - функция game3, и я только что выполнилась.'); } 
function $noop() {};

<div>Элемент может содержать вложенные. Поэтому, для получения текстового содержимого, используйте свойство <b>textContent</b>, а не innerHTML</div> 
<div class="games" style="width: 100px; line-height: 2em; margin-top: 0.5em; padding: 0 10px; border: 1px solid #ccc;"> 
  game3 
  <img src="https://cdn.sstatic.net/Sites/ru/img/favicon.ico" style="margin-left: 10px; vertical-align: middle; "> 
</div>