Requirejs-modules-loading
提供:Dev Guides
RequireJS-モジュールの読み込み
モジュールは、jsファイルの* define()*関数を使用してロードされます。 モジュールをhtmlファイルにロードするための構文は以下のとおりです-
<script data-main = "main" src = "require.js"></script>
上記のスクリプトタグでは、_main_を使用して、_require.js_に関連するパッケージをセットアップします。この例では、ソースパッケージは_team1_および_team2_です-
例
次の例は、RequireJSでモジュールを定義およびロードする方法を説明しています。 _indexl_という名前のhtmlファイルを作成し、その中に次のコードを配置します。
<!DOCTYPE html>
<html>
<head>
<script data-main = "main" src = "require.js"></script>
</head>
<body>
<h2>RequireJS Example</h2>
</body>
</html>
_main.js_という名前の js ファイルを作成し、次のコードをその中に配置します。
define(function (require) {
var team1 = require("./team1");
var team2 = require("./team2");
alert("Welcome to Tutorialpoint");
document.write("<h4>Hyderabad Team: </h4>" + "<br>" + " Team:"+team1.team +"<br>
"+"Captain:" +team1.captain +"<br>");
document.write("<h4>Bangalore Team: </h4>" + "<br>" + " Team:"+team2.team +"<br>
"+"Captain:"+team2.captain +"<br>");
});
_team1.js_および_team2.js_という名前でさらに2つのjsファイルを作成し、それぞれ次のコードを配置します。
*team1* の場合-
define({
team: "Sunrisers Hyderabad",
captain : " David Warner"
});
*team2* の場合-
define({
team: "RCB",
captain : "Virat Kohli"
});
出力
ブラウザでHTMLファイルを開きます。次のスクリーンショットのように出力が表示されます-
次に、「OK」ボタンをクリックして、次のスクリーンショットのようにモジュールから別の出力を取得します-