javascript - 上下文化 jQuery

Question

我有一个相当大的网站，有很多不同页面的 jQuery 代码。我们正在谈论 1000 行相当优化的代码(不包括插件)。

我知道 jQuery 非常擅长忽略不存在的页面元素的监听器，但它仍然需要在页面加载时测试它们的存在。我还创建了大量变量(包括大小合适的数组和对象)，但每个页面上只使用其中的几个。

我的问题是:减少每个页面必须完成的工作量的最佳方法是什么？

但是，我不想希望将代码分割成单独的文件。我想将所有代码保留在 1 个位置，并且为了提高效率，我只想调用服务器下载一次 JS(只有 30kb，比大多数图像都小)。

到目前为止我已经想到了几种方法:

1. 将所有代码块放入命名函数中，并让每个页面从内联 <script> 标记中调用所需的函数。
2. 让每个页面输出一个变量作为 pageID，并为每个页面都有一个 if 语句: if (pageID = 'about' || pageID = 'contact') {code...}
3. 为每个页面(可能是 body 标签)提供一个类或 ID，可用于标识需要执行的 block : if ($('.about').length || $('.contact' ).length) {code...}
4. 将1和2(或者1和3)组合起来，这样每个页面输出一个变量，if语句全部放在一起，调用函数:if (pageID = 'about ') {函数调用...}

还有其他想法吗？或者其中最好/最有效的是哪一个？

Answer 1

您的第一个选择将是最快的(稍差)。
您需要记住从正确的页面调用函数。

但是，别打扰。
除非您已经在分析器中测量了性能影响，否则无需进行这么多优化。