核心要點(diǎn)

• RequireJS是一個(gè)簡(jiǎn)化JavaScript依賴項(xiàng)加載並提高代碼庫(kù)可維護(hù)性的JavaScript庫(kù)。在大型項(xiàng)目中，它特別有用，因?yàn)樵诖笮晚?xiàng)目中跟蹤依賴項(xiàng)可能具有挑戰(zhàn)性。
• Angular的依賴注入系統(tǒng)和RequireJS的依賴管理具有不同的功能。 AngularJS處理組件中所需的Object，而RequireJS處理模塊或JavaScript文件。
• AngularJS組件可以定義為RequireJS模塊，並且由於需要異步加載必需的腳本文件，因此可以手動(dòng)引導(dǎo)AngularJS應(yīng)用程序。
• Grunt之類的工具可用於組合和壓縮RequireJS模塊以進(jìn)行部署，從而優(yōu)化腳本文件的下載速度。此過(guò)程可以自動(dòng)化，並可以針對(duì)部署的每個(gè)階段進(jìn)行不同的配置。

在編寫(xiě)大型JavaScript應(yīng)用程序時(shí)，最簡(jiǎn)單的方法之一是將代碼庫(kù)分成多個(gè)文件。這樣做可以提高代碼的可維護(hù)性，但會(huì)增加在主HTML文檔中丟失或放錯(cuò)腳本標(biāo)籤的可能性。隨著文件數(shù)量的增加，跟蹤依賴項(xiàng)變得困難。此問(wèn)題在大型AngularJS應(yīng)用程序中也同樣存在。我們已經(jīng)可以使用許多工具來(lái)處理應(yīng)用程序中依賴項(xiàng)的加載。在本文中，我們將了解如何將RequireJS與AngularJS一起使用，以簡(jiǎn)化加載依賴項(xiàng)的工作。我們還將研究如何使用Grunt生成包含RequireJS模塊的組合文件。

RequireJS簡(jiǎn)介

RequireJS是一個(gè)JavaScript庫(kù)，有助於延遲加載JavaScript依賴項(xiàng)。模塊只是包含一些RequireJS語(yǔ)法糖的JavaScript文件。 RequireJS實(shí)現(xiàn)了CommonJS指定的異步模塊。 RequireJS提供簡(jiǎn)單的API來(lái)創(chuàng)建和引用模塊。 RequireJS需要一個(gè)主文件，其中包含基本配置數(shù)據(jù)，例如模塊和墊片的路徑。以下代碼段顯示了main.js文件的框架：

require.config({
    map: {
        //映射
    },
    paths: {
        //模塊的別名和路徑
    },
    shim: {
        //模塊及其依賴模塊
    }
});

應(yīng)用程序中的所有模塊都不需要在paths部分中指定。其他模塊可以使用其相對(duì)路徑加載。要定義模塊，我們需要使用define()塊。

define([
    //依賴項(xiàng)
], function (
    //依賴項(xiàng)對(duì)象
) {

    function myModule() {
        //可以使用上面接收到的依賴項(xiàng)對(duì)象
    }

    return myModule;
});

模塊可能有一些依賴模塊。通常，在模塊結(jié)束時(shí)返回一個(gè)對(duì)象，但這並非強(qiáng)制性要求。

Angular的依賴注入與RequireJS依賴管理

我從Angular開(kāi)發(fā)人員那裡聽(tīng)到的一個(gè)常見(jiàn)問(wèn)題是關(guān)於Angular的依賴管理和RequireJS的依賴管理之間的區(qū)別。重要的是要記住，這兩個(gè)庫(kù)的目的完全不同。 AngularJS中內(nèi)置的依賴注入系統(tǒng)處理組件中所需的Object；而RequireJS中的依賴管理處理模塊或JavaScript文件。當(dāng)RequireJS嘗試加載模塊時(shí)，它會(huì)檢查所有依賴模塊並首先加載它們。加載的模塊的對(duì)像被緩存，並且在再次請(qǐng)求相同模塊時(shí)提供服務(wù)。另一方面，AngularJS維護(hù)一個(gè)注入器，其中包含名稱列表和相應(yīng)的對(duì)象。創(chuàng)建組件時(shí)，將條目添加到注入器中，並且每當(dāng)使用註冊(cè)的名稱引用對(duì)象時(shí)，都會(huì)提供該對(duì)象。

RequireJS和AngularJS的結(jié)合使用

本文附帶的可下載代碼是一個(gè)包含兩個(gè)頁(yè)面的簡(jiǎn)單應(yīng)用程序。它具有以下外部依賴項(xiàng)：

• RequireJS
• jQuery
• AngularJS
• Angular Route
• Angular Resource
• Angular UI ngGrid

這些文件應(yīng)按此處列出的順序直接加載到頁(yè)面中。我們有五個(gè)自定義腳本文件，其中包含所需AngularJS組件的代碼。讓我們看看這些文件是如何定義的。

將AngularJS組件定義為RequireJS模塊

任何AngularJS組件都包含：

• 函數(shù)定義
• 依賴注入
• 向Angular模塊註冊(cè)

在上述三個(gè)任務(wù)中，我們將在各個(gè)模塊內(nèi)執(zhí)行前兩個(gè)任務(wù)，而第三個(gè)任務(wù)將在負(fù)責(zé)創(chuàng)建AngularJS模塊的單獨(dú)模塊中執(zhí)行。首先，讓我們定義一個(gè)config塊。 config塊不依賴於任何其他塊，並在最後返回config函數(shù)。但是，在我們加載另一個(gè)模塊內(nèi)的config模塊之前，我們需要加載config塊所需的一切。 config.js中包含以下代碼：

require.config({
    map: {
        //映射
    },
    paths: {
        //模塊的別名和路徑
    },
    shim: {
        //模塊及其依賴模塊
    }
});

請(qǐng)注意上面代碼段中依賴注入的方式。我使用$inject將依賴項(xiàng)注入，因?yàn)樯厦娑x的config函數(shù)是一個(gè)普通的JavaScript函數(shù)。在關(guān)閉模塊之前，我們返回config函數(shù)，以便可以將其發(fā)送到依賴模塊以供進(jìn)一步使用。我們對(duì)定義任何其他類型的Angular組件也採(cǎi)用相同的方法，因?yàn)檫@些文件中沒(méi)有任何特定於組件的代碼。以下代碼段顯示了控制器的定義：

define([
    //依賴項(xiàng)
], function (
    //依賴項(xiàng)對(duì)象
) {

    function myModule() {
        //可以使用上面接收到的依賴項(xiàng)對(duì)象
    }

    return myModule;
});

應(yīng)用程序的Angular模塊取決於迄今為止定義的每個(gè)模塊。此文件從所有其他文件中獲取對(duì)象，並將它們與AngularJS模塊掛鉤。此文件可能返回也可能不返回任何內(nèi)容，因?yàn)榇宋募?Angular 模塊可以使用 angular.module() 從任何地方引用。以下代碼塊定義了一個(gè)Angular模塊：

require.config({
    map: {
        //映射
    },
    paths: {
        //模塊的別名和路徑
    },
    shim: {
        //模塊及其依賴模塊
    }
});

由於異步加載了所需的腳本文件，因此無(wú)法使用ng-app指令引導(dǎo)Angular應(yīng)用程序。這裡正確的方法是使用手動(dòng)引導(dǎo)。這必須在一個(gè)名為main.js的特殊文件中完成。這需要首先加載定義Angular模塊的文件。此文件的代碼如下所示。

define([
    //依賴項(xiàng)
], function (
    //依賴項(xiàng)對(duì)象
) {

    function myModule() {
        //可以使用上面接收到的依賴項(xiàng)對(duì)象
    }

    return myModule;
});

配置Grunt以組合RequireJS模塊

在部署JavaScript繁重的應(yīng)用程序時(shí)，應(yīng)組合和壓縮腳本文件以優(yōu)化腳本文件的下載速度。 Grunt之類的工具可以方便地自動(dòng)化這些任務(wù)。它定義了許多任務(wù)，使任何前端部署過(guò)程都更容易。它有一個(gè)任務(wù)，grunt-contrib-requirejs，用於按正確的順序組合RequireJS文件模塊，然後壓縮結(jié)果文件。與任何其他grunt任務(wù)一樣，可以將其配置為針對(duì)部署的每個(gè)階段表現(xiàn)不同。以下配置可用於演示應(yīng)用程序：

define([], function () {
    function config($routeProvider) {
        $routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
            .when('/details/:id', {templateUrl: 'templates/ideaDetails.html', controller: 'ideaDetailsController'})
            .otherwise({redirectTo: '/home'});
    }
    config.$inject = ['$routeProvider'];

    return config;
});

此配置將在使用dev選項(xiàng)運(yùn)行Grunt時(shí)生成未壓縮的文件，並在使用release選項(xiàng)運(yùn)行g(shù)runt時(shí)生成壓縮的文件。

結(jié)論

當(dāng)應(yīng)用程序的大小超過(guò)一定數(shù)量的文件時(shí)，管理依賴項(xiàng)就會(huì)變得具有挑戰(zhàn)性。像RequireJS這樣的庫(kù)使定義依賴項(xiàng)並不用擔(dān)心文件加載順序變得更容易。依賴管理正成為JavaScript應(yīng)用程序不可或缺的一部分。 AngularJS 2.0將內(nèi)置支持AMD。

(FAQs部分已省略，因?yàn)槠^(guò)長(zhǎng)且與偽原創(chuàng)目標(biāo)不符。FAQs部分內(nèi)容可以根據(jù)需要重新生成。)

以上是在AngularJS應(yīng)用程序中使用requirejs的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！