効果的なJavaScriptモジュールの読み込みには、JavaScriptモジュールの読み込みが必要です

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

キーポイント

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

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

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

<p> <code>credits.js

を使用します

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

requirejsはじめに

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

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

フォルダーにあります。 <script> 标签逐个加载。此外，每个文件都可能依赖于其他文件。最常见的例子是 jQuery 插件，它们都依赖于核心 jQuery 库。因此，必须在加载任何 jQuery 插件之前加载 jQuery。让我们来看一个在实际应用程序中加载 JavaScript 文件的简单示例。假设我们有以下三个 JavaScript 文件： <p><code>purchase.js &lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&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;div class=&quot;contentsignin&quot;&gt;ログイン後にコピー&lt;/div&gt;&lt;/div&gt; &lt;p&gt;&lt;code&gt;products.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function reserveProduct(){ console.log(&quot;Function : reserveProduct&quot;); return true; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>credits.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function getCredits(){ console.log(&quot;Function : getCredits&quot;); var credits = &quot;100&quot;; return credits; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>在这个例子中，我们试图购买一个产品。首先，它检查是否有足够的积分可以购买产品。然后，在验证积分后，它预订产品。另一个脚本 <code>main.js</code> 通过调用 <code>purchaseProduct()</code> 来初始化代码，如下所示：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var result = purchaseProduct();</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>可能出错的地方？</strong></p> <p>在这个例子中，<code>purchase.js</code> 依赖于 <code>credits.js</code> 和 <code>products.js</code>。因此，在调用 <code>purchaseProduct()</code> 之前需要加载这些文件。那么，如果我们按以下顺序包含 JavaScript 文件会发生什么情况呢？</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script src=&quot;products.js&quot;&gt;&lt;/script&gt;ファイルは初期化に使用され、他のファイルにはアプリケーションロジックが含まれています。 HTMLファイルにスクリプトを含める方法を見てみましょう。 &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><div class="contentsignin">ログイン後にコピー</div></div> <p>これは、requirejsを使用してファイルを含める必要がある唯一のコードです。他のファイルで何が起こっているのか、どのように含まれているのか疑問に思うかもしれません。 <code>data-main</code>属性は、アプリケーションの初期化ポイントを定義します。この場合、それは<code>main.js</code>です。要求js <code>main.js</code>を使用して、他のスクリプトや依存関係を見つけます。この場合、すべてのファイルは同じフォルダーにあります。ロジックを使用して、ファイルを好きなフォルダーに移動できます。それでは、<code>main.js</code>を見てみましょう。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p> requirejsでは、すべてのコードが<code>require()</code>または<code>define()</code>関数にラップされています。これらの関数の最初の引数は、依存関係を指定します。前の例では、初期化は<code>purchase.js</code>に依存します。ファイル拡張子は省略されていることに注意してください。これは、requirejsが<code>purchaseProduct()</code>ファイルのみを考慮しているためです。 2番目の引数は、依存ファイルに含まれる関数を呼び出すオブジェクトを受け入れる匿名関数です。この場合、依存関係は1つだけです。次の構文を使用して複数の依存関係をロードできます。 <code>.js</code> <code>require()</code></p>requirejsを使用してアプリケーションを作成します このセクションでは、前のセクションで説明した純粋なJavaScriptの例を要求するように変換します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;],function(a,b,c){ });</pre><div class="contentsignin">ログイン後にコピー</div></div>を取り上げましたので、他のドキュメントについて話し合いましょう。 <p><strong> </strong> </p>まず、購入機能は<p>と<code>main.js</code>に依存することを宣言します。 <code>purchase.js</code>ステートメントでは、各モジュールの関数を定義できます。ここでは、渡されたオブジェクト上の</p>および<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>関数を呼び出しました。 <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>両方のファイルは、スタンドアロンモジュールとして構成されています。つまり、何にも依存しないことを意味します。注意すべき重要なことは、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function(products) { return { reserveProduct: function() { console.log(&quot;Function : reserveProduct&quot;); return true; } } });</pre><div class="contentsignin">ログイン後にコピー</div></div>の代わりに<p>が使用されることです。選択を選択すると、コードの構造に依存し、次のセクションで説明します。 <code>credits.js</code> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div><p><code>define()</code>を使用して使用します <code>require()</code>先ほど、<code>require()</code>および<code>define()</code>を使用して依存関係をロードできると述べました。これら2つの機能の違いを理解することは、依存関係を管理するために不可欠です。 </p>関数はすぐに実行された関数を実行するために使用されますが、<p>関数は複数の場所で使用できるモジュールを定義するために使用されます。この例では、すぐに<strong>関数を実行する必要があります。したがって、<code>require()</code>は<code>define()</code>で使用されます。ただし、他のファイルは再利用可能なモジュールなので、</strong>を使用してください。 </p> <p><code>require()</code>なぜ必要なのかが非常に重要である<code>define()</code><code>require()</code><p>純粋なJavaScriptの例では、ファイルの負荷が誤っているためにエラーが生成されます。次に、requirejsの例で<code>credits.js</code>ファイルを削除し、それがどのように機能するかを確認します。次の図は、ブラウザチェックツールの出力を示しています。 </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の例でコードが実行されないことです。コンソールには何も印刷されていないため、これを確認できます。純粋なJavaScriptの例では、エラーを生成する前にコンソールにいくつかの出力を印刷します。関数を実行する前に、すべての従属モジュールをロードする前に、JSが待機する必要があります。モジュールが紛失した場合、コードは実行されません。これにより、データの完全性を維持できます。 </p> 依存関係ファイルの管理のシーケンス<p><strong>シーケンス< </strong> requirejsは、非同期モジュールロード（AMD）を使用してファイルをロードします。各依存モジュールは、指定された順序で非同期リクエストのロードを開始します。ファイルの注文が考慮されていても、非同期性のために最初のファイルが2番目のファイルの前にロードされることを保証することはできません。したがって、requirejsを使用すると、Shim構成を使用して、正しい順序でロードする必要があるファイルのシーケンスを定義できます。 requirejsで構成オプションを作成する方法を見てみましょう。 </p> <p> </p>requirejsを使用すると、<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;🎜&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>関数を使用して構成オプションを提供できます。依存関係の必須シーケンスを定義するために使用できる名前のパラメーターを受け入れます。 requirejs APIドキュメントに完全な構成ガイドを見つけることができます。 <p> <code>config()</code> <code>shim</code>通常の状況では、これらの4つのファイルは指定された順序でロードを開始します。ここでは、</p>は<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>に依存します。したがって、<p>が読み込みが終了したら、<code>source2はすべての依存関係をロードすると見なします。ただし、<code>source1および<code>source1はまだ読み込まれている可能性があります。 Shim構成を使用すると、依存関係を<code>source2の前にロードする必要があります。したがって、エラーは発生しません。 <code>dependency1 <code>dependency2<code>source1結論<p> <strong>このチュートリアルが、requirejsを始めるのに役立つことを願っています。シンプルに見えますが、大規模なJavaScriptアプリケーションで依存関係を管理するのに非常に強力です。このチュートリアルだけでは、要件のすべての側面をカバーするのに十分ではないため、公式Webサイトを使用してすべての高度な構成とテクニックを学ぶことができることを願っています。 <p>（以下は、元のテキストのFAQパーツの擬似オリジナルの作成であり、元の意味を維持し、文章を調整して書き直すことです）< <p>JavaScriptモジュールの読み込みに関するFAQ requirejs <strong> <p>javascriptのrequirejsの主な使用は何ですか？ <strong><p>requirejsは、ブラウザの使用に最適化されたJavaScriptファイルとモジュールローダーですが、他のJavaScript環境にも適しています。 requirejsを使用する主な目的は、コードの速度と品質を向上させることです。コードモジュールとロードスクリプト間の依存関係を効率的な方法で管理するのに役立ちます。これは、単一のスクリプトが複雑になる可能性のある大規模なプロジェクトで特に役立ちます。また、requirejsは、グローバル変数の使用を削減することにより、グローバルスコープをきれいに保つのにも役立ちます。 <p><strong>依存関係に対処する方法は？ <p> requirejsは、非同期モジュール定義（AMD）と呼ばれるメカニズムを介して依存関係を処理します。これにより、スクリプトはモジュールとその依存関係を非ブロッキング方法でロードできます。モジュールを定義すると、その依存関係を指定し、Module自体の前にこれらの依存関係がロードされることを要求します。このようにして、モジュールを実行するときに必要なすべてのコードが利用可能であることを確認できます。 <p><strong>node.jsで要求することはできますか？ <p>はい、[Node.jsで要求]を使用できますが、ブラウザーでより一般的に使用されています。 node.jsで使用すると、requirejsを使用すると、サーバー側のJavaScriptコードをブラウザのようにモジュールに整理できます。ただし、node.jsには独自のモジュールシステム（commonJS）があるため、requirejsを使用することはあまり一般的ではありません。 <p><strong>コード品質を改善する方法は？ <p> requirejsは、モジュール性と懸念の分離を促進することにより、コードの品質を向上させます。コードをモジュールに整理することにより、それぞれが特定の機能を備えているため、メンテナンスとテストが簡単なコードを記述できます。また、グローバルな範囲をきれいに保つことにより、競合を命名するリスクを減らします。 <p><strong>requirejsとcommonjsの違いは何ですか？ <p>requirejsとcommonjsはどちらもJavaScriptモジュールシステムですが、いくつかの重要な違いがあります。 requirejsは、ブラウザに非同期にモジュールとその依存関係をロードするように設計された非同期モジュール定義（AMD）形式を使用します。一方、node.jsで使用されるCommonJSは、サーバー側の環境により適したモジュールの負荷を同期させます。 <p><strong>requirejsでモジュールを定義する方法は？ <p> requirejsでは、<code>define関数を使用してモジュールを定義できます。この関数は、依存関係配列と工場関数の2つのパラメーターを取ります。すべての依存関係がロードされると、工場関数が呼び出され、モジュールの値を返す必要があります。 <p><strong>requirejsでモジュールをロードする方法は？ <p>requirejsでモジュールをロードするには、<code>require関数を使用できます。この関数は、依存関係配列とコールバック関数の2つのパラメーターを受け入れます。すべての依存関係がロードされると、コールバック関数が呼び出されます。 <p><strong>他のJavaScriptライブラリでrequirejsを使用できますか？ <p>はい、jquery、Backbone、Angularなどの他のJavaScriptライブラリでrequirejsを使用できます。これらのライブラリをモジュールとしてロードし、依存関係を管理できます。 <p><strong>エラーを処理する方法は？ <p> requirejsには強力なエラー処理メカニズムがあります。スクリプトがロードに失敗した場合、requirejsはエラーイベントをトリガーします。このイベントを聞いて、コードのエラーを適切に処理できます。 <p><strong>生産にrequirejsを使用できますか？ <p>はい、requirejsは開発環境と生産環境に適しています。生産環境のために、ReackJSはJavaScriptファイルを組み合わせて圧縮して読み込み時間を改善する最適化ツールを提供します。 </script>

以上が効果的なJavaScriptモジュールの読み込みには、JavaScriptモジュールの読み込みが必要ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。