require.jsの使い方は？ JSの読み込みを高速化する-jsチュートリアル-php.cn

require.jsの使い方は？ JSの読み込みを高速化する

PHP中文网

リリース： 2017-06-21 10:59:39

オリジナル

1831 人が閲覧しました

Web ページに多数の JS ファイルが導入されている場合、Web ページの読み込みが非常に遅くなり、JS ファイルの順序が逆になると実行できなくなる場合があります。これはユーザーエクスペリエンスに大きな影響を与えます。

require.js は非同期読み込みを解決し、Web ページの読み込みを改善します。同時に、順序に依存する js を配列で並べ替えることができます。

最初のステップは、require.js をロードし、ディレクトリの js サブディレクトリに置くことです:

パラメータを追加する必要があります 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 サイトの他の関連記事を参照してください。