Carpe Diem

  Top > スポンサー広告> JavaScript > RequireJS(その1)  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

RequireJS(その1)

2013 - 11/15 [Fri] - 11:03

RequireJSはjsファイル同士の依存関係を崩さないよう非同期で読み込みつつ、多重読み込みなども防止してくれるライブラリです。

あと何より嬉しいのが「依存関係を明示出来る点」です。普通のHTMLだと、どのモジュール(.js)がどれに依存してるか不明なので、ある .js ファイルを外すと全然動かなくなることもしばしば。結果「とりあえず動くから入れておこう」といった用途不明の .js ファイルが出てきます。RequireJSなら「どのモジュールがどれに依存しているか明示できる」ので、開発がしやすくなります。

今回はまず普通のJSの読み込み方と同じ状態ができるお試し版の説明です。

使うのは現在最新の v2.1.9 です。

◆ケース
js
├ a.js
├ b.js
└ c.js

があり、以下の依存関係がある場合
a.js ← b.js(b は a に依存)
a.js, b.js ← c.js(c は a, b に依存)


普通のHTMLコードなら
<script src="js/a.js"></script>
<script src="js/b.js"></script>
<script src="js/c.js"></script>


の順に読み込むことで、依存性を解決します。


◆RequireJSで書く場合
慣習的に以下のフォルダ構成にすることが多いです。
js
├ app.js
├ require.js
└ libs
  ├ a.js
  ├ b.js
  └ c.js

app.jsというのは最初に読み込ませるファイルです。プログラムで言うmain関数的な役割ですね。

HTMLは
<script data-main="js/app.js" src="js/require.js"></script>


読み込むのはこれだけです。シンプル!

app.js
require(['libs/c']);

依存関係の末端を .js なしで書きます。全て書いて下さい。今回は c.js だけが末端なので、['c']としてます。
またパスの開始地点は最初に読み込んだ app.js の位置になるので、js/libs/c ではないです。ご注意。

依存関係の末端?なにそれ? とよく分からなくて
app.js
require(['libs/a', 'libs/b', 'libs/c']);

と書いてしまっても大丈夫です。a.js, b.js, c.js それぞれの依存関係は、それぞれで明示していきます。

◆モジュールの書き方
a.js
console.log('a.js'); //処理


b.js
define(['libs/a'], function() {
console.log('b.js'); // 処理
})


c.js
define(['libs/a', 'libs/b'], function() {
console.log('c.js'); // 処理
})


それぞれ依存するモジュールを配列の中にいれます。ちなみに c.js は b.js に依存し、b.js は a.js に依存しているので
c.js
define(['libs/b'], function() {
console.log('c.js'); // 処理
})


と書いても動きます。ですが依存関係を明示するために、こちらは非推奨です。

これで使えるようになります。


◆動作確認
HTMLを開くと、コンソールに

a.js
b.js
c.js

と表示されました。お疲れ様でした。



ソース:
RequireJS moduleについて
java-ja.js #2 RequireJS実践編

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。