検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptモジュールローダーの詳細説明 --RequireJS

JavaScriptモジュールローダーの詳細説明 --RequireJS

青灯夜游
青灯夜游転載
2021-02-18 23:04:042926ブラウズ

JavaScriptモジュールローダーの詳細説明 --RequireJS

関連する推奨事項: 「javascript ビデオ チュートリアル 」

RequireJS は JavaScript モジュール ローダーです。ブラウザでの使用に最適ですが、Rhino や Node などの他のスクリプト環境でも使用できます。 RequireJS を使用してモジュール式スクリプトを読み込むと、コードの読み込み速度と品質が向上します。

まず、一般的なページの js 読み込みを見てみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/index02.js" ></script>
    </head>
    <body>
        <h1>this is a page.</h1>
    </body>
</html>

実行結果:

JavaScriptモジュールローダーの詳細説明 --RequireJS

# #This このとき、ポップアップボックスを操作しないとページが読み込まれず、ページのコンテンツが存在しないため、これは私たちが望んでいる結果ではありません。

以下では、require.js を使用して操作します:

index.htm


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/require2.1.11.js"></script>
        <script type="text/javascript">
            require(["js/index","js/index01"],function(){
                console.log("当js加载成功后会执行的函数");
            },function(){
                console.log("当js加载失败后会执行的函数");
            });
        </script>
    </head>
    <body>
    </body>
</html>

index.js

define(function(){
    console.log("this is a test!");
    function test(){
        console.log("haha,i am a test!");
    }
    test();
});

まず、test02.js はページにインポートされなくなり、requireJS のみがインポートされます。次に、JavaScript では、require() メソッドを使用し、パラメーターの配列を渡します。実際のパラメーターは [js ファイルのパス ファイル名] です。私たちは輸入したいと思っています。

現時点での実行結果:

JavaScriptモジュールローダーの詳細説明 --RequireJS

JavaScriptモジュールローダーの詳細説明 --RequireJS

JavaScriptモジュールローダーの詳細説明 --RequireJS

このページのコンテンツが表示されました。以前のように、js が完了してからページが読み込まれるのを待つのではなく、ページが読み込まれた後にのみ js コードが実行されるため、操作効率が大幅に向上します。

上記のコードに従って、requirejs の基本的な API を分析できます。

requireJS は 3 つの変数を定義します:define、require、requirejs

  • require==requirejs。通常、require を使用した方が短くなります。

  • define はモジュール

  • を定義するために使用されます。依存モジュール (定義されたモジュールを参照) をロードし、ロード後にコールバック関数を実行する必要があります

require には 3 つのパラメータがあります: 

require(["js/index","js/index01"],function(){
                console.log("当js加载成功后会执行的函数");
            },function(){
                console.log("当js加载失败后会执行的函数");
            });

最初のパラメータ: require の依存関係を定義します。パラメータは配列の形式である必要があります。パラメータが 1 つしかない場合でも、依存関係にある場合は、配列を使用する必要があります。パラメータをフォームで渡します。

2 番目のパラメータ: ロード後のロジックの処理に使用されるコールバック関数です。すべてのモジュールがロードされたときにトリガーされます。

3 番目のパラメータ: これもコールバック関数です。モジュールのロードが失敗した後の状況を処理するために使用されます。上記のコードに示されているように、ファイルindex01.jsはjsで定義されていないため、このコールバック関数は呼び出されません。

ネットワーク ファイルをロードする

前にローカルの js ファイルをロードしましたが、ネットワーク上のファイルをロードする必要がある場合があります。そのため、毛糸の布をロードするにはどうすればよいですか?それでは、インターネット上の js ファイルを読み込む方法を紹介しましょう。

jquery.js ファイルを読み込む例を見てみましょう: 

//百度cdn公共库jQuery地址：      http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址：           https://code.jquery.com/jquery-3.1.1.js
//注意：网络上去取时不能加后缀，否则取不到
require.config({
    paths : {
        //为网络上的库去一个名字：jquery
        "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});

インターネット上のファイルを取得するときは注意してください : #1. config メソッドのパラメータはオブジェクト

2. パスの値もオブジェクト

3. ライブラリに名前を付けるとき、ネットワーク 任意ですが、意味のある名前を付けることをお勧めします。他の人は、名前を通じてネットワーク リソースが何であるかを知ることができます。

4. ライブラリの値は配列です。つまり、複数の書き込みが可能です。異常なネットワーク アクセスを防ぐために同時に作成されます。

5 未満です。特別な注意: ネットワーク リソース パスにはサフィックス名を含めることはできません。そうでない場合は、サフィックス名を取得できません。

6.また、最初にネットワークから取得するように要求します。取得できない場合は、ローカル サービスへの負担を軽減するためにローカルで取得します (これはプロジェクトの最適化に属します)。 

require.config({
    paths : {
        //这样配置，减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});

同様に、ローカル構成をパスに追加することもできます: 

require.config({
    paths : {
        //这样配置，减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //将本地的js文件同样配置，之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});

//
require(["jquery","test01","test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});

require.config 構成は、上の例で繰り返し表示されます。構成を各ページに追加すると、間違いなく次のようになります。とても特別です。いいえ、requirejs は「マスター データ」と呼ばれる機能を提供します。最初に main.js を作成します: 

require.config({
    paths : {
        //这样配置，减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //将本地的js文件同样配置，之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});

それからページ上で次の方法で requirejs を使用します: 

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

    require(["jquery","t1","t2"],function(){
        alert("页面加载成功~~");
    },function(){
        alert("页面加载失败~~")
    });

</script>

公式はタグ属性に基づくメソッドを提供しています: 

<script data-main="js/main" src="js/require2.1.11.js" ></script>

すべての設定とインポートされた js を main.js に配置し、そのようなタグのみがページに必要になるようにします。

代码演示如下：

//test01.js--定义一个js模块
define(function(){
    function test(){
        console.log("this is test01.js");
    }
    test();

    $("p").css("color","#DB7093");
});

main.js--requirejs的全局配置

require.config({
    paths:{
        "jquery":["jquery-1.8.3"],
        "test":["test01"]
    },
    shim:{
        "test":["jquery"]
    }
});
require(["test"],function(){
    console.log("success!");
});

index.html--此时，引入js文件只需一行代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" >
        </script>
    </head>
    <body>
        <p>i am liyanan and this is a testn Page.</p>
    </body>
</html>

更多编程相关知识，请访问：编程视频！！

以上がJavaScriptモジュールローダーの詳細説明 --RequireJSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript でのイベント バブリングとイベント キャプチャに関する簡単な説明次の記事：JavaScript でのイベント バブリングとイベント キャプチャに関する簡単な説明

関連記事

続きを見る