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/是代码审核帮助的好地方。

增强javascript代码的提示

1 个答案: