为大型网站中的每个页面“激活”JavaScript

Question

我正在开发一个中等规模的网站，上面写着大量的自定义JavaScript。

目前，所有脚本都存储在每个功能区域的单独JS文件中。然后将它们缩小并在构建过程中合并为单个大型JS文件。

对于每个页面，相关的JavaScript通常基于页面上具有特定类的元素的存在来执行。例如：

$(document).ready(function()
{
    var foo = $("div.dostufftome")
    if(foo)
    {
         // dostuff
    }
}

我担心这种方法看起来有点脆弱，也可能很慢。

我能看到的另一个替代方案是将“激活”代码内嵌在CData部分的HTML中，其中大部分代码都附在JS文件中。

感谢任何建议。

Answer 1

如果您担心性能问题，最好使用“id”值触发元素的行为。根据我的经验，除非您的代码需要进行数百次此类检查，否则没有明显的性能拖累。

通过多级别的检查，您可以提供更多帮助。给一些具有相对独特需求的页面提供body标签上的特殊类，然后您可以在该类的测试中嵌套一堆测试。这样，可以排除某些Javascript功能的页面只需要一次检查。

Answer 2

如果你给body标签一个类（或ID），那么

比实际内容更不易碎。对于大块的东西，简单的单行如果有效：

if( $("body").hasClass("doStuff") )

对于该区域之外的任何内容，您只需使用$("body.doStuff div.example").hide()等。

Answer 3

这是一种非常有效的做事方式。只要您的选择器很快，这肯定不是脆弱的，也不是缓慢的。加载JS文件后，它就会被缓存。

您可以按如下方式对此进行优化：

$(document).ready(function()
{

    if($("div.dostufftome"))
    {
         // dostuff
    }
}