javascript - 增强 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);
    });
};

但这样做会牺牲可读性。您必须对您的代码库进行调用，以确定哪个似乎更易于维护。

future ，https://codereview.stackexchange.com/是获得代码审查帮助的好地方。