スクリプトタグを介したJSのデフォルトの読み込み方法は同期されます。つまり、最初のスクリプトタグのJSがロードされた後、2番目のスクリプトタグがロードされ始め、すべてのJSファイルがロードされるまで。さらに、JSの依存関係は、スクリプトの順序を通じて保証する必要があります。また、JSロード中、ブラウザは応答を停止し、ユーザーエクスペリエンスに大きく影響します。これに基づいて、JSの多くのソリューションが表示され、ロードされているため、JSを要求することもその1つです。
requireJSによってロードされたモジュールは、通常、AMD標準に準拠するモジュール、つまり、露出した方法とruturnの変数を定義および返すモジュールです。要求は、AMD標準を飛行するモジュールをロードすることもできますが、それはより面倒であり、今回は関与しません。
JS Mainのロードが必要な場合は、次の側面が含まれます。
HTMLデモ
<script src = "js/require.js" defer async = "true" data-main = "js/main"> <！ - 必要なjsパスを宣言し、asyncロードとして宣言し、エントリモジュールをmain.jsとして指定します（省略） - >
main.js
require.config（{//モジュールパスの位置を宣言する：{"jQuery"： "libs/jquery" "login"： "libs/login"} //またはbaseurlを使用して、すべてのモジュールのパスを指定します： "js/libs"}）; //モジュールをロードするために必要です。最初のパラメーターは配列です。つまり、ロードするモジュールは配列の順にロードされます。 2番目はコールバック関数で、すべてのロードが完了した後に実行されます。 ['jquery'、 'login']、function（$、login）{alert（ "jQuery and loginモジュールのロード成功！"）; login.do_login（）; // other}）;AMDに沿ったログインモジュール定義
//定義jQuery（['jquery']、function（$）{//いくつかの定義関数do_login（）{$ .post（ '/sessions/create'、{uname：uname "）。 }）; //他のモジュールの定義定義（function（）{//一部の定義は{xx：xx};}）;RailsはJSローダーを適用しません。一方で、Rails Asset Pipeの新しいバージョンは、すべてのJSファイルを1つのJSファイルにパッケージ化し、複数のJSロードステータスなしでパッケージ化します。一方、Turbolinkは、いわゆるPJAXテクノロジーを賞賛と批判を混同して使用しています。デフォルトのリンクはAjaxメソッドに変更され、HTMLのBOD部分のみを取得し、ヘッド部分は変更されていないため、JSロードは初めて開かれたときにのみ実行されます。
ケース1：JavaScriptファイルのロード
<script src = "./ js/require.js"> </script> <script> require（["./ js/a.js"、 "./js/b.js"]、function（）{myfunction（）; myfunctionb（）;}）; </script>要求方法の文字列配列パラメーターは、異なる値を可能にすることができます。文字列が「.js」で終わる、または「/」で始まる、またはURLである場合、requirejsはユーザーがJavaScriptファイルを直接読み込んでいると考えます。それ以外の場合、文字列が「my/module」に似ている場合、これはモジュールであると考えられ、対応するモジュールがbaseurlとユーザーによって構成されたパスに配置されているJavaScriptファイルをロードします。構成セクションについては、後で詳しく説明します。
ここでは、デフォルトでは、requirejsがページを読み込んだ後にmyFunctionとmyFunctionBを実行する必要があることを保証しないことを指摘する必要があります。ページが読み込まれた後にスクリプトが実行されることを確認する必要がある場合、requirejsは独立したdomreadyモジュールを提供します。このモジュールは、requirejsに含まれていないrequirejsの公式Webサイトからダウンロードする必要があります。 DOMREADYモジュールを使用すると、ケース1のコードがわずかに変更され、DOMREADYへの依存性があります。
ケース2：ページが読み込まれた後にJavaScriptを実行します
<script src = "./ js/require.js"> </script> <script> require（["domready！"、 "./js/a.js"、 "./js/b.js"]、function（）{myfunctionb（）; myfunctionb（）;}）; </script>Case 2のコードを実行した後、FireBugを使用して、JavaScriptファイルを非同期にダウンロードするためにA.JSとB.JSがそれぞれA.JSとB.JSを宣言しているため、RequireJSが現在のページに<Script>タグを挿入することがわかります。 ASYNC属性は現在、ほとんどのブラウザによってサポートされています。これは、この<Script>タグのJSファイルが他のページコンテンツのダウンロードをブロックしないことを示しています。
ケース3：<スクリプト> requirejsによって挿入されました
<script type = "text/javascript" charset = "utf-8" async = "" data-requirecontext = "_" data-requiremodule = "js/a.js" src = "js/a.js"> </script>
JavaScriptモジュールを定義するためにrequirejsを使用します
ここでの従来のJavaScriptコードと違うのは、グローバル変数へのアクセスを必要としないことです。モジュラー設計により、JavaScriptコードは、「グローバル変数」にアクセスする必要があるときに、依存関係を通じてこれらの「グローバル変数」をパラメーターとして渡すことができ、実装におけるグローバル変数や関数へのアクセスまたは宣言を避け、多数の複雑な名前空間管理を効果的に回避できます。
CommonJSのAMD仕様に記載されているように、JavaScriptモジュールの定義は、定義メソッドを介して実装されています。
まず、簡単な例を見てみましょう。この例では、メインプログラムに学生オブジェクトを作成し、学生モジュールとクラスモジュールを定義することにより、学生オブジェクトをクラスに配置します。
ケース4：学生モジュール、Student.js
define（function（）{return {createStudent：function（name、gender）{return {name：name、gender：gender};};};}）; }）;ケース5：クラスモジュール、class.js
define（function（）{var allstudents = []; return {classId： "001"、department： "computer"、addtoclass：function（sudent）{allstudents.push（sudent）、getclassize：function（）{return allstudents.length;}};};};};ケース6：メインプログラム
[["js/sudent"、 "js/class"]、function（desute、clz）{clz.addtoclass（student.createStudent（ "jack"、 "male"））; clz.addtoclass（sudine.createstudent（ "rose"、 "famey"））; console.log（clz.getclasssize（）;学生モジュールとクラスモジュールはどちらも独立したモジュールです。新しいモジュールを定義しましょう。このモジュールは、学生とクラスのモジュールに依存しているため、メインプログラムパーツのロジックもラップできます。
ケース7：学生とクラスのモジュール、Manager.jsに依存するマネージャーモジュール
定義（["js/sudent"、 "js/class"]、function（desute、clz）{return {addnewstudent：function（name、gender）{clz.addtoclass（desudent.createstudent（name、gender））;}、getmyclassize：function（）{return clz.getclassize（）;};};ケース8：新しいメインプログラム
[["js/manager"]、function（manager）{manager.addnewstudent（ "jack"、 "male"）; manager.addnewstudent（ "rose"、 "female"）; console.log（manager.getMyclassize（）; // output 2}）;上記のコードの例を介して、モジュールの作成方法、このモジュールの使用方法、モジュール間の依存関係を定義する方法を明確に理解しました。まだ使用するヒントがいくつかあります。
モジュールのIDを提供しないようにしてください。 AMD仕様に記載されているように、このIDはオプションです。提供された場合、モジュールの移行性はrequireJSの実装に影響を受け、ファイルの場所の変更により、IDが手動で変更されます。
各JavaScriptファイルは、1つのモジュールのみを定義します。モジュール名とファイルパスの検索アルゴリズムは、この方法が最適であると判断します。複数のモジュールとファイルは、オプティマイザーによって最適化されます。モジュールの循環依存関係は避けてください。避けることが本当に不可能な場合は、モジュールに「要求」モジュールに依存関係を追加して、コードで直接使用できます。
require（ "DependencyModulename"）
configure requirejs：
前の紹介では、基本的な質問を見落としていたようです。モジュール名はどのようにしたのですか？モジュールが必要な場合、このモジュールは特定のJavaScriptファイルにどのようにマッピングされますか？これには、requirejsを構成する方法が含まれます。
requirejsをロードする最も簡単な方法は、ケース2に表示されます。この場合、sequirejsにbaseurlとパスを指定しません。ケース10に示されているメソッドの場合、データメインは、現在のindex.htmlディレクトリに並行してプログラムの入り口として並行してフォルダーのa /js/main.jsを指定し、 /jsディレクトリも他のモジュールを定義するときにbaseurlとして使用されます。
ケース9：ロードrequire.js
<Script data-main = "js/main" src = "scripts/require.js"> </script>
したがって、以前の例のすべてのモジュール依存関係は、「JS/」から「学生」、「クラス」、「マネージャー」などから削除できます。指定されたBaseURLとパスを表示するより直接的な方法は、require.configを使用してこれらのパラメーターを設定することです。ケース10に示されているように。
ケース10。Lespurjsの構成
<script type = "text/javascript" src = "./ js/resight.js"> </script> <script type = "text/javascript"> require.config（{baseurl： "./js"、paths：{"some"： "some/v1"}、waiteds：10}）; [["some/module"、 "my/module"、 "./js/a.js"]、function（somemodule、mymodule）{}）; </script>Baseurlは、すべてのモジュールのベースURLを示します。たとえば、「my/module」によって読み込まれたスクリプトは、実際には/js/my/module.jsです。 .JSで終了するファイルは、ロード時にbaseurlを使用しない場合、現在のindex.htmlが配置されている相対パスを使用するため、「./js/」を追加する必要があることに注意してください。 Baseurlが指定されていない場合、データメインで指定されたパスが使用されます。
パスで定義されているパスは、上記の例の一部/モジュールなど、モジュールのパスを置き換えるために使用されます。特定のJavaScriptファイルパスは/js/some/v1/module.jsです。 WAICSECONDSは、JavaScriptファイルのロードにかかる時間を指定します。デフォルトは、ユーザーがそれを指定することなく7秒です。
もう1つの重要な構成はパッケージです。これは、CommonJS AMD仕様に準拠する他のディレクトリ構造を指定して、豊富なスケーラビリティをもたらすことができます。 Dojo、JQueryなどのモジュールは、この構成を介してRequireJSによってロードすることもできます。
その他の構成可能なオプションには、ロケール、コンテキスト、DEP、コールバックなどが含まれます。関心のある読者は、requirejsの公式Webサイトで関連するドキュメントを確認できます。