Javascriptモジュラープログラミング(3)require.jsの使い方と機能入門_基礎知識

このシリーズのパート 1 と 2 では、JavaScript モジュールのプロトタイプと理論的な概念を紹介しましたが、今回はそれらを実際に使用する方法を紹介します。
私は非常に人気のあるライブラリ require.js を使用しています。

1. require.js を使用する理由
初期の頃、すべての Javascript コードは 1 つのファイルに記述されており、この 1 つのファイルをロードするだけで十分でした。その後、コードがどんどん増え、1 つのファイルでは不十分になり、複数のファイルに分割して順番にロードする必要がありました。以下の Web ページのコードを見たことがある人も多いと思います。

コードをコピー コードは次のとおりです:

< スクリプト src="4.js">
;<スクリプト src="5.js">
;<スクリプト src="6.js; ">

このコードは、複数の js ファイルを順番に読み込みます。
この書き方には大きな欠点があります。まず、ロード時にブラウザは Web ページのレンダリングを停止します。ロードされるファイルが増えると、Web ページの応答が失われる時間が長くなります。次に、js ファイル間の依存関係により、ロード順序が厳密に保証される必要があります。上記の例のように、1.js は 2.js の前に置く必要があり、依存関係が最も大きいモジュールを最後にロードする必要があります。依存関係が複雑になると、コードの記述とメンテナンスが困難になります。
require.js は、次の 2 つの問題を解決するために生まれました :

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

2. require.js の読み込み require.js を使用するための最初のステップは、公式 Web サイトから最新バージョンをダウンロードすることです。
ダウンロード後、jsサブディレクトリ配下に配置されロードできるものとします。

コードをコピー コードは次のとおりです:

このファイルを読み込むと Web ページが応答しなくなる可能性があると考える人もいるかもしれません。解決策は 2 つあり、1 つは Web ページの下部にロードする方法、もう 1 つは次のように記述する方法です:

コードをコピー コードは次のとおりです。

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

require.js をロードしたら、次のステップは独自のコードをロードすることです。独自のコード ファイルが main.js であり、これも js ディレクトリの下に配置されていると仮定します。次に、次のように記述します:

コードをコピー コードは次のとおりです:

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

data-main 属性は、ウェブプログラム。上記の例では、js ディレクトリ内の main.js が、require.js によって最初に読み込まれます。 require.js のデフォルトのファイル拡張子は js であるため、main.js は main と省略できます。

3. メインモジュールの書き方 前節の main.js を「メインモジュール」と呼びます。これは Web ページ全体のエントリーコードを意味します。これは C 言語の main() 関数に似ており、すべてのコードはここから実行を開始します。
main.jsの書き方を見てみましょう。
コードが他のモジュールに依存していない場合は、JavaScript コードを直接記述できます。
// main.js

コードをコピー コードは次のとおりです:

アラート("読み込み成功! ");
ただし、この場合、require.js を使用する必要はありません。本当に一般的な状況は、メイン モジュールが他のモジュールに依存することです。この場合、AMD 仕様で定義されている require() 関数を使用する必要があります。
// main.js

コードをコピー コードは次のとおりです:

require ([' moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// ここにコードがあります
});関数は 2 つのパラメータを受け入れます。最初のパラメータは配列であり、依存するモジュールを示します。上の例は ['moduleA', 'moduleB', 'moduleC'] です。つまり、メイン モジュールはこれら 3 つのモジュールに依存します。現在、この関数は上記で指定されたすべてのモジュールが正常にロードされた後に呼び出されます。ロードされたモジュールはパラメータとしてこの関数に渡されるため、これらのモジュールはコールバック関数内で使用できます。

require() は moduleA、moduleB、および moduleC を非同期的にロードします。ブラウザは応答を失いません。指定されたコールバック関数は、前のモジュールが正常にロードされた後にのみ実行され、依存関係の問題が解決されます。

以下では、実際的な例を見ていきます。
メインモジュールが jquery、アンダースコア、バックボーンの 3 つのモジュールに依存していると仮定すると、main.js は次のように記述できます:

コードをコピー コードは次のとおりです: require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

//ここにいくつかのコードがあります

} );


require.js は、まず jQuery、アンダースコア、バックボーンをロードしてから、コールバック関数を実行します。メインモジュールのコードはコールバック関数内に記述されます。

4. モジュールの読み込み

前のセクションの最後の例では、メイン モジュールの依存モジュールは ['jquery'、'underscore'、'backbone'] です。デフォルトでは、require.js は、これら 3 つのモジュールが main.js と同じディレクトリにあり、ファイル名が jquery.js、underscore.js、backbone.js であると想定し、自動的にロードします。 require.config() メソッドを使用すると、モジュールの読み込み動作をカスタマイズできます。 require.config()はメインモジュール(main.js)の先頭に記述されます。パラメータはオブジェクトであり、このオブジェクトの paths 属性は各モジュールのロード パスを指定します。

コードをコピー コードは次のとおりです。 require.config({

Paths : {

"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}); 🎜>
上記のコードは、3 つのモジュールのファイル名をデフォルトで main.js と同じディレクトリ (js サブディレクトリ) に指定します。これらのモジュールが js/lib ディレクトリなどの他のディレクトリにある場合、モジュールを記述する方法は 2 つあります。 1 つはパスを 1 つずつ指定する方法です。

コードをコピー

コードは次のとおりです。 require.config({ Paths : { "jquery": "lib/jquery.min", "アンダースコア": "lib/underscore.min",

"バックボーン": "lib/backbone.min"

}
});


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

コードをコピー

コードは次のとおりです: require.config({ BaseUrl : "js /lib", パス: { "jquery": "jquery.min",

"underscore": "underscore.min",

"backbone": "backbone.min "
}
});


モジュールが別のホスト上にある場合は、次のように URL を直接指定することもできます:

コードをコピー

コードは次のとおりです: require.config({ paths: { "jquery": "https ://ajax .googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" }

});

require.js では、各モジュールが個別の js ファイルであることが必要です。この場合、複数のモジュールが読み込まれると、複数の HTTP リクエストが発行されるため、Web ページの読み込み速度に影響します。したがって、require.js には最適化ツールが用意されており、モジュールをデプロイした後、このツールを使用して複数のモジュールを 1 つのファイルにマージし、HTTP リクエストの数を減らすことができます。
5. AMD モジュールの書き方
require.js で読み込まれるモジュールは AMD 仕様を採用しています。つまり、モジュールは AMD の規定に従って作成する必要があります。
具体的には、モジュールは特定のdefine()関数を使用して定義する必要があります。モジュールが他のモジュールに依存していない場合は、define() 関数で直接定義できます。

数学モジュールを定義する math.js ファイルがあると仮定します。次に、 math.js は次のように書く必要があります:
// math.js

コードをコピー コードは次のとおりです:

define(function (){
var add = function (x,y){
return x y;
};
return {
add: add
};
});

読み込み方法は次のとおりです:
// main.js

コードをコピー コードは次のとおりです:

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

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

コードをコピー コードは次のとおりです。

define(['myLib'], function (myLib) {
Function foo(){
myLib.doSomething();
return {
return { foo : foo
}); require() 関数は上記のモジュールをロードします。myLib.js ファイルが最初にロードされます。

6. 非標準モジュールのロード

理論的には、require.js によってロードされるモジュールは、AMD 仕様に従って、define() 関数で定義されたモジュールである必要があります。しかし実際には、一部の一般的な関数ライブラリ (jQuery など) はすでに AMD 仕様に準拠していますが、さらに多くのライブラリは準拠していません。

では、require.js は非標準モジュールをロードできるのでしょうか?

答えは「はい」です。 このようなモジュールを require() でロードする前に、まず require.config() メソッドを使用してモジュールの特性の一部を定義する必要があります。 たとえば、アンダースコアとバックボーンの 2 つのライブラリは、AMD 仕様を使用して書かれていません。それらをロードする場合は、まずその特性を定義する必要があります。


コードをコピー

コードは次のとおりです: require.config({ shim : { | 'アンダースコア': { エクスポート: '_'

},

'バックボーン': { 'jquery'],
ボーン '
}
}
});


require.config() は、前述の paths 属性に加えて、特別に使用される shim 属性も持ちます。互換性のないモジュールを構成します。具体的には、各モジュールは、(1) 外部から呼び出されるモジュールの名前を示すエクスポート値 (出力変数名)、(2) モジュールの依存関係を示す deps 配列を定義する必要があります。
たとえば、jQuery プラグインは次のように定義できます。

コードをコピーします


コードは次のとおりです。

shim: { 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' }

}

7. require.js プラグイン

require.js は、いくつかの特定の機能を実装するための一連のプラグインも提供します。
domready プラグインを使用すると、ページ DOM 構造がロードされた後にコールバック関数を実行できます。

コードをコピー


コードは次のとおりです。

require(['domready!'], function (doc ){ // DOM の準備ができたら呼び出されます });
テキスト プラグインと画像プラグインを使用すると、require.js でテキスト ファイルと画像ファイルを読み込むことができます。

コードをコピー コードは次のとおりです。

define([
text!review .txt ',
'image!cat.jpg'
],
function(review,cat){
console.log(review)
document.body.appendChild(cat); ;
}
);

同様のプラグインには、json ファイルとマークダウン ファイルを読み込むために使用される json と mdown があります。
(終わり)