javascript - jQuery 选择器作为属性存储在命名空间中

Question

我正在为网站重构 JavaScript 命名空间。该命名空间利用 jQuery 来实现选择器和事件。这是一个例子。

MyNamespace = {
    eventElements : {
        headerSectionA : $("h1.section-a");
        headerSectionB : $("h1.section-b");
    }
    sectionA : function() {
        // do stuff for section A here, such as
        MyNamespace.eventElements.headerSectionA.click(function(){
            // behavior A
        });
    }
    sectionB : function() { 
        // do stuff for section B here, such as
        MyNamespace.eventElements.headerSectionB.click(function(){
            // behavior B
        });
    }
}

这是一个精简的代码示例。想象一下许多 eventElements 以及许多使用这些 eventElements 子集的网站部分。

我的问题是 jQuery 是否在每次加载此脚本时遍历所有 eventElement 的 DOM，或者仅在调用使用该 eventElement 的函数时遍历 DOM。

我想避免性能损失，但我不确定 jQuery 是在声明 eventElement 属性时遍历 DOM，还是仅在将事件附加到 eventElement 时遍历 DOM。

如果使用上述方法会造成性能损失，那么我将在命名空间内进行分支，仅在使用这些 eventElements 的部分的上下文中声明 eventElements。

Answer 1

JavaScript 在遇到表达式时执行。所以是的，如果这是在您的脚本文件中:

MyNamespace = {
    eventElements : {
        headerSectionA : $("h1.section-a"),
        headerSectionB : $("h1.section-b")
    }
    // ...
}

然后调用 $ 并在执行脚本时遍历 DOM 。这在几个层面上都是不好的:

• 脚本的位置依赖于准备好遍历的 DOM(仅供引用，$(document).ready 存在的全部原因是为了解决这个问题)
• 在需要引用这些元素之前先遍历 DOM

我会将其调整为只完成所需的工作:

MyNamespace = {
    eventElements : {
        headerSectionA : "h1.section-a", // THESE BECOME STRINGS
        headerSectionB : "h1.section-b"
    }
    ,// ...
    sectionA : function() {
        // Call $ as late as possible
        $(MyNamespace.eventElements.headerSectionA).click(function(){
            // ...
        });
    }
}

现在，如果出于某种原因MyNamespace.eventElements.headerSectionA必须是一个jQuery对象之前调用sectionA ，那么你至少应该等到 DOM 准备好后再初始化它们，以减少脚本本身的脆弱性:

// namespace defined as before
// wait until DOM is ready
$(document).ready(function() {
    for(var selector in MyNamespace.eventElements) {
        MyNamespace.eventElements[selector] = $(MyNamespace.eventElements[selector])
    }
})