Require.js のグラフィックとテキストの説明

今回はRequire.jsに​​ついて画像と文章を交えて詳しく解説し、Require.jsを使用する際の注意点を以下に具体的な事例として紹介します。

1. require.js を使用する理由

まず、ページが複数の JS ファイルを読み込むと、ブラウザは Web ページのレンダリングを停止し、より多くのファイルが読み込まれると、Web ページの応答が失われる時間が長くなります。第 2 に、JS ファイル間には依存関係があるため、厳密に処理する必要があります。依存関係が複雑な場合、コードの記述とメンテナンスが困難になります。

require.js は次の 2 つの問題を解決します:

1. Web ページが応答しなくなることを避けるために、js ファイルの非同期読み込みを実装します。
2. コードの作成とメンテナンスを容易にするために、モジュール間の依存関係を管理します。

2. require.js の読み込み

最初のステップは、公式 Web サイトから最新バージョンをダウンロードし、ページに直接配置してロードすることです

<script src="js/require.js"></script>

このファイルをロードすると、Web ページが応答しなくなる可能性があります。このファイルをページの下部に配置してロードすることも、次のように記述することもできます

<script src="js/require.js" defer async="true" ></script>

async 属性は、Web ページが応答しなくなるのを避けるために、このファイルを非同期でロードする必要があることを示します。 IE はこの属性をサポートしておらず、defer のみをサポートしているため、defer とも記述されます。

require.js をロードした後、次のステップは独自のコードをロードすることです。これはメインモジュールと呼ぶことができます。ファイルの名前が main.js の場合は、次のように記述できます。

3. メインモジュールの書き方 メインモジュールが

に依存している場合は、次のように記述できます

<script src="js/require.js" data-main="js/main"></script>  .js后缀可以省略

4. require.config() メソッド

require(['jquery'], function ($){ 
   alert($); 
});

• 1 つはパスを 1 つずつ指定する方法です

require.config({ 
  paths: { 
    "jquery": "jquery.min", 
    "underscore": "underscore.min", 
    "backbone": "backbone.min"
  } 
});

• もう 1 つは、ベース ディレクトリ (baseUrl) を直接変更する方法です。

• モジュールが別のホスト上にある場合は、

require.config({ 
  paths: { 
    "jquery": "lib/jquery.min", 
    "underscore": "lib/underscore.min", 
    "backbone": "lib/backbone.min"
  } 
});

のように、その URL を直接指定することもできます。

5. AMDモジュールの書き方 require.js によってロードされるモジュールは AMD 仕様を採用しています。つまり、モジュールは AMD の規定に従って作成する必要があります。

具体的には、モジュールは特定のdefine()関数を使用して定義する必要があります。モジュールが他のモジュールに依存していない場合は、define() 関数で直接定義できます。

読み込み方法は以下の通りです:

require.config({ 
  baseUrl: "js/lib", 
  paths: { 
    "jquery": "jquery.min", 
    "underscor: "underscore.min", 
    "backbone": "backbone.min" 
  } 
});

このモジュールが他のモジュールにも依存している場合、define() 関数の最初のパラメータはモジュールの依存関係を示す配列でなければなりません。

require() 関数が上記のモジュールをロードすると、myLib.js ファイルが最初にロードされます。

6. 非標準モジュールのロード (シムの使用方法)

require.config({ 
  paths: { 
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
  } 
});

// math.js 
define(function (){ 
  var add = function (x,y){ 
    return x+y; 
  }; 
  return { 
    add: add 
  }; 
});

クラスを取得することになります。 でも、my.js にたくさんの関数を書いた場合、それらを 1 つの関数に統合するのは少し面倒です。それらを直接エクスポートしますか?方法は次のとおりです:

 // main.js 
require(['math'], function (math){ 
  alert(math.add(1,1)); 
});

shim の秩序あるインポート

define(['myLib'], function(myLib){ 
  function foo(){ 
    myLib.doSomething(); 
  } 
  return {  //返回模块中的函数 
    foo : foo 
  }; 
});

この記事の事例を読んで、あなたはその方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がRequire.js のグラフィックとテキストの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。