将一个大的 javascript 文件拆分为几个较小的文件答案

【问题标题】：splitting a large javascript file into several smaller files将一个大的 javascript 文件拆分为几个较小的文件
【发布时间】：2017-04-13 17:58:45
【问题描述】：

我正在使用jQuery和jQuery UI对DOM元素进行操作，发现自己处于这种情况。

index.html：

<html>
<head>
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<script src="dashboard.js"></script>
<body>
</html>

dashboard.js：

function addAccordian() {
  // some logic here
}

function addConnectedSortable() {
  // more logic here
}

function addPiecharts() {
  // a huge chunk of logic here

  // for example, 

  // several ...
  // hundred ...
  // line ...
  // of code

}

function readyFn(jQuery) {
  addAccordian();
  addConnectedSortable();
  addPiecharts();
}

$(document).ready(readyFn);

我只能想象dashboard.js 文件会随着时间变得越来越大。

问题：有没有办法将其拆分为几个较小的 javascript 文件，并以某种方式 include/import 它们？

我来自 Java 背景，如果这个问题没有多大意义，请原谅我。

我愿意接受任何建议，因为这个项目还处于早期阶段，而且我们可以灵活地使用我们使用的技术。

【问题讨论】：

是的。这通常称为构建过程。例如，可以使用 webpack/gulp/grunt 之类的东西来完成。
我发现this article 解决了一些名称冲突问题。搜索“模块模式”

标签： javascript jquery html separation-of-concerns

【解决方案1】：

只需创建您需要的文件，然后将它们包含在页面中。我建议您将它们包含在 head 元素中，以便浏览器可以同时加载它们。

<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>
<script src="file3.js" type="text/javascript"></script>

【讨论】：

我会接受这个答案。有关名称冲突的解决方案，请参阅我在问题中的评论