Require.jsを使ってJavaScriptを管理する
RequireJS
http://requirejs.org/
JavaScriptのライブラリやモジュールが増えてくると、読み込む順番を管理する必要が出てくる。
. ├── module1.js ├── module2.js ├── module3.js ├── lib │   ├── json2.js │   ├── pure.js │   ├── raphael-min.js │   └── underscore.js └── utils ├── styleUtils.js └── stringUtils.js
この様な状態だと、自前のモジュールをロードする前に
その中で使っているユーティリティ系のライブラリをロードしておく必要があり、さらにその中で使っている、外部ライブラリのロードを先にしておく必要があり。。。
require.jsを使うとこのような管理を簡単にする事ができる。
. ├── module1.js ├── module2.js ├── module3.js ├── lib │   ├── json2.js │   ├── pure.js │   ├── raphael-min.js │   └── underscore.js │ ├── main.js ** ├── require.js * └── utils ├── styleUtils.js └── stringUtils.js
require.js本体と、JSファイルを管理するためのファイル(ここではmain.js)を用意する。
ロードしたい順番としては、libディレクトリ内の外部ライブラリ→それらを使いつつ作った自前のユーティリティ→さらにそれを使って作っているメインのJavaScriptファイル等
main.js
require([ 'lib/json2', 'lib/underscore', 'lib/pure', 'lib/raphael-min', ], function() { if(_ && $p && Raphael) { console.log('lib ready.'); } require([ 'utils/Utils' ]); require.ready(function() { if(Util) { console.log('Utils ready'); } require([ 'module1', 'module2' ]); console.log('DOM ready!'); }); });
main.jsを作ったら、HTMLで読み込む。
<!-- data-main属性にmain.jsを指定 --> <script data-main="main" src="js/require.js"></script>
scriptタグを1つ書けば済むので、とても楽です。