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

PHP中文网
リリース: 2017-06-21 10:59:39
オリジナル
1831 人が閲覧しました

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート