通常のJS負荷の欠点
jsが読み込まれた後にインターフェースのレンダリングが始まる必要があります
js間に依存関係がある場合は、依存関係に応じて順番に読み込む必要があります。 依存関係が複雑な場合、コードを書いたり保守したりするのはより面倒です
こうして、require.jsは広大な大衆の声の中で生まれたのです。
役割require.js
ページが反応しなくなるのを防ぐためにjsの非同期読み込みを実装しましょう
モジュール間の依存関係を管理し、コード作成と保守を容易にします
require.js 読み込み
まず、[公式ウェブサイト]にアクセスして最新バージョンをダウンロード http://requirejs.org/
ダウンロードまたはコピーしたrequire.jsをプロジェクトディレクトリに登録します
require.js目的のページに読み込み
Direct load: write <scrip{filter}t src="js/require.js"></scrip{filter}t>
非同期読み込み: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
注意:非同期とは、ウェブページが応答しなくなるのを防ぐために非同期でこのファイルを読み込む必要があることを意味します。 IEは非同期をサポートしていないため、defer属性を読み込みます。
require.jsが読み込まれたら、次のステップは自分たちのコードを読み込むことです。 私たちのコードファイルがmain.jsされ、これもjsディレクトリの下に置かれているとします。 では、次のように書いてください:<scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
data-main 属性の機能は、ウェブプログラムのメインモジュールを指定することです。 上記の例では、このファイルはまずjsディレクトリのrequire.jsのmain.jsに読み込まれます。 デフォルトのファイルサフィックスrequire.js jsなので、Mainにmain.jsくらいの略記できます。
メインモジュールの書き方
前節のmain.jsはメインモジュールと呼ばれます。 つまり、モジュール全体のエントリー方法のことです。
書き方main.js
他のモジュールに依存せず、直接main.jsに書かれたメソッド
main.function()
メインモジュールは他のモジュールに依存しているため、require()関数を使いましょう
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
ここにコードがある
});
require() 関数は以下の2つのパラメータを受け入れます:
最初のパラメータは、依存する加群を表す配列です
2つ目のパラメータはコールバック関数で、前方で指定されたすべてのモジュールが読み込まれた後に呼び出されます。 追加されたモジュールはパラメータの形で渡され、コールバック関数内で使用可能です。
モジュールのロード
例:メインモジュール(main.js)の従属モジュールが['jquery', 'crypto-js', 'anything']の場合
デフォルトの読み込み
これら3つの依存モジュールのファイルが同じディレクトリに jquery.js、crypto-js.js、anything.js、main.js であれば、前の節に従って自動的に読み込むことができます
Config load require.config()
require.config() はメインモジュール(main.js)のヘッドに書かれています。
AMDモジュールの書き方
require.jsモジュールはAMD仕様で搭載されています。 つまり、モジュールはAMDの規制に従って作成されなければなりません。
具体的には、モジュールは特定のdefine()関数によって定義されなければなりません。 もしある加群が他の加群に依存しない場合、それはdefine()関数で直接定義できます
数学モジュールを定義するmath.jsファイルがあるとします。 そして、math.jsこう書いてください。
読み込み方法は以下の通りです:
もしそのモジュールが他のモジュールにも依存する場合、define() 関数の最初の引数はモジュールの依存関係を示す配列でなければなりません。
require() 関数が上記のモジュールを読み込むとき、まずファイルを読み込みますmyLib.js。
非AMDモジュールの搭載
市場にはAMD仕様を満たさないモジュールも多く存在しますが、require.js搭載可能です
これらのモジュールを読み込む前に、いくつかの特徴を定義するためにrequire.config()に設定される必要があります
例えば、noamd.jsとnoamddeps.js両モジュールはAMD製でないモジュールで、ロードするにはその特性を定義する必要があります:
require.jsは、パスプロパティに加えて、非AMDモジュールの設定専用のシムプロパティを持つ構成オブジェクトを受け入れます。
具体的には、各モジュールは次のように定義します:
- exports value(出力変数名):外部呼び出し時にモジュール名を示します
- deps配列:このモジュールの依存関係を示します
例えば、jQueryプラグインは次のように定義できます:
require.jsプラグイン
また、require.jsは特別な機能を実装したさまざまなプラグインも提供しています
domreadyプラグインは、ページDOM構造が読み込まれた後もコールバック関数を実行できるようにします:
テキストや画像プラグインで、require.jsがテキストや画像ファイルを読み込むことができます:
類似のプラグインには、JSONやMDOWNなどがあり、JSONやMarkdownファイルを読み込みます。
|
掲載地 2017/10/11 9:31:50
|
|
|
