require.js require.js features_javascript クラス ライブラリの深い理解

現在、Require.js は Javascript をプログラミングする私のお気に入りの方法です。コードをより小さな部分に分割し、管理しやすくします。 Require.js オプティマイザーは、大規模なアプリケーションを複数の小さなアプリケーションに分散し、依存関係を通じてそれらを接続し、最終的にコンパイルおよびパッケージ化中にそれらをマージするのに役立ちます。これらの理由から、require.js を使用することになります。

それでは、require.js の素晴らしい機能を見てみましょう!

CommonJS と互換性があります

AMD (非同期モジュール定義仕様) は CommonJS ワーキング グループから生まれました。 CommonJS は、JavaScript エコシステムの構築を目的としています。 CommonJS の重要な部分は AMD の前身である Transport/c であり、require.js はこの仕様の実装です。

CommonJS モジュールと AMD モジュールの構文の違いは、主に AMD がブラウザの非同期機能をサポートする必要があるという事実によるものです。 CommonJS モジュールは同期的に実行する必要があります。例:

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

var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
exports.asplode = function() {
SomeModule.doTehAwesome();
AnotherModule.doMoarAwesome();
};

AMD モジュールはモジュールを非同期でロードするため、モジュール定義には最初のパラメータとして配列が必要で、モジュールがロードされた後のコールバック関数は 2 番目のパラメータとして渡されます。

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

define( [ "someModule"], function( someModule ) {
戻り値 {
asplode: function() {
someModule.doTehAwesome();

// これは非同期で実行されます
require( [ "anotherModule" ], function( anotherModule ) {
anotherModule.doMoarAwesome();
});
}
};
});

ただし、AMD は require.js の CommonJS 構文とも互換性があります。 CommonJS モジュールを AMD の定義関数でラップすると、AMD で CommonJS モジュールを使用することもできます。例:

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

定義(関数(必須、エクスポート、モジュール)
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
SomeModule.doTehAwesome();
AnotherModule.doMoarAwesome();

exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});

実際、require.js は関数 .toString を通じてコールバック関数のモジュール コンテンツを解釈し、その正しい依存関係を見つけて、それを通常の AMD モジュールに変換します。この方法でモジュールを作成すると、AMD 仕様に違反するため、他の AMD ローダーと互換性がなくなる可能性がありますが、この形式の作成は非常によく理解できることに注意してください。

ここで何が起こっているのかというと、require.js は実際に function.toString コールバック関数を実行して、通常の AMD モジュールの場合と同様に、モジュールの内容を解析して正しい依存関係を見つけます。この方法でモジュールを作成することを選択した場合、これは AMD 仕様に反するため、他の AMD モジュール ローダーと互換性がなくなる可能性が高いことに注意することが重要ですが、この形式が存在することを知っておくのは良いことです。

CDN フォールバック

require.js のもう 1 つの隠れた逸品は、CDN が正しく読み込まれていない場合に、ローカルの対応するライブラリの読み込みへのフォールバックをサポートしていることです。これは、require.config を通じて実現できます:

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

requirejs.config({
パス: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});

依存関係はありませんか?オブジェクトリテラル?問題ない！

依存関係を持たずにモジュールを作成し、いくつかの関数を含むオブジェクトを返すだけの場合は、次の単純な構文を使用できます。

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

定義({
ForceChoke: function() {

}、
ForceLighting: function() {

}、
ForceRun: function() {

}
});

モジュールが単なる関数のコレクション、または単なるデータ パッケージである場合、非常にシンプルで便利です。

循環依存関係

場合によっては、モジュール moduleA が必要になり、moduleA の関数が一部のアプリケーションに依存する必要があります。これは循環依存です。

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

// js/app/moduleA.js
定義([ "必須", "アプリ/アプリ"],
function(require, app) {
return {
foo: 関数(タイトル) {
var app = require( "app/app" );
return app.something();
}
}
}
);

モジュールのアドレスを取得します

モジュールのアドレスを取得する必要がある場合は、次のように実行できます...

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

var path = require.toUrl("./style.css");

BaseUrl

通常、単体テストを実行する場合、ソース コードは src と同様のフォルダーに配置され、同時にテストも testing と同様のフォルダーに配置されます。これは、テスト構成を正しく行うのが難しい場合があります。

たとえば、tests フォルダーにindex.html ファイルがあり、tests/spec/*.js をローカルにロードする必要があります。そして、すべてのソース コードが src/js/*.js にあり、そのフォルダー内に main.js があると仮定します。

index.html では、require.js を読み込むときに data-main を設定しないでください。

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

<スクリプト src="src/js/vendor/require.js">
<スクリプト>
require( [ "../src/js/main.js" ], function() {
require.config({
BaseUrl: "../src/js/"
});

require([
"./spec/test.spec.js",
"./spec/moar.spec.js"
]、関数() {
// テストフレームワークを開始します
});
});

main.js が読み込まれていることがわかります。ただし、data-main が設定されていないため、baseUrl を指定する必要があります。 data-main を使用する場合、baseUrl は、設定されているファイルに応じて自動的に設定されます。

ここでは、main.js が読み込まれていることがわかります。ただし、メイン スクリプト タグ内のデータは読み込まれないため、ベースを指定する必要があります。データが主に BaseURL に関するものである場合、データはメイン ファイル内の場所から推測されます。 BaseUrl をカスタマイズすることで、テスト コードとアプリケーション コードを別々に簡単に保存できます。

JSONP

次のように JSONP ターミナルを処理できます:

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

require( [
"http://someapi.com/foo?callback=define"
]、関数 (データ) {
console.log(データ);
});

非 AMD ライブラリの場合は、shim を使用して を解決します

多くのリクエストにより、非 AMD ライブラリを使用する必要があります。たとえば、Backbone と Underscore は AMD 仕様に適合していません。そして、jQuery は実際にはそれ自体を jQuery という名前のグローバル変数として定義しているだけなので、jQuery とは何の関係もありません。

幸いなことに、シム構成を使用してこの問題を解決できます。

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

require.config({
パス: {
"バックボーン": "ベンダー/バックボーン",
"アンダースコア": "ベンダー/アンダースコア"
}、
シム: {
「バックボーン」: {
deps: [ "アンダースコア" ],
エクスポート: 「バックボーン」
}、
「アンダースコア」: {
エクスポート: "_"
}
}
});