Что можно сделать чтобы сократить код?

Question

[Сергей Котов]

Я начинающий javascript программист. Написал небольшой скрипт что-то на подобие голосового ассистента используя Webkit Speech Recognition и speechSynthesis. У меня такое чувство что я как-то все примитивно пишу, и за этого у меня большой код. Хотелось бы узнать мнение знатаков чтобы оптимизировать и сократить код.

var modde = "";
var i;
var marr = ["калькулятор", "дизайн", "попугай", "наоборот", "кто такой"];
var timerId = 0;
var fform = " квадрат";
var mat;

function invert(strpast){
  var newarr = [];
   for(var t = 0; t<strpast.length; t++){
     newarr[t]=strpast[strpast.length - t];
   }
  return newarr.join("");
}

var recognizer = new webkitSpeechRecognition();
recognizer.interimResults = true;
recognizer.lang = 'ru-Ru';

recognizer.onresult = function (event) {
  var result = event.results[event.resultIndex];
  if (result.isFinal) {
    if(modde ==""){
      for(i = 0; i<marr.length; i++){
        if(marr[i]==result[0].transcript){
          modde=result[0].transcript;
          break;
        }
      }
      if(modde !=""){
        speechSynthesis.speak(new SpeechSynthesisUtterance('Выбран режим: ' +modde));
      }
      else{
         speechSynthesis.speak(new SpeechSynthesisUtterance('Чё ты там сказал???'));
      }  
     }
    else if(result[0].transcript =="сбросить"){
      modde ="";
      speechSynthesis.speak(new SpeechSynthesisUtterance('Режим сброшен'));
    }
    else if(result[0].transcript=="повторить"){ 
      speechSynthesis.speak(new SpeechSynthesisUtterance('ты че глухой что-ли? я сказала '+mat));
   }
    else if(modde =="попугай"){
      var pov = "вы сказали" + result[0].transcript;
      speechSynthesis.speak(new SpeechSynthesisUtterance(pov));
    }
    else if(modde =="наоборот"){
      var lol = "Это будет наоборот " + invert(result[0].transcript);
      speechSynthesis.rate=2;
     speechSynthesis.speak(new SpeechSynthesisUtterance(lol));
    }
    else if(modde =="кто такой"){
         speechSynthesis.speak(new SpeechSynthesisUtterance('да пашел ты нахер я тебе чё гугл что ли? я незнаю '+result[0].transcript)); 
    }
    else if(modde =="калькулятор"){ 
      var calc = result[0].transcript;
      var lol = eval(calc);
      mat = lol;
      speechSynthesis.speak(new SpeechSynthesisUtterance('кароче пацан это будет ' + lol + ", ха, я шарю"));
    }
    else if(modde =="дизайн"){
      if(result[0].transcript ==("Красный" + fform) || result[0].transcript ==("красный" + fform)){
         $(".fig").css({"background":"red", "transform":"scale(1)"});
        speechSynthesis.speak(new SpeechSynthesisUtterance("появился новый" + fform + "красного цвета"));
         }
      else if(result[0].transcript ==("зелёный" + fform)){
         $(".fig").css("background", "green");
        speechSynthesis.speak(new SpeechSynthesisUtterance(fform + "покрашен на зелёный цвет"));
         }
      else if(result[0].transcript =="скруглить"){
         $(".fig").css("border-radius", "100%");
        fform = " Круг";
        speechSynthesis.speak(new SpeechSynthesisUtterance("Квадрат был скруглен"));
         }
      else{
        speechSynthesis.speak(new SpeechSynthesisUtterance("Не удалось распознать команду"));
        alert(result[0].transcript);
      }
    }
    else{
      speechSynthesis.speak(new SpeechSynthesisUtterance('Значение не пуста'));
    }
    $("#start").text("Нажмите на кнопку");
  } else {
    console.log('Промежуточный результат: ', result[0].transcript);
  }
};
$("#listen").click(function(){
   $("#start").text("слушаю....");
  recognizer.start();
  console.log(recognizer);
});

https://codepen.io/Liqrizz/pen/zXaxqo?editors=0010

Answer 1

[Рональд Макдональд]

var lol = eval(calc);
      mat = lol;

Почему бы не:
mat = eval(calc);
? Дальше-то эта переменная всё равно не юзается. И замените 9 else if на один switch.

Ну и имена переменных неинформативны.

Comments

[Сергей Котов]

да я тоже так подумал, Возможно я задам глупый вопрос, но можно ли это все сделать без операторов ответвлений? как то объекты создать. Или какой нибудь более динамичный подход

[Рональд Макдональд]

Сергей Котов, кстати, в большинстве случаев можно вообще не создавать переменную, а передавать функции SpeechSynthesisUtterance текст прямо так.

По динамике - это надо поближе рассмотреть код, а мне ле-е-ень.

Answer 2

[Pavel Pikat]

Нет ничего плохого в том, что писать код по-простому и, как говорится, verbose. Это делает его более потнятным и читабельным. С другой стороны, у вас проблемы с читабельностью из-за недостающих пробелов, использования одинарных и двойных кавычек одновременно, == вместо === и т.д. Советую поставить плагин а-ля JSLint/TSLint который бы подсвечивал все косяки в соответсвии с общепринятыми нормами. Так вы научитесь писать более чистый код.

По структуре я бы отметил чрезмерное использование else/if. Посмотрите где можно заменить на switch. Также, конструкцию

speechSynthesis.speak(new SpeechSynthesisUtterance(fform + "покрашен на зелёный цвет"));

можно вынести в отдельную функцию

function speak(message) {
speechSynthesis.speak(new SpeechSynthesisUtterance(speak));
}

и вызывать speak(fform + "покрашен на зелёный цвет");

Answer 3

[profesor08]

Задача кода чтоб он выполнялся, и чтоб ты его понимал. Если тебе для понимания надо написать несколько if else, пиши так. Лично я бы раскидал все по массивам, объектам и вызывал бы нужные вещи оперируя структурами данных.

Answer 4

[Сергей Левченко]

Поддерживаю ответивших выше и от себя немного добавлю, определяйте переменные вот так(неопределенные в конце):

var marr = ["калькулятор", "дизайн", "попугай", "наоборот", "кто такой"],
    timerId = 0,
    fform = " квадрат",
    i,
    mat,
    modde; // зачем пустая строка?

Comments

[Pavel Pikat]

Не знаю как раньше, но в современном JS/TS лично я это не приветствую из-за const/let. Если все переменные определить сначала как const по вашему примеру, то потом будет геморно вытаскивать переменную и списка и определять ее как let.

[Сергей Левченко]

Pavel Pikat, а вы видите в его коде let и const? Я могу и за них рассказать... В вашем примере не вижу ничего "геморного" кстати.

Answer 5

[Сергей Котов]

var modde = "", i, marr = ["калькулятор", "дизайн", "попугай", "наоборот", "кто такой"], fform = " квадрат", mat;
function invert(strpast){
  var newarr = [];
   for(var t = 0; t<strpast.length; t++){
     newarr[t]=strpast[strpast.length - t];
   }
  return newarr.join("");
}
function cheker(mysting){
  for(i = 0; i<marr.length; i++){
    if(marr[i]==mysting){
      modde=mysting;
      speechSynthesis.speak(new SpeechSynthesisUtterance('Выбран режим: ' +modde));
      break;
    }
  }
  if(modde==""){
    if(mysting=="Что ты умеешь"){
      speechSynthesis.speak(new SpeechSynthesisUtterance('Я примитивный голосовой ассистент. У меня есть 5 режима. Первый, калькулятор. Скажите калькулятор чтобы установить этот режим. Теперь можете довать команды на счет, например 2+2, 1200 + 12 - 45, или 100/5. Пока умножать я не умею. Второй режим, дизайн. В этом режиме я создаю красный квадрат. Чтобы дать команду просто скажите красный квадрат, далее дайте команду скруглить, чтобы я скрунлила квадрат. Третий режим, попугай. Я просто буду повторять то что вы скажите. Четвертый режим, наборот. Это тоже самое что и режим попугай, но я буду все повторять наборот. И пятый режим, кто такой. Самый безполезный режим, потому что я никого незнаю. Хотя если честно у меня вообще нет полезных команд. Чтобы выйтти из режима скажите команду сбросить'));
    }else if(mysting=="сбросить"){
      speechSynthesis.speak(new SpeechSynthesisUtterance('для меня для меня для меня для меня для меня для меня для меня для меня для меня для меня для меня для меня для меня для меня. Шутка. На реке сдохла утка. У тебя что есть свободная минутка. Я узбек, купи куртка. Хочешь песьню спою? Если нет, то пидора ответ. Кароче, Йоу собаки я  Наруто Узумаки. Да и кстати я будущий Хокаге. У меня всё круто, я же всё-таки Наруто. Ненавижу Орочимару и Кабуто. Знаю много джутсу, ненавижу бутсы. Лучше клонов расенгана не найдутся. У меня фанаты плюс я люблю Хинату. Немало друзей и однокомнатная хата. Йоу всё классно, меня зовут Саске. Ненавижу Итачи брата из Акацуки. Фанаток моих море, слёзы боль и горе. Я люблю одно — использовать Чидори. Когда сижу на хате изучаю все печати мне пофиг на коноху и на генинов кстати. Я с Орочимару, теперь я ниндзя Звука. Недавно Наруто нападал, понял, сука?. Я Сакура Харуно, не груди а хоромы. Но могу долбануть, доведя до комы. Дзютсу изучаю, Саске обожаю, ино опускаю, славно обучаюсь. Меня зовут Цунаде, я Пятый Хокаге, озорной медик и ещё мастер драки. А я — Джирайя, всегда отдыхаю. Супер-Саннин, лягушек уважаю'));
    }else{
      speechSynthesis.speak(new SpeechSynthesisUtterance('Чё ты там сказал???'));
    }
       
   }
}
function reset(mysting){
  if(mysting =="сбросить"){
    modde ="";
    speechSynthesis.speak(new SpeechSynthesisUtterance('Режим сброшен'));
  }
}
function design(mysting){
  reset(mysting);
  if(modde!=""){
    if(mysting ==("Красный" + fform) || mysting ==("красный" + fform)){
      $(".fig").css({"background":"red", "transform":"scale(1)"});
    speechSynthesis.speak(new SpeechSynthesisUtterance("появился новый" + fform + "красного цвета"));
    }else if(mysting ==("зелёный" + fform)){
      $(".fig").css("background", "green");
    speechSynthesis.speak(new SpeechSynthesisUtterance(fform + "покрашен на зелёный цвет"));
    }else if(mysting =="скруглить"){
      $(".fig").css("border-radius", "100%");
      fform = " Круг";
      speechSynthesis.speak(new SpeechSynthesisUtterance("Квадрат был скруглен"));
    }else{
      speechSynthesis.speak(new SpeechSynthesisUtterance("Не удалось распознать команду"));
      alert(result[0].transcript);
    }
  }
}
function calculate(mysting){
  reset(mysting);
  if(modde!=""){
    var calc = mysting;
    var lol = eval(calc);
    mat = lol;
    speechSynthesis.speak(new SpeechSynthesisUtterance('кароче пацан это будет ' + lol + ", ха, я шарю"));  
  }
}
function who(mysting){
  reset(mysting);
  if(modde!=""){
    speechSynthesis.speak(new SpeechSynthesisUtterance('да пашел ты нахер я тебе чё гугл что ли? я незнаю '+mysting));
  }
  
}
function revers(mysting){
  reset(mysting);
  if(modde!=""){
    var lol = "Это будет наоборот " + invert(mysting);
    speechSynthesis.speak(new SpeechSynthesisUtterance(lol));
  }
  
}
function popugai(mysting){
  reset(mysting);
  if(modde!=""){
      var pov = "вы сказали" + mysting;
      speechSynthesis.speak(new SpeechSynthesisUtterance(pov));    
     }
 
}
var recognizer = new webkitSpeechRecognition();
recognizer.interimResults = true;
recognizer.lang = 'ru-Ru';
recognizer.onresult = function (event) {
  var result = event.results[event.resultIndex];
  if (result.isFinal) {
    switch (modde) {
      case "":
        cheker(result[0].transcript);
        break;
      case "попугай":
        popugai(result[0].transcript);
        break;
      case "наоборот":
        revers(result[0].transcript);
        break;
      case "кто такой":
        who(result[0].transcript);
        break;
      case "калькулятор":
        calculate(result[0].transcript);
        break;
      case "дизайн":
        design(result[0].transcript);
        break;
      default:
        alert( 'Что то пошло не так' );
    }
     $("#start").text("Нажмите на кнопку");
  }else {
    console.log('Промежуточный результат: ', result[0].transcript);
  }
};
$("#listen").click(function(){
   $("#start").text("слушаю....");
  recognizer.start();
  console.log(recognizer);
});