ホームページ > 記事 > ウェブフロントエンド > require.jsの使い方は？ JSの読み込みを高速化する
require.jsの使い方は？ JSの読み込みを高速化する
- PHP中文网オリジナル
- 2017-06-21 10:59:391827ブラウズ
Web ページに多数の JS ファイルが導入されている場合、Web ページの読み込みが非常に遅くなり、JS ファイルの順序が逆になると実行できなくなる場合があります。これはユーザー エクスペリエンスに大きな影響を与えます。
require.js は非同期読み込みを解決し、Web ページの読み込みを改善します。同時に、順序に依存する js を配列で並べ替えることができます。
最初のステップは、require.js をロードし、ディレクトリの js サブディレクトリに置くことです:
<script src="js/require.js?1.1.10">< /script >
パラメータを追加する必要があります defer async="true" このファイルを非同期でロードする必要があることを示します defer は IE バージョンと互換性があります
データを追加する必要があります-main="js/main" は、js の下の main がメインの読み込みモジュールであることを示します。仕事をするときは厳格でなければなりません。
require() 関数は 2 つのパラメータを受け取ります。最初のパラメータは配列で、依存するモジュールを示します。2 番目のパラメータは return 関数で、以前のすべてのモジュールが正常にロードされたときに呼び出されます。
//main.js:
define(function (require,exports,module){
exports.add = function (x,y){
return x+y;
};
});//math.html:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>require(['main'], function (math){
alert(math.add(1,1));
});</script></head><body></body></html>2 を返すと、正常にポップアップ表示されます。
一緒に電話してください
//b.js:
define(function (require,exports,module){
exports.add = function (obj,oEv,show){
return obj[addEventListener(oEv,show,false)]
};
});//math.html:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>var btn=document.getElementById('btn');function show(){
alert('弹出')
}
require(['main','main'], function (math){
math.add(btn,'click',show);
alert(math.add(1,1));
});</script></head><body><button id="btn">提交</button></body></html>この記事を読んで、何か問題があればメッセージを残してください。
以上がrequire.jsの使い方は？ JSの読み込みを高速化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。