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

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

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

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

このページのコンテンツが表示されました。以前のように、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 でのイベントバブリングとイベントキャプチャに関する簡単な説明

続きを見る