我如何並且應該從另一個文件加載我的.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

$.getScript(...) jQuery方法是異步的，因此它不會檢索您的腳本，從而導致腳本以隨機順序加載（例如，“ script3”在“ script1”之前加載）：其中的某些代碼依賴於先前的腳本，因此很有可能完全出錯並無法為未定義的變量TypeError某些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 helper函數，通常將其放在window對象上，我將其稱為依賴關系 ，它具有async ＆ 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模塊轉換程序（ES6模塊，將轉換為AMD或CommonJS）

當然，它們都有優勢。 顧名思義（異步模塊定義），AMD是為異步加載而創建的。

CommonJS主要用於Node.js環境。 Browserify也用於使Node.js模塊也可在瀏覽器中使用。

ES6 Module Transpiler基於實際的ECMAScript標准，並且將由瀏覽器支持。 它支持同步和異步加載。

無論您如何選擇，都不要忘記多個HTTP請求會增加開銷，並且應該始終合並多個文件。 當使用前述之一時，這也是可能的。

我如何並且應該從另一個文件加載我的.js文件以保持整潔？

問題描述

4 個解決方案

解決方案1
2 已采納 2015-04-13 18:12:57

解決方案2
2 2016-07-19 22:20:55

使用jQuery的簡單演示：

異步加載

結果加載

例：

解決方案3
1 2015-04-13 18:11:58

解決方案4
1 2015-04-13 18:20:31

我如何並且應該從另一個文件加載我的.js文件以保持整潔？

問題描述

4 個解決方案

解決方案1 2 已采納 2015-04-13 18:12:57

解決方案2 2 2016-07-19 22:20:55

使用jQuery的簡單演示：

異步加載

結果加載

例：

解決方案3 1 2015-04-13 18:11:58

解決方案4 1 2015-04-13 18:20:31

解決方案1
2 已采納 2015-04-13 18:12:57

解決方案2
2 2016-07-19 22:20:55

解決方案3
1 2015-04-13 18:11:58

解決方案4
1 2015-04-13 18:20:31