RequireJS は読込みをブロックすること無く複数のJavaScriptを読込むことが可能なライブラリです。
ロード後に関数を実行させたりとか現在のWeb制作に必要な機能を提供してくれています。
便利なのでしょう、すでに多くのHow toがネット上にあふれています。
読込みには別のライブラリを使っていたのですが、この良いと噂のrequire.jsを試してみます。
しかし早速つまづいたのがjQueryの読込みでした。
このrequire.jsを使ってjQueryを読込む方法はRequireJSのサイトに詳しく書かれています。
HOW TO USE REQUIREJS WITH JQUERY
解説されている方法は require.jsとjQueryをcombined（合体）させた特別なrequire-jquery.jsを使用した方法です。
これでも良いっちゃ良いけど、最新版jQueryの保証は無くなります。
できればjQueryと言えども他のJavaScriptファイルと同じように特殊な形で無く読込めると幸せです。
オリジナルのrequire.jsとjQueryの組み合わせで使えるのがベストなんだけど…
メインファイル(JavaScript)を工夫するとcombinedバージョンでなくても良いようです。
stackoverflow: jquery mobile require.js and backbone
stackoverflowは知識の宝庫です、ありがたい。
jQueryの他にも色々と必要なファイルを読込ませてみました。
index.html
<script data-main="js/main" src="js/libs/require-2.1.1.min.js"></script> |
main.js
require.config({ baseUrl: '/js/', paths: { requestAnimationFrame: 'libs/RequestAnimationFrame', tween: 'libs/tween.min', loadManager: 'libs/LoadManager', jquery: 'libs/jquery-1.8.3.min', underscore: 'libs/underscore-min' }, shim: { underscore: { exports: '_' }, jquery: { deps: ['tween', 'requestAnimationFrame', 'loadManager'], exports: 'jquery' } } }); require( ['jquery', 'underscore', 'tween', 'loadManager', 'requestAnimationFrame'], function ($, _) { 'use strict'; var $w = window, document = $w.document, Array = $w.Array, tween = $w.TWEEN, loader = $w.LoadManager, requestAnimationFrame = $w.requestAnimationFrame ; $(function(){ console.log('dom ready'); }); } ); |
ファイル階層は以下の様になっています。
index.html
js
main.js
libs
require-2.1.1.min.js
jquery-1.8.3.min.js
RequestAnimationFrame.js
tween.min.js
underscore-min.js
LoadManager.js