JavaScriptモジュールローダーの詳細説明 --RequireJS-jsチュートリアル-php.cn

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

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

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

      
  this is a page.

ログイン後にコピー

実行結果:

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

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

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

index.htm

ログイン後にコピー

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 を使用します:

ログイン後にコピー

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

ログイン後にコピー

すべての設定とインポートされた 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文件只需一行代码

i am liyanan and this is a testn Page.

ログイン後にコピー

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

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