Optymalizacja kodu - przegląd danego pliku JS

Question

Witam, zapisałem kod js, ale wiele w nim rzeczy się dosłownie powtarza, mógłby ktoś napisać to samo/ powiedzieć jak to zrobić aby zmniejszyć jego rozmiar?

 

var logonumber=0;
var logotext="";

function start(){
	
nav1f();
pisz();
backlos();
var language = window.navigator.language
document.getElementById("logo").innerHTML+="  "+language+"  ";
}


function backlos(){
var rand = Math.floor((Math.random() * 7) + 1);	
document.getElementById("body").classList.add('back'+rand);
	
}



function nav1f(){
	
document.getElementById("nav1").classList.remove('fit');
document.getElementById("nav1").classList.add('refit');
setTimeout("nav2f()",200);
setTimeout("nav1text()",200);
}

function nav2f(){
	
document.getElementById("nav2").classList.remove('fitx');
document.getElementById("nav2").classList.add('refit');
setTimeout("nav3f()",200);
setTimeout("nav2text()",200);
	
}

function nav3f(){
	
document.getElementById("nav3").classList.remove('fit');
document.getElementById("nav3").classList.add('refit');
setTimeout("nav4f()",200);
setTimeout("nav3text()",200);
}

function nav4f(){
	
document.getElementById("nav4").classList.remove('fitx');
document.getElementById("nav4").classList.add('refit');
setTimeout("nav5f()",200);
setTimeout("nav4text()",200);
}

function nav5f(){
	
document.getElementById("nav5").classList.remove('fit');
document.getElementById("nav5").classList.add('refit');
setTimeout("nav5text()",200);	
}





function nav1text(){
document.getElementById("nav1").classList.remove('fitop');
document.getElementById("nav1").classList.add('refitop');
	
	
document.getElementById("nav1").classList.remove('fittext');
document.getElementById("nav1").classList.add('refittext');

}

function nav2text(){
	
document.getElementById("nav2").classList.remove('fitop');
document.getElementById("nav2").classList.add('refitop');
	
document.getElementById("nav2").classList.remove('fittext');
document.getElementById("nav2").classList.add('refittext');

}

function nav3text(){
	
document.getElementById("nav3").classList.remove('fitop');
document.getElementById("nav3").classList.add('refitop');

document.getElementById("nav3").classList.remove('fittext');
document.getElementById("nav3").classList.add('refittext');

}

function nav4text(){
	
document.getElementById("nav4").classList.remove('fitop');
document.getElementById("nav4").classList.add('refitop');
	
	
document.getElementById("nav4").classList.remove('fittext');
document.getElementById("nav4").classList.add('refittext');

}

function nav5text(){
	
document.getElementById("nav5").classList.remove('fitop');
document.getElementById("nav5").classList.add('refitop');
	
	
document.getElementById("nav5").classList.remove('fittext');
document.getElementById("nav5").classList.add('refittext');

}


function pisz(){
logonumber+=1;	
if (logonumber==1){document.getElementById("logo").innerHTML+="X";}
if (logonumber==2){document.getElementById("logo").innerHTML+="e";}
if (logonumber==3){document.getElementById("logo").innerHTML+="v";}
if (logonumber==4){document.getElementById("logo").innerHTML+="J";}
if (logonumber==5){document.getElementById("logo").innerHTML+="a";}
if (logonumber==6){document.getElementById("logo").innerHTML+="c";}
if (logonumber==7){document.getElementById("logo").innerHTML+="k";}
if (logonumber==8){document.getElementById("logo").innerHTML+=".";}
if (logonumber==9){document.getElementById("logo").innerHTML+="c";}
if (logonumber==10){document.getElementById("logo").innerHTML+="o";}
if (logonumber==11){document.getElementById("logo").innerHTML+="m";}
if (logonumber==12){document.getElementById("logo").innerHTML+="   ";}
if (logonumber==13){document.getElementById("logo").innerHTML+="=";}
if (logonumber==14){document.getElementById("logo").innerHTML+=")";}
var testlos = Math.floor((Math.random() * 50) + 220);
if(logonumber<15){setTimeout("pisz()",testlos);}
}

 

Answer 1

let logonumber = 0;
let logotext = '';
const getById = id => document.getElementById(id);

function start() {
  navf(1);
  pisz();
  backlos();
  let language = window.navigator.language
  getById('logo').innerHTML += '  ' + language + '  ';
}

function backlos() {
  let rand = Math.floor((Math.random() * 7) + 1);
  getById('body').classList.add('back' + rand);
}

function navf(number) {
  getById('nav' + number).classList.remove('fit');
  getById('nav' + number).classList.add('refit');
  setTimeout(navf, 200, number + 1);
  setTimeout(navText, 200, number);
}

function navText(number) {
  getById('nav' + number).classList.remove('fitop');
  getById('nav' + number).classList.add('refitop');

  getById('nav' + number).classList.remove('fittext');
  getById('nav' + number).classList.add('refittext');
}

function pisz() {
  logonumber += 1;
  if (logonumber == 1) { getById('logo').innerHTML += 'X'; }
  if (logonumber == 2) { getById('logo').innerHTML += 'e'; }
  if (logonumber == 3) { getById('logo').innerHTML += 'v'; }
  if (logonumber == 4) { getById('logo').innerHTML += 'J'; }
  if (logonumber == 5) { getById('logo').innerHTML += 'a'; }
  if (logonumber == 6) { getById('logo').innerHTML += 'c'; }
  if (logonumber == 7) { getById('logo').innerHTML += 'k'; }
  if (logonumber == 8) { getById('logo').innerHTML += '.'; }
  if (logonumber == 9) { getById('logo').innerHTML += 'c'; }
  if (logonumber == 10) { getById('logo').innerHTML += 'o'; }
  if (logonumber == 11) { getById('logo').innerHTML += 'm'; }
  if (logonumber == 12) { getById('logo').innerHTML += '   '; }
  if (logonumber == 13) { getById('logo').innerHTML += '='; }
  if (logonumber == 14) { getById('logo').innerHTML += ')'; }
  var testlos = Math.floor((Math.random() * 50) + 220);
  if (logonumber < 15) { setTimeout('pisz()', testlos); }
}

Poprawiłem część, dałbyś jeszcze html i css, bo nie jestem pewien czy jakieś błędów nie zrobiłem...

Comments

Sprawdziłem wszystko działa, właśnie o takie wykorzystanie funkcji mi chodziło! to wiele dla mnie znaczy za co bardzo dziękuje!

---

Tu masz o eval. Część kodu którą napisałem korzysta z nowości z  ECMAScript 2015. Jeśli chcesz żeby kod działał we wszystkich przeglądarkach użyj Babel. Przydałoby się jeszcze coś pokombinować z funkcją "pisz". 

Answer 2

No jak dobrze pokombinujesz, to jesteś w stanie z 5 funkcji navNf() zrobić jedną przyjmując odpowiedni argument i to samo z funkcjami navNtext(). Na pierwszy rzut mózgu funkcję pisz() też da się znacząco skrócić, pewnie przez umieszczenie tych literek w tablicy i iterowanie po tym, czy coś.