eye-catch-150111
前置き

初めてrequire.jsを使う方向けの使い方のまとめ第2弾です。第1弾では、require.jsの概略と、最も簡単な使い方をせつめいしました。今回はステップを進め、javascriptをひとつのファイルで管理してみたいとおもいます。

2.HTMLが<script>タグだらけに・・・require.jsでまとめて管理したい。

前回、require.jsを利用してhtmlから直接「alert.js」を呼び出す記述を学びました。今回は複数のjavascriptファイル(alert1.jsとalert2.js)をmain.jsという新しいファイルにまとめてみます。
まずは、サンプル2 – Amitenをご覧ください。

サンプルでは、alert1.jsとalert2.jsに書かれた、2つのアラートが現れましたでしょうか?早速試してみます。


1.main.jsファイルを制作し、alert1とalert2を呼び出す記述をする。

require.jsと同じ階層に空のmain.jsファイルを制作し、下記サンプルコードを記載します。

2.data-main属性でmain.jsへの相対パスでリンクする。

前回htmlへ記述した、<script src=”js/require.js”\>にdata-main属性を追加。そこに、main.jsへのリンクをします。注意点として、※main.jsへのリンクは、記述するhtmlファイルからの相対パスを記載します。

そして毎回のことですが、拡張子[.js]は削除して記載しましょう。

以上、こんだけ!無事、アラートが2つ現れましたでしょうか?最後にもう一度ポイントを整理しておきます。

ポイントは2つ

  1. main.jsからjsファイルを呼び出すときは、main.jsからの相対パスで書く。
  2. main.jsはdata-main属性を利用して、htmlファイルからの相対パスで呼び出す。

初めての頃は混同しやすいので気をつけてください。

次回は、jQueryのプラグインを、require.jsで動かしたい。をお送り致します。

page
1 / 1