モジュラープログラミングは、大規(guī)模なアプリケーションをより小さく、管理しやすいコードブロックに分解します。モジュールベースのコーディングは、メンテナンスを簡(jiǎn)素化し、コードの再利用性を向上させます。ただし、管理モジュール間の依存関係は、アプリケーション開(kāi)発プロセス全體で開(kāi)発者が直面する大きな問(wèn)題です。 requirejsは、モジュール間の依存関係を管理するための最も人気のあるフレームワークの1つです。このチュートリアルでは、モジュラーコードの要件を調(diào)査し、要件がどのように役立つかを示します。

キーポイント

• requirejsは、JavaScriptモジュール間の依存関係を管理するための一般的なフレームワークであり、特に大規(guī)模なプロジェクトでコードの速度と品質(zhì)を向上させます。
requirejsでは、すべてのコードが
• またはrequire()関數(shù)にラップされています。 define()関數(shù)は、すぐに実行される関數(shù)に使用されますが、require()関數(shù)は複數(shù)の場(chǎng)所で使用できるモジュールを定義するために使用されます。 define()
requirejは、モジュール性と懸念の分離を促進(jìn)することによりコードの品質(zhì)を向上させ、グローバルな範(fàn)囲をきれいに保つことで競(jìng)合を命名するリスクを減らし、強(qiáng)力なエラー処理メカニズムを提供します。

JavaScriptファイルを読み込みます

大規(guī)模なアプリケーションには通常、多くのJavaScriptファイルが必要です。通常、彼らは

<p> <code>credits.js

を使用します

ここで、初期化はを読み込む前に行われます。これにより、以下に示すようにエラーが発生します。この例では、3つのJavaScriptファイルのみが必要です。より大きなプロジェクトでは、物事は簡(jiǎn)単に制御できなくなります。これは、requesjsが出てくる場(chǎng)所です。

requirejsはじめに

requirejsは、人気のあるブラウザーの最新バージョンでサポートされている有名なJavaScriptモジュールとファイルローダーです。 requirejsでは、コードをモジュールに分離し、それぞれが単一の責(zé)任を処理します。さらに、ファイルをロードするときに依存関係を構(gòu)成する必要があります。 requirejsのダウンロードから始めましょう。ダウンロードが完了したら、ファイルをプロジェクトフォルダーにコピーします。プロジェクトのディレクトリ構(gòu)造が次の図に似ていると仮定しましょう。

scripts main.jsすべてのJavaScriptファイル（requirejsファイルを含む）は、

フォルダーにあります。 <script> 標(biāo)簽逐個(gè)加載。此外，每個(gè)文件都可能依賴于其他文件。最常見(jiàn)的例子是 jQuery 插件，它們都依賴于核心 jQuery 庫(kù)。因此，必須在加載任何 jQuery 插件之前加載 jQuery。讓我們來(lái)看一個(gè)在實(shí)際應(yīng)用程序中加載 JavaScript 文件的簡(jiǎn)單示例。假設(shè)我們有以下三個(gè) JavaScript 文件： <p><code>purchase.js &lt;pre class='brush:php;toolbar:false;'&gt;function purchaseProduct(){ console.log(&amp;quot;Function : purchaseProduct&amp;quot;); var credits = getCredits(); if(credits &amp;gt; 0){ reserveProduct(); return true; } return false; }&lt;/pre&gt; &lt;p&gt;&lt;code&gt;products.js</code></p> <pre class='brush:php;toolbar:false;'>function reserveProduct(){ console.log(&quot;Function : reserveProduct&quot;); return true; }</pre> <p><code>credits.js</code></p> <pre class='brush:php;toolbar:false;'>function getCredits(){ console.log(&quot;Function : getCredits&quot;); var credits = &quot;100&quot;; return credits; }</pre> <p>在這個(gè)例子中，我們?cè)噲D購(gòu)買(mǎi)一個(gè)產(chǎn)品。首先，它檢查是否有足夠的積分可以購(gòu)買(mǎi)產(chǎn)品。然后，在驗(yàn)證積分后，它預(yù)訂產(chǎn)品。另一個(gè)腳本 <code>main.js</code> 通過(guò)調(diào)用 <code>purchaseProduct()</code> 來(lái)初始化代碼，如下所示：</p> <pre class='brush:php;toolbar:false;'>var result = purchaseProduct();</pre> <p><strong>可能出錯(cuò)的地方？</strong></p> <p>在這個(gè)例子中，<code>purchase.js</code> 依賴于 <code>credits.js</code> 和 <code>products.js</code>。因此，在調(diào)用 <code>purchaseProduct()</code> 之前需要加載這些文件。那么，如果我們按以下順序包含 JavaScript 文件會(huì)發(fā)生什么情況呢？</p> <pre class='brush:php;toolbar:false;'>&lt;script src=&quot;products.js&quot;&gt;&lt;/script&gt;ファイルは初期化に使用され、他のファイルにはアプリケーションロジックが含まれています。 HTMLファイルにスクリプトを含める方法を見(jiàn)てみましょう。 &lt;script src=&quot;purchase.js&quot;&gt;&lt;/script&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;html&quot;&gt;&lt;??&gt;</pre> <p>これは、requirejsを使用してファイルを含める必要がある唯一のコードです。他のファイルで何が起こっているのか、どのように含まれているのか疑問(wèn)に思うかもしれません。 <code>data-main</code>屬性は、アプリケーションの初期化ポイントを定義します。この場(chǎng)合、それは<code>main.js</code>です。要求js <code>main.js</code>を使用して、他のスクリプトや依存関係を見(jiàn)つけます。この場(chǎng)合、すべてのファイルは同じフォルダーにあります。ロジックを使用して、ファイルを好きなフォルダーに移動(dòng)できます。それでは、<code>main.js</code>を見(jiàn)てみましょう。 </p> <pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre> <p> requirejsでは、すべてのコードが<code>require()</code>または<code>define()</code>関數(shù)にラップされています。これらの関數(shù)の最初の引數(shù)は、依存関係を指定します。前の例では、初期化は<code>purchase.js</code>に依存します。ファイル拡張子は省略されていることに注意してください。これは、requirejsが<code>purchaseProduct()</code>ファイルのみを考慮しているためです。 2番目の引數(shù)は、依存ファイルに含まれる関數(shù)を呼び出すオブジェクトを受け入れる匿名関數(shù)です。この場(chǎng)合、依存関係は1つだけです。次の構(gòu)文を使用して複數(shù)の依存関係をロードできます。 <code>.js</code> <code>require()</code></p>requirejsを使用してアプリケーションを作成します このセクションでは、前のセクションで説明した純粋なJavaScriptの例を要求するように変換します。 <pre class='brush:php;toolbar:false;'>require([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;],function(a,b,c){ });</pre>を取り上げましたので、他のドキュメントについて話し合いましょう。 <p><strong> </strong> </p>まず、購(gòu)入機(jī)能は<p>と<code>main.js</code>に依存することを宣言します。 <code>purchase.js</code>ステートメントでは、各モジュールの関數(shù)を定義できます。ここでは、渡されたオブジェクト上の</p>および<pre class='brush:php;toolbar:false;'>define([&quot;credits&quot;,&quot;products&quot;], function(credits,products) { console.log(&quot;Function : purchaseProduct&quot;); return { purchaseProduct: function() { var credit = credits.getCredits(); if(credit &gt; 0){ products.reserveProduct(); return true; } return false; } } });</pre>関數(shù)を呼び出しました。 <p>は、以下に示すように<code>credits</code>に似ています。 <code>products</code><code>return</code> <code>getCredits()</code> <code>reserveProduct()</code> <code>product.js</code><code>credits.js</code> <code>products.js</code> </p>両方のファイルは、スタンドアロンモジュールとして構(gòu)成されています。つまり、何にも依存しないことを意味します。注意すべき重要なことは、<pre class='brush:php;toolbar:false;'>define(function(products) { return { reserveProduct: function() { console.log(&quot;Function : reserveProduct&quot;); return true; } } });</pre>の代わりに<p>が使用されることです。選択を選択すると、コードの構(gòu)造に依存し、次のセクションで説明します。 <code>credits.js</code> </p><pre class='brush:php;toolbar:false;'>define(function() { console.log(&quot;Function : getCredits&quot;); return { getCredits: function() { var credits = &quot;100&quot;; return credits; } } });</pre><p><code>define()</code>を使用して使用します <code>require()</code>先ほど、<code>require()</code>および<code>define()</code>を使用して依存関係をロードできると述べました。これら2つの機(jī)能の違いを理解することは、依存関係を管理するために不可欠です。 </p>関數(shù)はすぐに実行された関數(shù)を?qū)g行するために使用されますが、<p>関數(shù)は複數(shù)の場(chǎng)所で使用できるモジュールを定義するために使用されます。この例では、すぐに<strong>関數(shù)を?qū)g行する必要があります。したがって、<code>require()</code>は<code>define()</code>で使用されます。ただし、他のファイルは再利用可能なモジュールなので、</strong>を使用してください。 </p> <p><code>require()</code>なぜ必要なのかが非常に重要である<code>define()</code><code>require()</code><p>純粋なJavaScriptの例では、ファイルの負(fù)荷が誤っているためにエラーが生成されます。次に、requirejsの例で<code>credits.js</code>ファイルを削除し、それがどのように機(jī)能するかを確認(rèn)します。次の図は、ブラウザチェックツールの出力を示しています。 </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036404874237.jpg" class="lazy" alt="Understanding RequireJS for Effective JavaScript Module Loading " /></p> <p>ここでの違いは、requirejsの例でコードが実行されないことです。コンソールには何も印刷されていないため、これを確認(rèn)できます。純粋なJavaScriptの例では、エラーを生成する前にコンソールにいくつかの出力を印刷します。関數(shù)を?qū)g行する前に、すべての従屬モジュールをロードする前に、JSが待機(jī)する必要があります。モジュールが紛失した場(chǎng)合、コードは実行されません。これにより、データの完全性を維持できます。 </p> 依存関係ファイルの管理のシーケンス<p><strong>シーケンス< </strong> requirejsは、非同期モジュールロード（AMD）を使用してファイルをロードします。各依存モジュールは、指定された順序で非同期リクエストのロードを開(kāi)始します。ファイルの注文が考慮されていても、非同期性のために最初のファイルが2番目のファイルの前にロードされることを保証することはできません。したがって、requirejsを使用すると、Shim構(gòu)成を使用して、正しい順序でロードする必要があるファイルのシーケンスを定義できます。 requirejsで構(gòu)成オプションを作成する方法を見(jiàn)てみましょう。 </p> <p> </p>requirejsを使用すると、<pre class='brush:php;toolbar:false;'>&lt;??&gt;</pre>関數(shù)を使用して構(gòu)成オプションを提供できます。依存関係の必須シーケンスを定義するために使用できる名前のパラメーターを受け入れます。 requirejs APIドキュメントに完全な構(gòu)成ガイドを見(jiàn)つけることができます。 <p> <code>config()</code> <code>shim</code>通常の狀況では、これらの4つのファイルは指定された順序でロードを開(kāi)始します。ここでは、</p>は<pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre>に依存します。したがって、<p>が読み込みが終了したら、<code>source2はすべての依存関係をロードすると見(jiàn)なします。ただし、<code>source1および<code>source1はまだ読み込まれている可能性があります。 Shim構(gòu)成を使用すると、依存関係を<code>source2の前にロードする必要があります。したがって、エラーは発生しません。 <code>dependency1 <code>dependency2<code>source1結(jié)論<p> <strong>このチュートリアルが、requirejsを始めるのに役立つことを願(yuàn)っています。シンプルに見(jiàn)えますが、大規(guī)模なJavaScriptアプリケーションで依存関係を管理するのに非常に強(qiáng)力です。このチュートリアルだけでは、要件のすべての側(cè)面をカバーするのに十分ではないため、公式Webサイトを使用してすべての高度な構(gòu)成とテクニックを?qū)Wぶことができることを願(yuàn)っています。 <p>（以下は、元のテキストのFAQパーツの擬似オリジナルの作成であり、元の意味を維持し、文章を調(diào)整して書(shū)き直すことです）< <p>JavaScriptモジュールの読み込みに関するFAQ requirejs <strong> <p>javascriptのrequirejsの主な使用は何ですか？ <strong><p>requirejsは、ブラウザの使用に最適化されたJavaScriptファイルとモジュールローダーですが、他のJavaScript環(huán)境にも適しています。 requirejsを使用する主な目的は、コードの速度と品質(zhì)を向上させることです。コードモジュールとロードスクリプト間の依存関係を効率的な方法で管理するのに役立ちます。これは、単一のスクリプトが複雑になる可能性のある大規(guī)模なプロジェクトで特に役立ちます。また、requirejsは、グローバル変數(shù)の使用を削減することにより、グローバルスコープをきれいに保つのにも役立ちます。 <p><strong>依存関係に対処する方法は？ <p> requirejsは、非同期モジュール定義（AMD）と呼ばれるメカニズムを介して依存関係を処理します。これにより、スクリプトはモジュールとその依存関係を非ブロッキング方法でロードできます。モジュールを定義すると、その依存関係を指定し、Module自體の前にこれらの依存関係がロードされることを要求します。このようにして、モジュールを?qū)g行するときに必要なすべてのコードが利用可能であることを確認(rèn)できます。 <p><strong>node.jsで要求することはできますか？ <p>はい、[Node.jsで要求]を使用できますが、ブラウザーでより一般的に使用されています。 node.jsで使用すると、requirejsを使用すると、サーバー側(cè)のJavaScriptコードをブラウザのようにモジュールに整理できます。ただし、node.jsには獨(dú)自のモジュールシステム（commonJS）があるため、requirejsを使用することはあまり一般的ではありません。 <p><strong>コード品質(zhì)を改善する方法は？ <p> requirejsは、モジュール性と懸念の分離を促進(jìn)することにより、コードの品質(zhì)を向上させます。コードをモジュールに整理することにより、それぞれが特定の機(jī)能を備えているため、メンテナンスとテストが簡(jiǎn)単なコードを記述できます。また、グローバルな範(fàn)囲をきれいに保つことにより、競(jìng)合を命名するリスクを減らします。 <p><strong>requirejsとcommonjsの違いは何ですか？ <p>requirejsとcommonjsはどちらもJavaScriptモジュールシステムですが、いくつかの重要な違いがあります。 requirejsは、ブラウザに非同期にモジュールとその依存関係をロードするように設(shè)計(jì)された非同期モジュール定義（AMD）形式を使用します。一方、node.jsで使用されるCommonJSは、サーバー側(cè)の環(huán)境により適したモジュールの負(fù)荷を同期させます。 <p><strong>requirejsでモジュールを定義する方法は？ <p> requirejsでは、<code>define関數(shù)を使用してモジュールを定義できます。この関數(shù)は、依存関係配列と工場(chǎng)関數(shù)の2つのパラメーターを取ります。すべての依存関係がロードされると、工場(chǎng)関數(shù)が呼び出され、モジュールの値を返す必要があります。 <p><strong>requirejsでモジュールをロードする方法は？ <p>requirejsでモジュールをロードするには、<code>require関數(shù)を使用できます。この関數(shù)は、依存関係配列とコールバック関數(shù)の2つのパラメーターを受け入れます。すべての依存関係がロードされると、コールバック関數(shù)が呼び出されます。 <p><strong>他のJavaScriptライブラリでrequirejsを使用できますか？ <p>はい、jquery、Backbone、Angularなどの他のJavaScriptライブラリでrequirejsを使用できます。これらのライブラリをモジュールとしてロードし、依存関係を管理できます。 <p><strong>エラーを処理する方法は？ <p> requirejsには強(qiáng)力なエラー処理メカニズムがあります。スクリプトがロードに失敗した場(chǎng)合、requirejsはエラーイベントをトリガーします。このイベントを聞いて、コードのエラーを適切に処理できます。 <p><strong>生産にrequirejsを使用できますか？ <p>はい、requirejsは開(kāi)発環(huán)境と生産環(huán)境に適しています。生産環(huán)境のために、ReackJSはJavaScriptファイルを組み合わせて圧縮して読み込み時(shí)間を改善する最適化ツールを提供します。 </script>

以上が効果的なJavaScriptモジュールの読み込みには、JavaScriptモジュールの読み込みが必要ですの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。