JavaScript での Require.js/AMD モジュラー読み込み使用例の概要-jsチュートリアル-php.cn

Require.js/AMD モジュラー読み込み

開発者は、スクリプトローダーを使用して、混沌としたリッチスクリプトアプリケーションをより秩序正しく作成したいと考えており、Require.js はそのようなオプションです。 Require.js は、AMD テクノロジと自動的に連携して、最も複雑なスクリプトの依存関係グラフも滑らかにする強力なツールキットです。
次に、同じ名前の Require.js 関数を使用した簡単なスクリプト読み込みの例を見てみましょう。

require([&#39;moment&#39;], function(moment) {
  console.log(moment().format(&#39;dddd&#39;)); // 星期几
});

ログイン後にコピー

require 関数は、モジュール名の配列を受け取り、これらすべてのスクリプトモジュールを並行して読み込みます。 yepnope とは異なり、Require.js はターゲットスクリプトが順番に実行されることを保証せず、実行順序がそれぞれの依存関係要件を満たすことを保証するだけですが、前提として、これらのスクリプトの定義が AMD (非同期モジュール定義、非同期モジュール定義) の仕様。

ケース 1: JavaScript ファイルの読み込み

 <script src="./js/require.js"></script> 
<script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

ログイン後にコピー

ケース 1 に示すように、2 つの JavaScript ファイル a.js と b.js があり、それぞれ、2 つのメソッド myFunctionA と myFunctionB を定義しています。 RequireJS を使用してこれら 2 つのファイルをロードすると、関数部分のコードはこれら 2 つのファイル内のメソッドを参照できます。

require メソッドの文字列配列パラメーターでは、さまざまな値を許可できます。文字列が「.js」で終わるか、「/」で始まるか、URL である場合、RequireJS はユーザーが JavaScript ファイルを直接読み込んでいるとみなします。それ以外の場合、文字列が「my/module」に似ている場合、これがモジュールであると判断され、対応するモジュールが配置されている JavaScript ファイルが、ユーザーが構成した BaseUrl とパスとともにロードされます。設定部分については後ほど詳しく紹介します。

ここで、RequireJS は、デフォルトでページのロード後に myFunctionA と myFunctionB が実行される必要があることを保証していないことに注意してください。ページのロード後にスクリプトが確実に実行されるようにする必要がある場合、RequireJS は独立した関数を提供します。 domReady モジュール。このモジュールをダウンロードするには、RequireJS 公式 Web サイトにアクセスする必要があります。このモジュールは、RequireJS には含まれていません。 domReady モジュールを使用すると、ケース 1 のコードを少し変更して、domReady への依存関係を追加できます。

ケース 2: ページが読み込まれた後に JavaScript を実行する

 <script src="./js/require.js"></script> 
<script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

ログイン後にコピー

ケース 2 のコードを実行すると、Firebug を通して、RequireJS が a.js と b.js に挿入されることがわかります。現在のページでは、JavaScript ファイルを非同期的にダウンロードするために使用される

著者別の最新記事