具有多个 DOMContentLoaded 事件组织的不显眼的纯 Javascript

Question

也许这是一个愚蠢的问题，但我对 JavaScript 很困惑。我遵循this 代码组织尽可能不显眼的JavaScript。我在 Ruby on Rails 中构建了一个使用 Google 地图的网站。

我的场景：假设我有一个非常庞大的网站，在其中的不同页面中，我需要启动 JavaScript 脚本来执行一些操作。

一个问题是，无论用户访问哪个页面，我都必须将我网站的所有 JavaScript 代码添加到用户的浏览器。例如，假设我有使用大量 JavaScript 代码的页面 A 和使用一些微小 JavaScript 代码的页面 B。据我了解，在页面 B 中，用户必须检索所有 JavaScript 代码（即，对于页面 A 和 B）。是不是有点不切实际？

更重要的是，对于这两个页面，JavaScript 都是由document.addEventListener("DOMContentLoaded", function, false); 函数启动的。但是，A页面的功能假设有一个名为“pageA”的div（作为参考，以便通过js脚本修改或添加元素），同样页面B的功能假设有一个名为“ B 页”。因此，当我在页面 B 上时，我收到没有“pageA”元素的 js 错误。我怎样才能避免这种情况？

鉴于，对于每个页面，我都必须使用我的整个 JavaScript 代码（即所有页面）加载用户，我该如何启动（即在页面加载时立即启动，而不是在用户事件之后启动发生）页面特定的 JavaScript 代码没有任何此类错误？我真的很困惑！

Wooho 非常快速的响应 thanx 伙计们！但我从未说过我将整个 js 代码写在 1 个单个文件中。相反，我使用了 RoR 的组织！ （顺便说一句，将所有文件组合成一个文件）。为了澄清我的问题，我在不同的文件中启动了页面 A 的事件和页面 B（或 C 等）的事件。一旦 DOMContentLoaded 事件发生，代码就会触发。但是，当用户在页面 B 我不想触发页面 A 的事件时。或者类似地，我只想为页面 B 加载 js（这样页面 A 就不会触发任何事件）。我该怎么做？

PS：如果你觉得有更好的标题，欢迎提出建议！

Answer 1

如果您将 Javascript 代码保存在单个文件中，则只需在用户请求访问您网站的第一页时加载一次（甚至可能编译一次，请参阅 this）。然后浏览器将使用缓存副本，除非您禁止缓存（网络服务器的错误配置可以做到这一点）。

当您执行类似 (JQuery) 的操作时：

$('#nosuchid').something();

或例如

$('.nosuchclass').each(function(i, el) { ... });

如果您的标记中不存在匹配的元素，则不会出现错误且无效。如果你使用document.getElementById()，如果没有元素匹配，它将返回null，你将不得不处理这种情况。如果你正确地做到这一点，就不会有任何错误。

正如您可以想象的那样，被跳过的代码并不需要时间来执行，因此也没有理由期待性能问题。