RequireJS の概要
RequireJS は JavaScript モジュール ローダーです。ブラウザで使用するのに最適です。 RequireJS を使用してモジュール式スクリプトを読み込むと、コードの読み込み速度と品質が向上します。
互換性
利点
Webページの応答損失を回避するためにjsファイルの非同期ロードを実現
コードの作成とメンテナンスを容易にするためにモジュール間の依存関係を管理
すぐに始めましょう
ステップ1
はじめにrequire.js
require() は配列です。依存関係が 1 つしかない場合でも、配列を使用して定義する必要があります
2 番目のパラメーターは、モジュール間の依存関係を解決するために使用できるコールバック関数 (callback) です。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["js/a"], function(){ alert("load finished"); }); </script> </head> <body> body </body> </html>
ステップ2
require.configを使用してモジュールの読み込み場所を設定します
固定の場所が比較的長い場合は、baseUrl: "js"を使用でき、jsを記述する必要はありませんpaths
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require.config({ paths : { "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"], "a" : "js/a" } }); require(["jquery", "a"], function(){ alert("load finished"); }); </script> </head> <body> body </body> </html>
ステップ3
ステップ2で繰り返し登場するrequire.configの設定です。各ページに設定を追加するとダメになります。requirejsには「マスターデータ」という機能があります
作成します。 main .js ステップ 2 の require.config を main.js に入れます
<script data-main="js/main" src="js/require.js"></script>
ステップ 4
require を通じてロードされたモジュールは通常、AMD 仕様に準拠する必要があります。つまり、define を使用してモジュールを宣言しますが、場合によっては、非 AMD 標準 JS をロードする必要がある場合、この時点では別の関数を使用する必要があります: shim
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] } }); require(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); }) });