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

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