基于页面分离JS文件是一个好习惯吗？

Question

例如，我的网站中有三个不同的页面，这三个页面将使用不同的js代码和一些常见的js代码。

将这些js代码分成不同的文件是一个好的做法吗？

例如，在 A.html 中：

<script src="/js/common.js"></script>
<script src="/js/pageA.js"></script>

在B.html中：

<script src="/js/common.js"></script>
<script src="/js/pageB.js"></script>

那么，当我访问A页面时，B页面相关的js将不会被加载，所以我认为它会更快？是我想太多了吗？这不是必需的？

或者我应该将所有js放在一个js文件中？

例如，在每个 html 文件中：

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

通常人们会采取哪种方式？

Answer 1

这实际上取决于您的应用程序、其大小和用途。

在大型应用程序或单页应用程序 (SPA) 中，常见的做法是分离 JS 文件。例如，流行的 HTML5 框架Ionic按以下顺序分隔其文件：

app
-- pages
    -- pageA
        -- pageA.js
        -- pageA.html
    -- pageB
        -- pageB.js
        -- pageB.html
-- etc

这使您的设置更加模块化，并用于使应用程序的代码更易于调试和/或共享/复制。如果您正在开发 Web 组件或者正在使用 TypeScript 或 ES6 之类的东西，它也很有用，因为它们可以选择导出和导入类。

它会使 pageA 加载速度更快（取决于代码的大小），因为它不必加载 pageB 的 JS。这也使环境保持清洁，因为它更像是一种延迟加载设置（在需要时加载文件，而不是在启动时加载所有内容）。

如果您的项目很小，或者页面之间有许多通用功能和操作，您可能希望将所有内容保存在一个文件中。但是，由于您在问题中包含了 common.js，我认为这是您保存所有内容的地方。

最后，你就是开发者！随心所欲地编码！我个人将事物模块化并保存在单独的文件中，因为我发现自己重复使用旧代码，并且从特定文件夹中获取它比搜索一个大的 JS 文件要简单得多。