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

增强 javascript 代码的技巧

Tips to enhance javascript code

javascript

css-transforms