javascript - 如何为多个页面创建一个主 JavaScript 文件？

Question

我有一个带有两个页面的小应用程序:登录页面和主页。我的问题是，当我对两个页面只使用一个主 JavaScript 文件时(就像推荐的那样)，我得到很多 ReferenceError 因为页面上的某些变量没有在另一个页面上定义......
例如:
登录页面的代码行

copyrightYear.textContent = new Date().getFullYear();

主页提示

Uncaught TypeError: Cannot set property 'textContent' of null

我该如何解决？不要告诉我我不得不说 if(copyrightYear) { do stuff }每次，如果我必须为每个变量都这样做，那只是一场噩梦

Answer 1

给你两个答案:
建议不是命令

My problem is that when I use just one main JavaScript file for both pages (like it's recommanded)

那是 非常一般建议。它并不适用于所有情况。在不使用该代码的页面中加载代码是没有意义的。
如果您有在两个页面中都使用的代码以及特定于页面的代码，则为 绝对没问题拥有一个页面共享的文件以及特定于页面的文件:

<script src="main.js"></script>
<script src="page1.js"></script>

如果你真的担心额外的 HTTP 请求(现在的问题比以前少了很多)，使用模块和像 Webpack 或 Rollup 这样的捆绑器，它将创建一个捆绑包，将主模块与页面 1 的模块相结合1 和另一个捆绑包，将主模块与第 2 页的第 2 页模块组合在一起。
但即便如此，额外的 HTTP 请求可能对您的用户更好，如果您希望他们在合理的时间范围内从 page1 转到 page2。原因是如果你有 main.js和 page1.js/ page2.js并且您允许缓存它们，当用户转到 page1 时，它们会得到 main.js和 page1.js ，然后当他们转到第 2 页时 main.js从他们的本地缓存中出来，他们只需要加载 page2.js .相反，如果每个页面都有一个单独的捆绑文件，那么当从 page1 转到 page2(反之亦然)时，他们必须重新下载所有公共(public)代码。但是，如果您希望访问者访问 page1 或 page2 但不是另一个，您可以使用特定于页面的捆绑包保存 HTTP 请求。
真的没有万能的解决方案。 :-) 有各种各样的考虑。
请注意，HTTP/1.1 使额外的 HTTP 请求更加高效并且几乎得到普遍支持， HTTP/2让他们 很多更高效，有效地消除了在页面启动过程中减少 HTTP 请求数量的情况。所有主要的现代浏览器都支持 HTTP/2，最新的 Web 服务器也是如此。
将每个页面的代码放在一个函数中
如果您真的想保留一个页面，请将特定于每个页面的代码放入这些页面的函数中，然后让文件主要部分中的代码根据 location.pathname 调用适当的函数.