使用jQuery的简单演示：

Question

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

<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

$.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");
// ...

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

回答你的问题：如果你不想使用外部库（带有依赖关系）最好将脚本保存在文档正文中：它会使它们加载更快并且不会需要额外的努力。

Answer 2

使用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＆amp; sync方法：

实施例

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

Answer 3

可能是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 4

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

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

当然，所有这些都有优势。正如名称（异步模块定义）所暗示的那样，AMD是为异步加载而创建的。

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

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

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

我怎样才能，并且应该从不同的文件加载我的.js文件以获得清洁度？

4 个答案:

使用jQuery的简单演示：

异步加载

随后加载

实施例