ホームページ > 記事 > ウェブフロントエンド > JavaScript での Require.js/AMD モジュラー読み込み使用例の概要
JavaScript での Require.js/AMD モジュラー読み込み使用例の概要
- 伊谢尔伦オリジナル
- 2017-07-21 15:48:081434ブラウズ
Require.js/AMD モジュラー読み込み
開発者は、スクリプト ローダーを使用して、混沌としたリッチ スクリプト アプリケーションをより秩序正しく作成したいと考えており、Require.js はそのようなオプションです。 Require.js は、AMD テクノロジと自動的に連携して、最も複雑なスクリプトの依存関係グラフも滑らかにする強力なツールキットです。
次に、同じ名前の Require.js 関数を使用した簡単なスクリプト読み込みの例を見てみましょう。
require(['moment'], function(moment) {
console.log(moment().format('dddd')); // 星期几
});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 つのファイル内のメソッドを参照できます。
ケース 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 ファイルを非同期的にダウンロードするために使用される <script> タグがそれぞれ宣言されています。 async 属性は現在、ほとんどのブラウザでサポートされており、27835793f4768f4164d1421d99e293bc タグ内の js ファイルが他のページ コンテンツのダウンロードをブロックしないことを示します。 <p><br/><span style="color: #800000">ケース 3: RequireJS モジュール名、<strong><br/> モジュールの依存関係のリスト、それらの依存モジュールの読み込みの最後にトリガーされる <p class="jb51code"><br/> コールバックによって挿入された <スクリプト>。 <p><ul class=" list-paddingleft-2"><li><p>RequireJS を使用して JavaScript モジュールを定義するここでの JavaScript モジュールは、グローバル変数にアクセスする必要がないという点で、従来の JavaScript コードとは異なります。モジュール設計により、JavaScript コードは、「グローバル変数」にアクセスする必要がある場合に、依存関係を通じてこれらの「グローバル変数」をパラメーターとしてモジュールの実装本体に渡すことができるため、実装内でグローバル変数にアクセスしたり宣言したりする必要がなくなります。機能を利用して、大規模で複雑な名前空間管理を効果的に回避します。 <li>CommonJS の AMD 仕様に記載されているように、JavaScript モジュールの定義は、define メソッドを通じて行われます。 <p>まず簡単な例を見てみましょう。この例では、student モジュールと class モジュールを定義することによって、student オブジェクトがメイン プログラムで作成され、クラスに配置されます。 <li>ケース 4: 学生モジュール、student.js<p><p><strong><br/><br/><pre class="brush:js;"><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_"
data-requiremodule="js/a.js" src="js/a.js"></script></pre><br/><br/><span style="color: #800000">ケース 5: クラスモジュール、class.js<strong><strong><br/><pre class="brush:js;">define(function(){
return {
createStudent: function(name, gender){
return {
name: name,
gender: gender
};
}
};
});</pre> <p class="jb51code"><br/>ケース 6: メインプログラム<p><span style="color: #800000"><strong><br/><pre class="brush:js;"> define(function() {
var allStudents = [];
return {
classID: "001",
department: "computer",
addToClass: function(student) {
allStudents.push(student);
},
getClassSize: function() {
return allStudents.length;
}
};
}
);</pre> 学生モジュールとクラスモジュールは独立したモジュールです。 次に、このモジュールは学生モジュールとクラスモジュールに依存するため、メインプログラム部分のロジックも実行できるようにします。梱包されること。 <p class="jb51code"><br/>ケース 7: 学生モジュールとクラス モジュールのマネージャー モジュールに依存する、manager.js<p><span style="color: #800000"><strong><br/><pre class="brush:js;"> require(["js/student", "js/class"], function(student, clz) {
clz.addToClass(student.createStudent("Jack", "male"));
clz.addToClass(student.createStudent("Rose", "female"));
console.log(clz.getClassSize()); // 输出 2
});</pre><p class="jb51code"><br/>ケース 8: 新しいメイン プログラム<p><br/><span style="color: #800000"><strong><br/><pre class="brush:js;">require(["js/manager"], function(manager) {
manager.addNewStudent("Jack", "male");
manager.addNewStudent("Rose", "female");
console.log(manager.getMyClassSize());// 输出 2
});</pre><p>通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。<p>其实要想让自己的站点更快捷，可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本，请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本，请考虑Require.js。选择最适合任务的工具，然后使用它，享受它带来的便捷。</script>以上がJavaScript での Require.js/AMD モジュラー読み込み使用例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。