Javascript jQuery选择器存储为命名空间中的属性

我正在为一个站点重构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。

JavaScript在遇到表达式时执行。是的，如果脚本文件中有：

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

然后调用

$

，并在执行脚本时遍历DOM。这在两个层面上都很糟糕：

• 脚本的位置取决于DOM是否准备好进行遍历（仅供参考，整个原因是

  $（文档）。准备好的
  存在就是为了解决这个问题）

• 在需要引用这些元素之前遍历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在遇到表达式时执行。是的，如果脚本文件中有：

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

然后调用

$

，并在执行脚本时遍历DOM。这在两个层面上都很糟糕：

• 脚本的位置取决于DOM是否准备好进行遍历（仅供参考，整个原因是

  $（文档）。准备好的
  存在就是为了解决这个问题）

• 在需要引用这些元素之前遍历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])
    }
})