Советы по улучшению кода javascript

Question

Делал приятную навигацию с использованием преобразований css3. Также для этого была написана несколько javascript.

Но, к сожалению, это выглядит немного неопрятным. Не могли бы вы, пожалуйста, дать мне несколько советов по оптимизации кода javascript.

Перо -->http://codepen.io/rokki_balboa/pen/doOqqv?editors=001

var bar = document.querySelector('.fa-bars'); 
var lis = document.getElementsByTagName('li'); 

    bar.onclick = function() { 

      var delayIn = 0; 
      var delayOut = 1500; 
      if (!(lis[0].classList.contains('accordion'))) { 
        console.log(lis[5]); 
        [].forEach.call(lis, function(el) { 
          setTimeout(function() { 
            el.classList.add('accordion'); 
          }, delayOut); 
          delayOut -= 300; 
        }); 
      } else { 
        [].forEach.call(lis, function(el) { 
          setTimeout(function() { 
            el.classList.remove('accordion'); 
          }, delayIn); 
          delayIn += 300; 
        }); 
      } 

    }; 

Answer 1

Если вы просто хотите уменьшить дублирование, это может помочь:

var bar = document.querySelector('.fa-bars'); 
var lis = document.getElementsByTagName('li'); 

bar.onclick = function() { 
    var delay = {in: 0, out: 1500}; 
    var adding = !(lis[0].classList.contains('accordion')); 
    [].forEach.call(lis, function(el) { 
     setTimeout(function() { 
      el.classList[adding ? 'add' : 'remove']('accordion'); 
     }, delay[adding ? 'out' : 'in']); 
     delay[adding ? 'out' : 'in'] += (adding ? -300 : 300); 
    }); 
}; 

Но он делает это в какой-то счет в читаемости. Вам нужно будет сделать вызов вашей кодовой базы, что кажется более удобным для обслуживания.

В будущем https://codereview.stackexchange.com/ - хорошее место для справки по обзору кода.