0

我正在为一个站点重构一个 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 是在每次加载此脚本时遍历所有 eventElements 的 DOM，还是仅在调用使用该 eventElement 的函数时。

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

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

4

1 回答 1

3

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])
    }
})
于 2009-10-05T16:00:47.680 回答