将一个大 javascript 文件拆分成几个较小的文件

Question

我正在使用 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 背景，所以如果问题没有多大意义，请原谅我。

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

Answer 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>

将一个大 javascript 文件拆分成几个较小的文件

splitting a large javascript file into several smaller files

javascript

jquery

html

separation-of-concerns