Javascript ES6代码优化

Question

我正在尝试将当前的jQuery代码转换为滑块的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块：

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

所以，我想问你的建议，有什么方法可以优化我的代码在性能或使代码更干净吗？

这里是可以玩的琴键。

谢谢!

Answer 1

您正在看到关于jQuery的优点的演示；更短、更精简的代码。惩罚是加载时间增加，性能稍慢。

要回答你的问题，没有任何方法来优化你的“不”逻辑。不管你怎么做，你都需要一个循环。

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