モダンWebブラウザ用のLoaderライブラリ「loadjs」の紹介です。
一般的にJavascript製のローダーと言えば、"Browserify" や "Webpack"が挙げられます。
上記の2つは複数のファイルを１つのバンドルとしてまとめるのに適しています。
しかしながら「1ページでしか使わない小さな機能の為に わざわざコンパイルして バンドルファイルが大きくするのは、、」という時に便利なライブラリが「loadjs」です。
loadjsは外部スクリプトを読み込むことが出来るjavascript製ライブラリで、"require"や"import"構文相当の機能がブラウザ内だけで実現出来ます。
loadjsの入手は こちら( GitHub内のレポジトリページ ) からライブラリを直接入手する方法と、"bower", "npm"を使っても入手可能です。
# npmコマンドでインストールする場合
npm install --save loadjs
# bowerを使ってインストールする場合
bower install --save loadjs
<!-- html内でloadjsの読み込み -->
<script src="/loadjs/dist/loadjs.min.js" charset="utf-8"></script>
* サポートされているWebブラウザ
- IE9+ (async: falseは IE10以降でサポート )
- Opera 12+
- Safari 5+
- Chrome
- Firefox
- iOS 6+
- Android 4.4+
loadjsの使い方は簡単で、loadjs()関数内の第一引数に読み込むスクリプトのパス、
successメソッド内で 読み込んだスクリプトのコールバック処理を書いていく感じです。
// loadjsの基本的な使い方
loadjs('/assets/js/yourfile.js', {
success: function() {
// 読み込んだスクリプトファイルの処理
}
});
第一引数を配列にすれば複数のファイルも一度に読み込むことができます。
loadjsは内部でrequireやimport関数を呼び出しているのではなく、動的にDOMを生成しているのでcssファイルの読み込みも出来ます。
コンタクトページ内でしか使わないようなDOMライブラリであれば、loadjsを使うとheadタグ内にcssの読み込みを書くことも省けます。
/* sweet-alertを使った例 */
// 複数のファイルを読み込んでいます
loadjs([
'/path/sweetalert/dist/sweetalert.min.js',
'/path/sweetalert/dist/sweetalert.css'
], {
success: function () {
// sweet-alertの呼び出し
swal('hello');
}
});
loadjsでは擬似ネームスペースのようなグループ機能も使ます。
使いたいライブラリが複数ある場合でもコールバック内のコードをスッキリ書くことが出来ます。
// sweet-alertのパス
var sw = {
js : '/path/sweetalert/dist/sweetalert.min.js',
css : '/path/sweetalert/dist/sweetalert.css'
};
// sweetalertというネームスペースを追加
loadjs([ sw.js, sw.css ],'sweet-alert', {
success: function () {
swal('hello');
}
});
/* ready()メソッドを使うとコールバック処理を分離することも出来ます */
loadjs([sw.js, sw.css], 'sweet-alert');
loadjs.ready('sweet-alert', {
success: function() {
swal('hello sweet-alert');
}
});
/* 複数のロードもメソッドチェーンで繋げることができます */
loadjs('/path/to/foo.js', 'foo');
loadjs('/path/to/bar.js', 'bar');
loadjs
.ready('foo', {
success: function() { /* foo.js loaded */ }
})
.ready('bar', {
success: function() { /* bar.js loaded */ }
});
スクリプトが読み込めなかった時の処理もerrorメソッド内にスッキリ書くことが出来ます。
// スクリプトが読み込めなかった時の処理
loadjs('/path/to/foo.js', 'foo');
loadjs('/path/to/bar.js', 'bar');
loadjs(['/path/to/thunkor.js', '/path/to/thunky.js'], 'thunk');
// 複数のグループに依存関係をつけることもできます
loadjs.ready(['foo', 'bar', 'thunk'], {
success: function() {
// 正常に読み込まれた時のコールバック処理
},
error: function(depsNotFound) {
// エラー時の処理
if (depsNotFound.indexOf('foo') > -1) {
// fooが読み込めなかった時の処理
};
if (depsNotFound.indexOf('bar') > -1) {}; // bar
if (depsNotFound.indexOf('thunk') > -1) {}; // thunk
}
})
以上がloadjsの紹介でした。
全体に適応させるスクリプトはwebpack等を使って１つのバンドルファイルにするのが好ましいですが、
小さな処理などはloadjsを使ったほうがファイルサイズを小さく収められそうです。
既に出来上がっているサイトでも、後からライブラリを追加しても処理を用意に書くことが出来るので使い勝手が良さそうですね！
また、"page.js"などのroutingライブラリと一緒に使って、
ページごとに読み込むライブラリを分けたり、色々と おもしろい事が出来そうです。
GitHub : muicss/loadjs
