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

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

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

非常好。

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

Answer 2

如果您不熟悉前端开发，我建议您将js代码划分为以下类型：

common utils（com_utils.js）

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

某些代码在多个网页（并非所有网页）中都很有用，而且很复杂，这意味着它应该可以重复使用，然后您需要将其设计为单独的组件，例如编辑器组件，图像上传组件。 / p>
不可重复使用的代码（pagename.js）

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

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

Answer 3

是的，一般情况下，您应该将代码分开以提高可读性，可维护性，避免错误并减少Javascript负载。

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

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

Answer 4

这实际上取决于您的应用程序，大小和目的。

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

Answer 5

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

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

如果你只有某个页面（或多个页面）需要一块代码，那么它实际上取决于该块的大小;如果它是巨大的，确定，将其拆分并将其添加到需要它的页面上;但是，如果它很小，我会将所有内容保存在一个.js文件中。

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

-

大多数网站的源代码都会显示多个脚本;这通常是因为他们要么使用CMS（几乎不关心你的SEO需求），要么使用PHP＆＃34;包括＆＃34;嵌入需要自己的脚本运行的模块。

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