模塊化編程將大型應(yīng)用程序分解成更小的、易於管理的代碼塊?；赌K的編碼簡(jiǎn)化了維護(hù)工作並提高了代碼的可重用性。然而，管理模塊之間的依賴關(guān)係是開發(fā)人員在整個(gè)應(yīng)用程序開發(fā)過(guò)程中面臨的主要問題。 RequireJS 是最流行的用於管理模塊之間依賴關(guān)係的框架之一。本教程探討了模塊化代碼的需求，並展示了 RequireJS 如何提供幫助。

關(guān)鍵要點(diǎn)

• RequireJS 是一個(gè)流行的框架，用於管理 JavaScript 模塊之間的依賴關(guān)係，它提高了代碼的速度和質(zhì)量，尤其是在大型項(xiàng)目中。
• RequireJS 使用異步模塊加載 (AMD) 來(lái)加載文件，這允許腳本以非阻塞方式加載模塊及其依賴項(xiàng)。
• 在 RequireJS 中，所有代碼都包裝在 require() 或 define() 函數(shù)中。 require() 函數(shù)用於立即執(zhí)行的功能，而 define() 函數(shù)用於定義可在多個(gè)位置使用的模塊。
• RequireJS 通過(guò)促進(jìn)模塊化和關(guān)注點(diǎn)分離來(lái)提高代碼質(zhì)量，通過(guò)保持全局範(fàn)圍的整潔來(lái)降低命名衝突的風(fēng)險(xiǎn)，並提供強(qiáng)大的錯(cuò)誤處理機(jī)制。

加載 JavaScript 文件

大型應(yīng)用程序通常需要許多 JavaScript 文件。通常，它們使用 <p> <code>credits.js

在這裡，初始化是在加載

之前完成的。這將導(dǎo)致如下所示的錯(cuò)誤。而這個(gè)例子只需要三個(gè) JavaScript 文件。在一個(gè)更大的項(xiàng)目中，事情很容易失控。這就是 RequireJS 發(fā)揮作用的地方。

RequireJS 簡(jiǎn)介

RequireJS 是一個(gè)眾所周知的 JavaScript 模塊和文件加載器，受最新版本的流行瀏覽器支持。在 RequireJS 中，我們將代碼分離成模塊，每個(gè)模塊處理單一職責(zé)。此外，加載文件時(shí)需要配置依賴項(xiàng)。讓我們從下載 RequireJS 開始。下載完成後，將文件複製到您的項(xiàng)目文件夾。讓我們假設(shè)項(xiàng)目的目錄結(jié)構(gòu)現(xiàn)在類似於下圖：

scriptsmain.js

<script> 標(biāo)簽逐個(gè)加載。此外，每個(gè)文件都可能依賴于其他文件。最常見的例子是 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)買一個(gè)產(chǎn)品。首先，它檢查是否有足夠的積分可以購(gòu)買產(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;所有 JavaScript 文件（包括 RequireJS 文件）都位於 &lt;script src=&quot;purchase.js&quot;&gt;&lt;/script&gt; 文件夾內(nèi)。 &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt; 文件用於初始化，其他文件包含應(yīng)用程序邏輯。讓我們看看如何在 HTML 文件中包含腳本。 &lt;script src=&quot;credits.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 包含文件所需的唯一代碼。您可能想知道其他文件發(fā)生了什麼以及它們是如何包含的。 <code>data-main</code> 屬性定義了應(yīng)用程序的初始化點(diǎn)。在這種情況下，它是 <code>main.js</code>。 RequireJS 使用 <code>main.js</code> 來(lái)查找其他腳本和依賴項(xiàng)。在這種情況下，所有文件都位於同一個(gè)文件夾中。使用邏輯，您可以將文件移動(dòng)到您喜歡的任何文件夾?，F(xiàn)在，讓我們來(lái)看一下 <code>main.js</code>。 </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ù)的第一個(gè)參數(shù)指定依賴項(xiàng)。在前面的示例中，初始化依賴於 <code>purchase.js</code>，因?yàn)樗x了 <code>purchaseProduct()</code>。請(qǐng)注意，文件擴(kuò)展名已被省略。這是因?yàn)?RequireJS 只考慮 <code>.js</code> 文件。 <code>require()</code> 的第二個(gè)參數(shù)是一個(gè)匿名函數(shù)，它接受一個(gè)對(duì)象，該對(duì)像用於調(diào)用依賴文件中包含的函數(shù)。在這種情況下，我們只有一個(gè)依賴項(xiàng)?？梢允褂靡韵抡Z(yǔ)法加載多個(gè)依賴項(xiàng)：</p> <pre class='brush:php;toolbar:false;'>require([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;],function(a,b,c){ });</pre> <p><strong>使用 RequireJS 創(chuàng)建應(yīng)用程序</strong></p> <p>在本節(jié)中，我們將把上一節(jié)中討論的純 JavaScript 示例轉(zhuǎn)換為 RequireJS。我們已經(jīng)介紹了 <code>main.js</code>，所以讓我們繼續(xù)討論其他文件。 <code>purchase.js</code></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> <p>首先，我們聲明購(gòu)買功能依賴於 <code>credits</code> 和 <code>products</code>。在 <code>return</code> 語(yǔ)句中，我們可以定義每個(gè)模塊的函數(shù)。在這裡，我們已經(jīng)對(duì)傳遞的對(duì)象調(diào)用了 <code>getCredits()</code> 和 <code>reserveProduct()</code> 函數(shù)。 <code>product.js</code> 和 <code>credits.js</code> 類似，如下所示。 <code>products.js</code></p> <pre class='brush:php;toolbar:false;'>define(function(products) { return { reserveProduct: function() { console.log(&quot;Function : reserveProduct&quot;); return true; } } });</pre> <p><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>這兩個(gè)文件都被配置為獨(dú)立模塊——這意味著它們不依賴於任何東西。需要注意的重要一點(diǎn)是使用了 <code>define()</code> 而不是 <code>require()</code>。選擇 <code>require()</code> 或 <code>define()</code> 取決於代碼的結(jié)構(gòu)，將在下一節(jié)中討論。 </p> <p><strong>使用 <code>require()</code> 與 <code>define()</code></strong></p> <p>前面我提到過(guò)我們可以使用 <code>require()</code> 和 <code>define()</code> 來(lái)加載依賴項(xiàng)。理解這兩個(gè)函數(shù)之間的區(qū)別對(duì)於管理依賴項(xiàng)至關(guān)重要。 <code>require()</code> 函數(shù)用於運(yùn)行立即執(zhí)行的功能，而 <code>define()</code> 函數(shù)用於定義可在多個(gè)位置使用的模塊。在我們的示例中，我們需要立即運(yùn)行 <code>purchaseProduct()</code> 函數(shù)。因此，<code>require()</code> 用於 <code>main.js</code> 中。但是，其他文件是可重用的模塊，因此使用 <code>define()</code>。 </p> <p><strong>為什麼 RequireJS 如此重要</strong></p><p>在純 JavaScript 示例中，由於文件加載順序不正確，會(huì)生成錯(cuò)誤?，F(xiàn)在，在 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>這裡的區(qū)別在於，在 RequireJS 示例中沒有執(zhí)行任何代碼。我們可以確認(rèn)這一點(diǎn)，因?yàn)榭刂婆_(tái)上沒有打印任何內(nèi)容。在純 JavaScript 示例中，我們?cè)谏慑e(cuò)誤之前在控制臺(tái)上打印了一些輸出。 RequireJS 在加載所有依賴模塊之前等待，然後才執(zhí)行功能。如果任何模塊丟失，它不會(huì)執(zhí)行任何代碼。這有助於我們保持?jǐn)?shù)據(jù)的完整性。 </p> <p><strong>管理依賴文件的順序</strong></p> <p>RequireJS 使用異步模塊加載 (AMD) 來(lái)加載文件。每個(gè)依賴模塊都將按照給定的順序通過(guò)異步請(qǐng)求開始加載。即使考慮了文件順序，由於異步特性，我們也不能保證第一個(gè)文件在第二個(gè)文件之前加載。因此，RequireJS 允許我們使用 shim 配置來(lái)定義需要按正確順序加載的文件序列。讓我們看看如何在 RequireJS 中創(chuàng)建配置選項(xiàng)。 </p> <pre class='brush:php;toolbar:false;'>&lt;??&gt;</pre> <p>RequireJS 允許我們使用 <code>config()</code> 函數(shù)提供配置選項(xiàng)。它接受一個(gè)名為 <code>shim</code> 的參數(shù)，我們可以使用它來(lái)定義依賴項(xiàng)的強(qiáng)制序列。您可以在 RequireJS API 文檔中找到完整的配置指南。 </p> <pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre> <p>在正常情況下，這四個(gè)文件將按照給定的順序開始加載。這裡，<code>source2 依賴於 <code>source1。因此，一旦 <code>source1 完成加載，<code>source2 將認(rèn)為所有依賴項(xiàng)都已加載。但是，<code>dependency1 和 <code>dependency2 可能仍在加載中。使用 shim 配置，必須在 <code>source1 之前加載依賴項(xiàng)。因此，不會(huì)生成錯(cuò)誤。 <p><strong>結(jié)論 <p>我希望本教程能幫助您開始使用 RequireJS。雖然它看起來(lái)很簡(jiǎn)單，但在管理大型 JavaScript 應(yīng)用程序中的依賴項(xiàng)方面確實(shí)非常強(qiáng)大。僅本教程不足以涵蓋 RequireJS 的所有方面，因此我希望您可以使用官方網(wǎng)站學(xué)習(xí)所有高級(jí)配置和技術(shù)。 <p><strong>(以下為原文中FAQs部分的偽原創(chuàng)，保持了原意，並對(duì)語(yǔ)句進(jìn)行了調(diào)整和改寫) <p><strong>關(guān)於使用 RequireJS 進(jìn)行 JavaScript 模塊加載的常見問題 (FAQs) <p><strong>RequireJS 在 JavaScript 中的主要用途是什麼？ <p>RequireJS 是一個(gè) JavaScript 文件和模塊加載器，它針對(duì)瀏覽器使用進(jìn)行了優(yōu)化，但也適用於其他 JavaScript 環(huán)境。使用 RequireJS 的主要目的是提高代碼的速度和質(zhì)量。它幫助您管理代碼模塊之間的依賴關(guān)係，並以高效的方式加載腳本。這在管理單個(gè)腳本可能變得很複雜的大型項(xiàng)目中尤其有用。 RequireJS 還通過(guò)減少全局變量的使用來(lái)幫助保持全局作用域的整潔。 <p><strong>RequireJS 如何處理依賴關(guān)係？ <p>RequireJS 通過(guò)一種稱為異步模塊定義 (AMD) 的機(jī)制來(lái)處理依賴關(guān)係。這允許腳本以非阻塞方式加載模塊及其依賴項(xiàng)。當(dāng)您定義模塊時(shí)，您指定其依賴項(xiàng)，RequireJS 確保在模塊本身之前加載這些依賴項(xiàng)。這樣，您可以確保在執(zhí)行模塊時(shí)所有必要的代碼都可用。 <p><strong>RequireJS 可以與 Node.js 一起使用嗎？ <p>是的，RequireJS 可以與 Node.js 一起使用，儘管它更常用於瀏覽器。當(dāng)與 Node.js 一起使用時(shí)，RequireJS 允許您像在瀏覽器中一樣將服務(wù)器端 JavaScript 代碼組織成模塊。但是，Node.js 有自己的模塊系統(tǒng) (CommonJS)，因此使用 RequireJS 不那麼常見。 <p><strong>RequireJS 如何提高代碼質(zhì)量？ <p>RequireJS 通過(guò)促進(jìn)模塊化和關(guān)注點(diǎn)分離來(lái)提高代碼質(zhì)量。通過(guò)將代碼組織成模塊，每個(gè)模塊都有其特定的功能，您可以編寫更易於維護(hù)和測(cè)試的代碼。它還通過(guò)保持全局作用域的整潔來(lái)降低命名衝突的風(fēng)險(xiǎn)。 <p><strong>RequireJS 和 CommonJS 之間有什麼區(qū)別？ <p>RequireJS 和 CommonJS 都是 JavaScript 的模塊系統(tǒng)，但它們有一些關(guān)鍵區(qū)別。 RequireJS 使用異步模塊定義 (AMD) 格式，該格式旨在異步地在瀏覽器中加載模塊及其依賴項(xiàng)。另一方面，Node.js 使用的 CommonJS 則同步加載模塊，這更適合服務(wù)器端環(huán)境。 <p><strong>如何在 RequireJS 中定義模塊？ <p>在 RequireJS 中，您可以使用 <code>define 函數(shù)定義模塊。此函數(shù)接受兩個(gè)參數(shù)：一個(gè)依賴項(xiàng)數(shù)組和一個(gè)工廠函數(shù)。一旦加載了所有依賴項(xiàng)，就會(huì)調(diào)用工廠函數(shù)，並且應(yīng)該返回模塊的值。 <p><strong>如何在 RequireJS 中加載模塊？ <p>要在 RequireJS 中加載模塊，您可以使用 <code>require 函數(shù)。此函數(shù)接受兩個(gè)參數(shù)：一個(gè)依賴項(xiàng)數(shù)組和一個(gè)回調(diào)函數(shù)。一旦加載了所有依賴項(xiàng)，就會(huì)調(diào)用回調(diào)函數(shù)。 <p><strong>我可以將 RequireJS 與其他 JavaScript 庫(kù)一起使用嗎？ <p>是的，RequireJS 可以與其他 JavaScript 庫(kù)（如 jQuery、Backbone 和 Angular）一起使用。它可以將這些庫(kù)加載為模塊並管理它們的依賴關(guān)係。 <p><strong>RequireJS 如何處理錯(cuò)誤？ <p>RequireJS 具有強(qiáng)大的錯(cuò)誤處理機(jī)制。如果腳本加載失敗，RequireJS 將觸發(fā)一個(gè)錯(cuò)誤事件。您可以偵聽此事件並適當(dāng)?shù)靥幚泶a中的錯(cuò)誤。 <p><strong>我可以將 RequireJS 用於生產(chǎn)環(huán)境嗎？ <p>是的，RequireJS 適用於開發(fā)和生產(chǎn)環(huán)境。對(duì)於生產(chǎn)環(huán)境，RequireJS 提供了一個(gè)優(yōu)化工具，該工具可以組合和壓縮您的 JavaScript 文件以提高加載時(shí)間。 </script>

以上是了解有效的JavaScript模塊加載的Requirej的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！