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 サイトの他の関連記事を参照してください。