基于页面分离 JS 文件是一种好习惯吗？ [关闭]答案

【问题标题】：Is it a good practices to separate JS file based on pages? [closed]基于页面分离 JS 文件是一种好习惯吗？ [关闭]
【发布时间】：2016-06-19 18:29:44
【问题描述】：

例如，我的网站中存在三个不同的页面，它们将使用不同的 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>

人们通常会怎么做？

【问题讨论】：

加载两个 50kb 的 JS 文件通常比加载一个 100kb 的 JS 文件更快，因为流水线。对于网站，我喜欢 sitewide.js（通常是捆绑包）、sectionwide.js 和 pagespecific.js（如果需要）。

【解决方案1】：

是的，一般来说，为了可读性、可维护性、避免错误和减少 Javascript 负载，您应该将代码分开。

此外，如果您的“common.js”很大，或者是面向对象的，您可能希望进一步将其分成几个文件或目录。请参阅此复杂应用示例：https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Source

如果您以后需要打包和/或缩小您的 Javascript 代码（以使其更小），可以使用诸如 Grunt 或 Gulp 之类的 Javascript 构建工具。

【讨论】：

【解决方案2】：

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

在大型应用程序或单页应用程序 (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 文件要简单得多。

【讨论】：

【解决方案3】：

实际上将每个页面的 JS 分开是很聪明的，但请记住不要导入过多的 JS 文件，因为它会增加对服务器的调用次数，从而增加网络流量。但在你的情况下，有几个文件像

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

真的很不错。

将来你可以使用像Webpack 这样的模块捆绑器将common.js 和pageB.js 捆绑在一个mainB.js 中，mainA.js 也是如此。但是你必须决定你是否有那么多文件来使用模块捆绑器。

【讨论】：

【解决方案4】：

外部脚本将被浏览器缓存，因此最初，当用户第一次访问您的页面时加载一个较大的文件将导致其余用户访问无缝，这很棒。

在同一页面上加载多个 .js 文件会产生不必要的请求，应该避免。

如果您有一段代码只需要在某个页面（或多个页面）上使用，那么这实际上归结为该块有多大；如果它很大，当然，将其拆分并添加到需要它的页面上；但是，如果它很小，我会将所有内容保存在一个 .js 文件中。

如果您担心速度，可以最小化您的 .js，并在您的服务器上启用 GZip 压缩。

-

大多数网站源代码会显示多个脚本；这通常是因为他们要么使用 CMS（它几乎不关心您的 SEO 需求），要么使用 PHP “包含”，其中嵌入了需要自己的脚本才能运行的模块。

如果可以避免，我会避免使用多个脚本。

【讨论】：

【解决方案5】：

如果你是前端开发新手，我建议你把你的js代码分成这几种：

常用工具(com_utils.js)

在全局有用的小代码块，例如登录/注销操作、错误处理程序、通知。你应该在几乎每个文档中加载这个 js 文件。
大组件模块(modulename.js)

有些代码在多个网页（不是所有页面）中都有用，而且很复杂，这意味着它应该是可重复使用的，那么您需要将其设计为单独的组件，例如编辑器组件，图片上传组件。
不可重复使用的代码（pagename.js）

其余代码不可重复使用或为特定页面定制。然后你可以将js文件命名为pagename.js并加载到特定页面中。

请务必注意，如果您想快速入门，这只是一个初学者指南，当您在前端开发方面拥有更多经验时，您最好学习如何模块化代码。它也有利于处理代码之间的不同依赖关系。或者，您可以查看 require.js 等第三方工具。

【讨论】：