requirejsはじめに
requirejsは、AMD仕様の創設者でもあるJames Burkeによって設立されました。
requirejsは、通常とは異なる方法でJavaScriptを書くことができます。スクリプトタグを使用してJSファイルをHTMLに導入することはなく、スクリプトタグを介して依存関係を管理する必要がなくなります。
requirejsは非常に小さなJavaScriptモジュールロードフレームワークであり、AMD仕様の最高の実装者の1つです。 requirejsの最新バージョンは、圧縮後わずか14kで、これは非常に軽量です。また、他のフレームワークと組み合わせて動作する可能性があり、requirejsを使用すると、フロントエンドコードの品質が確実に向上します。
非同期モジュールの読み込みにrequirejsを使用する場合、注目に値するポイントがいくつかあります。
1.モジュール定義を書き込む2つの方法
1。依存関係に存在する機能的定義
モジュールに依存関係がある場合:最初のパラメーターは依存関係の名前の配列です。 2番目のパラメーターは関数です。モジュールのすべての依存関係がロードされた後、関数が呼び出されてモジュールを定義するため、モジュールはモジュールを定義するオブジェクトを返す必要があります。依存関係の関係はパラメーターとして関数に注入され、パラメーターリストは依存関係名リストに1つずつ対応します。
define(['a']、function(aj){var hello = function(){aj.hello( 'i am c.js');} return {hello:hello}});PS:モジュールの返品値タイプはオブジェクトであることを余儀なくされておらず、関数の返品値が許可されます。
2。CommonJSモジュール形式の定義
要求:他のモジュールに依存するメソッドを導入するために使用されます。
エクスポート:モジュール変数またはメソッドをエクスポートするオブジェクトをエクスポートします。
モジュール:このモジュールに関する情報が含まれています。
require.config({baseurl: ""、config:{'b':{size: 'varge'}}、paths:{a: 'base/a'、b: 'base/b'、c: 'base/c'}}); define(function(require、exports、module){var aj = require( "a"); var hello = function(){aj.hello( 'i am b.js');} var hello2 = function(){aj.hello( 'i am b.js22');} exports); console.log( "b.js:module"、module); console.log( "b.js:config"、module.config()); //一緒に使用できない場合、returnは以前のエクスポート/*return {hello:hello2}*/});PS:リターンオブジェクトとエクスポートを一緒に使用することはできません。リターンは以前のエクスポートを上書きします。
以下は、電話後に印刷された情報です。
エクスポート:エクスポートはモジュールの属性であることがわかります。
モジュール:モジュールのエイリアス、URI、エクスポートオブジェクト、および構成情報方法が含まれています。
構成:構成情報をモジュールに渡す必要があることがよくあります。これらの構成は、多くの場合、アプリケーションレベルの情報であり、モジュールに渡す手段が必要です。
requirejsでは、requirejs.config()の構成項目に基づいて実装されています。
2。シングルトン変数に注意してください
requirejsが1回必要とする後、その後の要件は以前のキャッシュを使用するため、シングルトンの変数に注意してください。したがって、この要件が変更されている限り、モジュールで変数が定義されている場合、他の要件が一貫したままになります。
define(function(){var index = 0; var hello = function(msg){console.log(msg);} var addindex = function(){index ++;} var getIndex = function(){return index;} return {hello:hello、addindex:addindex、getindex:getindex});呼びかけ:
require(['a'、]、function(a){require(['a']、function(a){console.log(a.getindex()); a.addindex(); addindex();}); require([a ']、function(a){console.log(a.getindex());});});上記の印刷は次のとおりです。
0
2
3.キャッシュをクリアします
requirejsにはキャッシュの機能があるため、開発中はキャッシュを必要としないため、urlargsをrequire.configに設定できます。
urlargs:requirejsは、リソースを取得するときにURL後に追加のクエリパラメーターを追加します。
例:
urlargs: "bust =" +(new date())。getTime()
これは開発に役立ちますが、ビルド環境に展開する前に削除することを忘れないでください。
4。他のパッケージからモジュールをロードします
requirejsは、CommonJSパッケージ構造からモジュールの読み込みをサポートしますが、追加の構成が必要です。
パッケージ構成は、特定のパッケージの次のプロパティを指定できます。
1。名前:パッケージ名(モジュール名/プレフィックスマッピング用)。
2。場所:ディスクの場所。位置は、プロトコルが含まれている場合、または「/」で開始しない限り、構成内のbaseURL値に関連しています。
3。メイン:「パッケージ名」で要求の呼び出しが開始された後、パッケージ内のモジュールが適用されます。
デフォルトは、ここで特に設定されていない限り、「メイン」です。
この値は、パッケージディレクトリに関連しています。
例:
main.js
require.config({baseurl: "" "、packages:[{name:" suster "、location:" package-stu "}、{name:" teacher "、location:" package-tea "}]、" Bust = " +(new Date())。 tea.hello();Tea.js:
define(function(require、exports、module){exports.hello = function(){console.log( '私は教師です。');}});stu.js:
define(function(require、exports、module){exports.name = 'cape';});store.js:
define(function(require、exports、module){var stu = require( "sustent/stu"); exports.hello = function(){console.log( 'i am' + stu.name);}});他のパッケージからモジュールをロードするこの方法には、2つの奇妙なことがあるように感じます(私はよくわかりません):
1.他のパッケージのモジュールが他のモジュールの執筆方法を参照する場合、ユーザーはモジュールの書き込み方法に影響しますか?
2.他のパッケージのmain.jsは役に立たないようであり、コンテンツがなければ問題はありません。
上記のコンテンツは、編集者が使用する要件の詳細であり、すべての人に役立つことを願っています!