RequireJS ライブラリを使用した JavaScript モジュールのロードに関するチュートリアルの例

script タグによる js のデフォルトの読み込み方法は同期です。つまり、最初の script タグの js が読み込まれた後、2 番目の js の読み込みが開始され、すべての js ファイルが読み込まれるまで続きます。また、js の依存関係はスクリプトの順序によって確保する必要があり、js のロード中にブラウザが応答を停止してしまい、ユーザー エクスペリエンスに大きな影響を与えるため、js のロードとアンロードの問題に対する多くの解決策が登場しています。 require js もその 1 つです。

requirejs によってロードされるモジュールは通常、AMD 標準に準拠するモジュールです。つまり、define と ruturn で定義され、メソッドと変数を公開するモジュールを返します。requirejs は AMD 標準を満たすモジュールをロードすることもできますが、それはより面倒で、今回は取り上げられません。

require ロード js main には次の側面が含まれます:

script タグの data-main 属性は、requirejs によってロードされるエントリ モジュールを宣言し、async="true" (非 ie) タグと defer(ie) タグは非同期ロードを示します。

require.configはモジュールに対応するパスを設定します

requireは依存関係を宣言します

htmldemo

<script src ="js/require.js" defer async="true" data-main="js/main" >
 
<!--给出requirejs路径，声明为异步加载，指定入口模块为
 
main.js（可省略.js）-->

main.js

require.config({
  //声明模块的位置
  paths: {
    "jquery":"libs/jquery"
    "login" : "libs/login"
  }
  //或使用baseUrl指定所有模块的路径
  baseUrl: "js/libs"
});
//使用require加载模块，第一个参数为数组，即要加载的模块，将按数组顺序加载；第二个为回调函数，在全部加载完成后执行。
require(['jquery','login'],function($,Login){
  alert("jquery and login module load success!");
  Login.do_login();
  //some else
});

amdのログインモジュール定義に準拠します

//依赖jquery的定义
 define(['jquery'],function($){
   // some definations
  function do_login(){
    $.post('/sessions/create',{uname:$("#uname").val(),
         password:$("#password").val()},function(data){
     //some 
   });
   return {do_login:do_login};
  } 
 });
 
//不依赖其他模块的定义
define(function(){
 //some definations
 return {xx:xx};
});

railsはjsローダーを適用しません。これは新しいバージョンです。Rails のアセット パイプは、複数の js ロード状態を持たずに、すべての js ファイルを 1 つの js ファイルにパッケージ化します。一方、turbolink は、混合レビューのあるいわゆる pjax テクノロジーを使用します。 ajax モードは html の bod 部分のみを取得し、head 部分は変更されないため、Web サイトを初めて開いたときにのみ js が読み込まれます。

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

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

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

ここで、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 のコードを実行すると、RequireJS が現在のページに a.js と b.js の 27835793f4768f4164d1421d99e293bc タグを挿入することがわかります。 . JavaScript ファイルを非同期的にダウンロードするために使用されます。 async 属性は現在、ほとんどのブラウザでサポートされており、27835793f4768f4164d1421d99e293bc タグ内の js ファイルが他のページ コンテンツのダウンロードをブロックしないことを示します。

ケース 3: RequireJS が挿入された 3f1c4e4b6b16bbbd69b2ee476dc4f83a

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_"
data-requiremodule="js/a.js" src="js/a.js"></script>

RequireJS を使用して JavaScript モジュールを定義する

ここでの JavaScript モジュールは、グローバル変数にアクセスする必要がないという点で従来の JavaScript コードとは異なります。モジュール設計により、JavaScript コードは、「グローバル変数」にアクセスする必要がある場合に、依存関係を通じてこれらの「グローバル変数」をパラメーターとしてモジュールの実装本体に渡すことができるため、実装内でグローバル変数にアクセスしたり宣言したりする必要がなくなります。機能を利用して、大規模で複雑な名前空間管理を効果的に回避します。

CommonJS の AMD 仕様に記載されているように、JavaScript モジュールの定義は、define メソッドを通じて行われます。

まず簡単な例を見てみましょう。この例では、メイン プログラムで Student オブジェクトを作成し、Student モジュールと Class モジュールを定義することで Student オブジェクトをクラスに配置します。

ケース 4: Student モジュール、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(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

ケース 6: メイン プログラム

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 
});

student モジュールとクラス モジュールは独立したモジュールなので、以下に別のモジュールを定義しましょうモジュールの場合、このモジュールは学生モジュールとクラス モジュールに依存するため、メイン プログラム部分のロジックもパッケージ化できます。

ケース 7: 学生モジュールとクラス モジュール、manager.js に依存するマネージャー モジュール

define(["js/student", "js/class"], function(student, clz){ 
 return { 
  addNewStudent: function(name, gender){ 
  clz.addToClass(student.createStudent(name, gender)); 
    }, 
  getMyClassSize: function(){ 
  return clz.getClassSize(); 
  } 
   }; 
 });

ケース 8: 新しいメイン プログラム

require(["js/manager"], function(manager) { 
manager.addNewStudent("Jack", "male"); 
manager.addNewStudent("Rose", "female"); 
console.log(manager.getMyClassSize());// 输出 2 
});

上記のコード例を通じて、モジュールの書き方とその仕組みを明確に理解しました。 module が使用され、モジュール間の依存関係がどのように定義されるか。注意すべき使用上のヒントがまだいくつかあります:

AMD 仕様に記載されているように、この ID はオプションです。指定すると、モジュールの移植性とファイルの場所の変更に影響します。 RequireJS の実装では、ID を手動で変更する必要があります。

各 JavaScript ファイルは 1 つのモジュールのみを定義します。モジュール名とファイル パスの検索アルゴリズムにより、複数のモジュールとファイルがオプティマイザーによって最適化されることが決定されます。 モジュールの循環依存関係を回避できない場合は、モジュール内の「require」モジュールに依存関係を追加し、

require(”dependencyModuleName”)

を使用してコード内で直接 RequireJS を構成できます。

前面的介绍中，我们似乎忽略了一个基本问题，模块名字是怎么来的？当我在 require 一个模块时，这个模块是如何映射到具体的 JavaScript 文件上去？这就涉及到如何配置 RequireJS。

最简化的加载 RequireJS 的方式如案例2 所示，在这种情况下，我们没有指定一个 baseUrl 和 paths 给 RequireJS，如果通过如案例10 所示方式，则 data-main 指定了一个在当前 index.html 目录并行的文件夹下的 /js/main.js 作为程序入口，而 /js 目录也将作为 baseUrl 在其他模块定义时候使用。

案例九：载入 require.js

<script data-main="js/main" src="scripts/require.js"></script>

因此，我们前面示例中的所有模块依赖，都可以去掉”js/”，直接写 ”student”， ”class”，”manager” 等。 一种更为直接的方式显示指定 baseUrl 和 paths 就是利用 require.config 来设置这些参数。如案例十 所示。

案例十. 配置 RequireJS

<script type="text/javascript" src="./js/require.js"></script> 
<script type="text/javascript"> 
require.config({ 
 baseUrl: "./js", 
 paths: { 
   "some": "some/v1"
 }, 
waitSeconds: 10 
}); 
require( ["some/module", "my/module", "./js/a.js"], 
 function(someModule,  myModule) {} 
); 
</script>

baseUrl指明的是所有模块的 base URL，比如”my/module”所加载的 script实际上就是 /js/my/module.js。注意，以 .js 结尾的文件加载时不会使用该 baseUrl，它们仍然会使用当前 index.html所在的相对路径来加载，所以仍然要加上”./js/”。如果 baseUrl没有指定，那么就会使用 data-main中指定的路径。

paths 中定义的路径是用于替换模块中的路径，如上例中的 some/module 具体的 JavaScript 文件路径是 /js/some/v1/module.js 。 waitSeconds 是指定最多花多长等待时间来加载一个 JavaScript 文件，用户不指定的情况下默认为 7 秒。

另外一个重要的配置是 packages，它可以指定其他符合 CommonJS AMD 规范的目录结构，由此带来了丰富的扩展性。如 Dojo、jQuery 等的模块也可以通过该配置来让 RequireJS 加载。

其他可配置的选项还包括 locale、context、deps、callback等，有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。

更多使用RequireJS库加载JavaScript模块的实例教程相关文章请关注PHP中文网！