この記事は、マルチページアプリケーションの例の分析を伴う、要件のいくつかの知識ポイントの要約です。
このケースのディレクトリ構造は次のとおりです。
requirejs api 3つの主な関数：定義（モジュールの作成）、require（load module）、およびconfig（config）
1。HTMLファイルにJSファイルをロードします
page1.htmlの内容は次のとおりです。
<！doctype html> <html> <head> <title> page 1 </title> <script data-main = "scripts/page1" src = "src =" src = "lib/require.js"> </script> </head> <
page2.htmlの内容は次のとおりです。
<！doctype html> <html> <head> <title> page 2 </title> <script data-main = "scripts/page2" src = "src =" src = "lib/require.js"> </script> </head> <
知識拡張：
Data-Main属性は、Webプログラムのメインモジュールを指定し、このファイルは最初にrequireJSによってロードされます。 requirejsのデフォルトのファイル接尾辞名はjsであるため、page1.jsはpage1として短縮できます
スクリプトファイルをロードするためのルートパス優先ルール
require（）を使用してモジュールをロードすると、.jsサフィックスが省略され、baseurlから検索されます。 .JSサフィックスがあるか、「/」で始まる、またはURLプロトコル（http/https）を含む場合、ルートは
特定のパス設定に従って検索します
config> data-main>デフォルトのbaseurl
Data-Mainとconfigが設定されていない場合、デフォルトのbaseurlは、参照するhtmlページが必要です。Jsが配置されています。
Data-Mainを設定すると、Baseurlはメインモジュールが配置されているディレクトリです（たとえば、最初のHTMLのメインモジュールはPage1.jsなので、それが配置されているディレクトリ/スクリプトはルートディレクトリです）
構成を構成し、BaseURLを明示的に設定し、各モジュールの個別のパスを設定します。
2。モジュールなどのパスを構成します。
require.config（）メソッドを使用して、モジュールの読み込み動作をカスタマイズします。マルチページアプリケーションでは、この例のcommon.jsファイルなどの共通ファイルに構成を記述できます。次に、各ページが現在の構成を読み込んだ後、必要なモジュールがコールバック関数にロードされます。
common.jsコードは次のとおりです。
require.config（{baseurl： 'scripts/app'、paths：{jquery：['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min','../lib/jquery']}}）;知識拡張：
サポートされている構成項目：
baseurl：
すべてのモジュールの検索ルートパス。注：ロードされたJSファイル（.JSで終了し、「/」で始まり、プロトコルが含まれている）が使用されない場合、BaseURLは使用されません。
パス：
Baseurlのすぐ下に直接配置されていないパスマップモジュール名。パスの設定が「/」で始まるか、URLプロトコルが含まれている場合を除き、パスを設定するときの開始位置はBaseURLに対して相対的です。
注：パス解像度メカニズムが.jsサフィックスを自動的に追加するため、パスで定義されたパスには.jsの接尾辞を含めることはできません。また、ローディングパスは複数回設定できます。 CDNからの読み込みが失敗した場合、ローカルJSファイルはロードされます。
シム：
define（）を使用しないモジュールの構成に依存関係を宣言します。
注意する必要がある2つのパラメーターがあります。
（1）値（出力変数名）をエクスポートし、メソッドインターフェイスを公開します
（2）モジュールの依存性を示すDEPSアレイ
のように：
require.config（{baseurl： '/scripts/lib'、shim：{zepto：{exports： '$'}、backbone：{deps：['underscore'、 'zepto']、exports： 'backbone'}、 'zepto.anime'：['zepto'}）;3。モジュールの読み込み
Page1.jsコードは次のとおりです。
require（['./ common']、function（common）{require（['saypage1']、function（saypage1）{saypage1.hello（）;}）;}）;Page2.jsコードは次のとおりです。
require（['./ common']、function（common）{require（['saypage2']、function（saypage2）{saypage2.hello（）;}）;}）;知識の拡大：
require（）関数は2つのパラメーターを受け入れます。最初のパラメーターは、依存するモジュールを表す配列です。 2番目のパラメーターはコールバック関数であり、現在指定されているすべてのモジュールが正常にロードされた後にのみ呼び出されます。ロードされたモジュールは、コールバック関数のパラメーターとして呼び出すことができます。
必要なモジュールが構成が完了した後にのみロードされるようにするために、主にパスの正しい分析用であり、コールバック関数でそれを必要とします。
4。モジュールの定義
saypage1.jsのコード：
define（['jquery']、function（$）{function sayhi（）{$（ 'body'）。append（ '<h1> hello page1！</h1>'）;} return {hello：sayhi}}）;知識拡張：
定義関数は、2つのパラメーターも受け入れます。最初のパラメーターは従属モジュールの配列で、2番目のパラメーターはコールバック関数です。
もちろん、最終的に起動すると、JSファイルをマージして圧縮する必要があります。 R.JSを使用できます。これは便利で高速です〜
上記は、編集者が紹介したrequirejsマルチページアプリケーションの分析の例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！