Question

网站上jquery / javascript的最佳做法是什么？我的应用程序中有几个页面，其中javascript特定于该页面。将它全部写在一个js文件中并将其缓存，或者每个页面是否应该拥有自己特定的js文件是否更好？我主要担心的是表现。如果我有2000多个选择器并且在给定页面上只有3或4个应用，如果它们都在一个js文件中，这会阻碍性能吗？

Answer 1

将所有代码放在一个文件中（将它们分开用于开发，但是有一个结合它们的构建步骤），但只有调用与之相关的代码给定页面，因此您不会拨打大量电话来查找不存在的元素。

这样，您可以使用缓存标头在用户在页面之间移动时在客户端缓存您的代码，而不必担心只有3或4个选择器应用导致性能问题。

Answer 2

出于性能原因，当只有3或4个应用于任何特定页面时，您不希望在每个页面上执行数千个DOM搜索。

有多种方法可以阻止在每个页面上执行如此多的无效DOM搜索，一些通过代码组织（哪些代码存在于哪些页面上），一些通过编码智能（测试它是什么页面类型并且仅执行）在这种类型的页面上需要的DOM搜索。）

将大部分代码整合到一个文件中有一些实际的好处，可以通过浏览器高效缓存，而不是每次进入站点中的新页面时都重新加载。与此同时，你真的不想盲目地运行2000多个DOM搜索，只有少数人可能真正找到他们想要的东西。

您还没有分享有关您网站或网页结构的任何信息，因此我只能在此处提出一般性建议，但我要做的是将您的网页分成几类网页。在每个页面类别上放置一个唯一标记 - 一个公共标记将是<body>标记上的类名，用于指示它所属的页面类别。然后，根据页面类别，您只执行适合该特定页面类别的DOM搜索，并避免执行大多数毫无结果的DOM搜索。同样，这里很难具体，但是如果你有一个函数hasClass()来查看一个元素是否有一个特定的类名，那么你可以这样做：

if (hasClass(document.body, "main")) {
    // execute only DOM searches appropriate for the "main" category of pages
} else if (hasClass(document.body, "cart")) {
    // execute only DOM searches appropriate for the "cart" category of pages
} else if (hasClass(document.body, "index")) {
    // execute only DOM searches appropriate for the "index" category of pages
} else if (hasClass(document.body, "search")) {
    // execute only DOM searches appropriate for the "search" category of pages
}

我还要质疑为什么在页面初始化时需要2000多个单独的DOM搜索。大多数DOM搜索不必在页面初始化时完成，但可以在需要时完成，以响应某些用户事件。单个给定的DOM搜索很少（在用户时间内）很慢，因此很少需要预先处理您可能需要的所有DOM搜索。

所有这一切，有时候将你的JS分成几个单元并且只在某些页面上包含一些单元是值得的。如果“耦合单元”仍然是一个小数字，它仍然可以被浏览器有效地缓存。这一切都取决于您的页面和代码的具体情况。例如，网站通常会有一组用于主站点的javascript和另一组用于操作购物车的javascript，并且由于这两个在同一页面上不需要，因此该站点仅包含一个或另一个

全站点jQuery / javascript选择器的最佳实践？

2 个答案: