ホームページ >ウェブフロントエンド >jsチュートリアル >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>
実行結果:
# #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 ファイルのパス ファイル名] です。私たちは輸入したいと思っています。 現時点での実行結果: このページのコンテンツが表示されました。以前のように、js が完了してからページが読み込まれるのを待つのではなく、ページが読み込まれた後にのみ js コードが実行されるため、操作効率が大幅に向上します。 上記のコードに従って、requirejs の基本的な API を分析できます。 requireJS は 3 つの変数を定義します:define、require、requirejs
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 サイトの他の関連記事を参照してください。