我怎样才能并且应该从不同的文件加载我的 .js 文件以保持清洁？

Question

我有大约 10 个 .js 文件要加载到 <body> 底部的 index.html 中，如下所示：

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="assets/js/javascript1.js"></script>
<script src="assets/js/javascript2.js"></script>
<script src="assets/js/javascript3.js"></script>
...

有没有办法将我的所有 javascript 包含内容移动到一个单独的文件中以提高可读性？如果有，我应该这样做，还是有什么理由我想将它们保留在使用它们的页面中？

我正在尝试按照这些思路做一些事情，尽管这不起作用：

在我的底部 <body>:

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="assets/js/javascript-loader.js"></script>

然后在javascript-loader.js:

$.getScript("assets/js/javascript1.js");
$.getScript("assets/js/javascript2.js");
$.getScript("assets/js/javascript3.js");
...

Answer 1

可能 requirejs 会适合你。 http://requirejs.org/docs/jquery.html#intro

这里是 requirejs 的用法示例。

require.config({
baseUrl: 'js/lib',
paths: {
    // the left side is the module ID,
    // the right side is the path to
    // the jQuery file, relative to baseUrl.
    // Also, the path should NOT include
    // the '.js' file extension. This example
    // is using jQuery 1.9.0 located at
    // js/lib/jquery-1.9.0.js, relative to
    // the HTML page.
    jquery: 'jquery-1.9.0'
}

});

您已经轻松描述了所有需要加载的文件。每个文件加载时也可以有回调。

Answer 2

$.getScript(...) jQuery 方法是异步的，因此它不会检索您的脚本，导致脚本以随机顺序加载（例如 "script3" 在加载之前"script1"): 因此，如果其中某些代码中的任何代码依赖于以前的脚本，那么它很可能会完全出错，并且无法为未定义的变量增加一些 TypeError。

为了确保您的脚本以正确的顺序加载，您可以进行同步 Ajax 调用，如下所示：

function loadScript(url) {
    var x = new XMLHttpRequest(),
        s = document.createElement('script');

    x.open('GET', url);
    x.send();

    s.textContent = x.responseText;
    document.body.appendChild(s);
}

loadScript("assets/js/javascript1.js");
loadScript("assets/js/javascript2.js");
// ...

但是 这显然会大大降低您的页面速度，冻结它直到所有脚本都加载完毕。顺便说一下，有一些很好的库（例如 RequireJS 依赖于 jQuery）可以随时在您的页面中异步加载脚本，即使恕我直言，我对使用它们感觉不太好。

回答您的问题：如果您不想使用外部库（具有依赖项）最好将脚本保留在文档正文中：它使它们加载速度更快，不需要额外的努力。

Answer 3

有多种可能的解决方案。其中一些是：

RequireJS (AMD)
Browserify (CommonJS)
ES6 Module Transpiler（ES6 模块，将被转译为 AMD 或 CommonJS）

当然，它们都有优点。 AMD，顾名思义（Asynchronous Module Definition），就是为异步加载而生的

CommonJS 主要用于 Node.js 环境。 Browserify 用于使 Node.js 模块也可在浏览器中使用。

ES6 Module Transpiler 基于实际的ECMAScript 标准，将得到浏览器的支持。它同时支持同步和异步加载。

无论您如何选择，都不能忘记多个 HTTP 请求会增加开销，而且应该始终合并多个文件。当使用上述之一时，这也是可能的。

Answer 4

使用jQuery的简单演示：

var scripts = [
  'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js',
  'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js',
  'https://ajax.googleapis.com/ajax/libs/threejs/r76/three.js',
  'https://raw.githubusercontent.com/cloudinary/cloudinary_js/master/js/jquery.cloudinary.js'
];

异步加载

$.when( ...scripts.map(s => $.getScript(s)) )
    .done(console.log)

后续加载

$.getScript( scripts[0] )
    .then( $.getScript( scripts[1] ) )
    .then( $.getScript( scripts[2] ) )
    .then( $.getScript( scripts[3] ) )
    .then(console.log)

我创建了一个 jQuery 辅助函数，我通常将它放在 window 对象上，我称之为 dependencies 并且它有 async & sync 方法：

示例：

window.dependencies.async({ baseDir:"/js/a/b/", files:["a.js", "b.js", "c.js"] })

我怎样才能并且应该从不同的文件加载我的 .js 文件以保持清洁？

How can I, and should I, load my .js files from a different file for cleanliness?

html

javascript

readability

include

code-cleanup

使用jQuery的简单演示：

异步加载

后续加载

示例：