jQueryで複数のjsファイルをまとめて動的に読み込む

大規模なサイトを作る際は目的別にjsファイルを分けて作業します。ツールを使ってそのファイルを統合してもよいのですが、分けてあった方がわかりやすいですよね。そこで、jQueryでまとめて読み込む部分を実装すれば楽になれると思ったので紹介します。

htmlファイル


<!DOCTYPE html>
<html lang="ja">
<head>
js many load
</head>
<body>



</body>
</html>

９行目の import.js に複数のjsファイルをまとめて読み込む記述をしていきます。

jQueryを使って動的に読み込む


$.getScript('test1.js');
$.getScript('test2.js');
// 以下、読み込むファイルを記述していく...

import.js に、読み込むjsファイルを記述していきます。jQueryの getScript() メソッドを使えば動的に読み込むことが可能です。内部でやっていることは、ajax と一緒です。非同期で読み込んでいます。しかし、ajax と違って、クロスドメインのjsファイルを読み込むことができます。htmlの <script> タグを減らしてすっきりさせたいときに使える技の紹介でした。