javascript - jQuery选择器作为属性存储在 namespace 中

我正在为网站重构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
        });
    }
}

这是一个提炼的代码示例。想象一下许多eventElement，以及许多利用这些eventElement子集的站点部分。

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

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

如果使用上述方法会导致性能下降，那么我将在命名空间中分支，以仅在使用那些eventElement的部分的上下文中声明eventElements。

最佳答案

当遇到表达式时执行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在调用sectionA之前必须是jQuery对象，那么您至少应该等待初始化它们，直到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])
    }
})

关于javascript - jQuery选择器作为属性存储在 namespace 中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1520903/