Javascript ES6 代码优化

Question

我正在尝试将我们当前的 jQuery 代码转换为 slider 的 ES6。 下面是当前的 jQuery 代码:

$('.slider-nav a').click(function (event) {
        $('.slider-nav a').not($(this)).removeClass('current');
        $(this).addClass('current');
        $('.slider-content').not($(this).data('target')).removeClass('current');
        $($(this).data('target')).addClass('current');
        event.preventDefault();
    });

这是我更新的 javascript 代码

    let contentSlidersNavs = document.querySelectorAll('.slider-nav a');

    if (contentSlidersNavs.length) {
        for (let current_item of contentSlidersNavs) {
            current_item.addEventListener('click', function (event) {
                let target_element = event.target || event.srcElement;                
                for(let current_item of contentSlidersNavs){
                    if(current_item !== target_element){
                        current_item.classList.remove('current');
                    }
                }
                current_item.classList.add('current');
                let current_content_id = current_item.dataset.target;
                let slider_contents = document.querySelectorAll(`.slider-content:not(${current_content_id})`);
                for(let current_content of slider_contents){
                    current_content.classList.remove('current');
                }
                document.querySelector(`.slider-content${current_content_id}`).classList.add('current');
                event.preventDefault();
            });
        }
}

如您所见，我的新代码比以前的 jQuery 代码大三倍，而且看起来更复杂。

例如，下面的 jQuery 行:

 $('.slider-nav a').not($(this)).removeClass('current');

成为这个 ES6 block :

let target_element = event.target || event.srcElement;                
            for(let current_item of contentSlidersNavs){
                if(current_item !== target_element){
                    current_item.classList.remove('current');
                }
            }

所以，我想请教您的建议，有什么方法可以优化我的代码性能或使代码更简洁？

这是 jsfiddle link玩。

谢谢!

Answer 1

您正在观看 jQuery 之美的演示；更短、更精简的代码。代价是加载时间增加和性能稍慢。

要回答您的问题，不，实际上没有任何方法可以优化您拥有的“非”逻辑。无论采用哪种方式，都需要一个循环。

您可以将 :not 选择器与 querySelectorAll() 一起使用，但这依赖于将 target_element 对象转换为有效的选择器字符串。