コアポイント

• requirejsは、JavaScriptの依存関係を簡素化し、コードベースの保守性を向上させるJavaScriptライブラリです。大規(guī)模なプロジェクトでの依存関係を追跡することは困難な場合があるため、大規(guī)模なプロジェクトでは特に役立ちます。
• Angularの依存関係インジェクションシステムと要求JSの依存関係管理には、機(jī)能が異なります。 AngularJSはコンポーネント內(nèi)の必要なオブジェクトを処理しますが、必要なのはモジュールまたはjavaScriptファイルを処理します。
• AngularJSコンポーネントは、必要なスクリプトファイルを非同期にロードする必要があるため、requirejsモジュールとして定義でき、手動で起動できます。
• のようなツールを使用して、展開用の要件モジュールを結(jié)合および圧縮するために、スクリプトファイルのダウンロード速度を最適化することができます。このプロセスは自動化でき、展開の各段階では異なる構(gòu)成を行うことができます。

大規(guī)模なJavaScriptアプリケーションを記述する最も簡単な方法の1つは、コードベースを複數(shù)のファイルに分割することです。そうすることで、コードの保守性を向上させることができますが、メインのHTMLドキュメントでスクリプトタグが欠落または誤ったタグの可能性を高めることができます。ファイルの數(shù)が増えると、依存関係の追跡が困難になります。この問題は、大規(guī)模なAngularJSアプリケーションにも存在します。すでにアプリケーションで依存関係の負(fù)荷を処理するための多くのツールがあります。この記事では、AngularJを使用してRequireJSを使用する方法を?qū)W習(xí)して、依存関係の負(fù)荷作業(yè)を簡素化します。また、gruntを使用して、requirejsモジュールを含むコンボファイルを生成する方法についても検討します。

概要を要求する

requirejsは、JavaScriptの依存関係の読み込みを遅らせるのに役立つJavaScriptライブラリです。モジュールには、JS Syntax Sugarを必要とするJavaScriptファイルがいくつか含まれています。 requirejsは、CommonJSによって指定された非同期モジュールを?qū)g裝します。 requirejsは、モジュールを作成および參照するための簡単なAPIを提供します。 requirejsには、モジュールやシムへのパスなど、基本的な構(gòu)成データを含むメインファイルが必要です。次のコードスニペットには、main.jsファイルのフレームワークが表示されます。

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

アプリケーション內(nèi)のすべてのモジュールは、パスセクションで指定する必要はありません。他のモジュールは、相対パスを使用してロードできます。モジュールを定義するには、define（）ブロックを使用する必要があります。

define([
    //依賴項
], function (
    //依賴項對象
) {

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

    return myModule;
});

モジュールには、いくつかの従屬モジュールがある場合があります。通常、オブジェクトはモジュールの最後に返されますが、これは必須の要件ではありません。

Angularの依存関係注入と要求依存性管理

Angular開発者から聞いた一般的な質(zhì)問は、Angularの依存関係管理とRequirejsの依存関係管理の違いについてです。これら2つのライブラリの目的は完全に異なることを覚えておくことが重要です。 AngularJSの組み込み依存関係は、システム処理コンポーネントに必要なオブジェクトを必要とします。要求がモジュールをロードしようとすると、すべての従屬モジュールをチェックし、最初にロードします。ロードされたモジュールのオブジェクトはキャッシュされ、同じモジュールが再度要求されると提供されます。一方、AngularJは、名前と対応するオブジェクトのリストを含むインジェクターを維持します。コンポーネントが作成されると、エントリがインジェクターに追加され、オブジェクトが登録名で參照されるたびに提供されます。

requirejsとangularjsの組み合わせ

この記事に付屬するダウンロード可能なコードは、2ページの単純なアプリケーションです。次の外部依存関係があります：

requirejs
jQuery
angularjs
角度ルート
角度リソース
角度ui nggrid

これらのファイルは、ここにリストされている順序でページに直接ロードする必要があります。必要なAngularJSコンポーネントのコードを含む5つのカスタムスクリプトファイルがあります。これらのファイルがどのように定義されているか見てみましょう。

Angularjsコンポーネントをrequirejsモジュール として定義します

AngularJSコンポーネントには：

が含まれます

関數(shù)定義
依存関係噴射
Angularモジュールに登録
上記の3つのタスクでは、各モジュール內(nèi)の最初の2つのタスクを?qū)g行し、3番目のタスクがAngularJSモジュールの作成を擔(dān)當(dāng)する別のモジュールで実行されます。まず、構(gòu)成ブロックを定義しましょう。構(gòu)成ブロックは他のブロックに依存せず、最後に構(gòu)成関數(shù)を返します。ただし、構(gòu)成モジュールを別のモジュール內(nèi)にロードする前に、構(gòu)成ブロックを構(gòu)成するために必要なすべてをロードする必要があります。 config.jsには、次のコードが含まれています

上記のコードスニペットでの依存関係の噴射方法に注意してください。上記で定義された構(gòu)成関數(shù)は通常のJavaScript関數(shù)であるため、依存関係を注入するために

を使用します。モジュールを閉じる前に、構(gòu)成関數(shù)を返して、さらに使用するために従屬モジュールに送信できるようにします。また、これらのファイルにコンポーネント固有のコードがないため、他のタイプの角度コンポーネントを定義するために同じアプローチを取ります。次のコードスニペットは、コントローラーの定義を示しています。

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

アプリケーションのAngularモジュールは、これまでに定義された各モジュールに依存します。このファイルは、他のすべてのファイルからオブジェクトを取得し、AngularJSモジュールにフックします。このファイルは、このファイルのAngularモジュールを$injectを使用してどこからでも參照できるため、何も返されない場合があります。次のコードブロックは、Angularモジュールを定義します：

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

必要なスクリプトファイルは非同期にロードされているため、NG-APPディレクティブを使用してAngularアプリケーションを起動することは不可能です。ここで正しい方法は、手動ブートを使用することです。これは、main.jsという特別なファイルで行う必要があります。これには、Angularモジュールを定義するファイルの最初のロードが必要です。このファイルのコードを以下に示します。

define([
    //依賴項
], function (
    //依賴項對象
) {

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

    return myModule;
});

gruntを構(gòu)成して、requirejsモジュール

を組み合わせます

JavaScriptが多いアプリケーションを展開する場合、スクリプトファイルを組み合わせて圧縮して、スクリプトファイルのダウンロード速度を最適化する必要があります。 Gruntなどのツールは、これらのタスクを簡単に自動化できます。多くのタスクを定義し、フロントエンドの展開プロセスを容易にします。 requirejsファイルモジュールを正しい順序で組み合わせて、結(jié)果ファイルを圧縮するタスクがあります。他のグラントタスクと同様に、展開の各段階で異なる動作をするように構(gòu)成できます。次の構(gòu)成は、デモンストレーションアプリケーションに使用できます。 grunt-contrib-requirejs この構(gòu)成は、開発オプションでGruntを?qū)g行するときに非圧縮ファイルを生成し、リリースオプションでGruntを?qū)g行するときに圧縮ファイルを生成します。

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;
});

結(jié)論

依存関係の管理は、アプリケーションサイズが特定のファイル數(shù)を超えると困難になる可能性があります。 requirejsのようなライブラリにより、ファイルの読み込み順序を心配することなく、依存関係を簡単に定義できます。依存関係管理は、JavaScriptアプリケーションの不可欠な部分になりつつあります。 AngularJS 2.0は、內(nèi)蔵のAMDをサポートします。

（FAQの部分は長すぎて擬似オリジナルの目標(biāo)と一致しないため、省略されています。必要に応じて、FAQの部分は再生できます。

以上がAngularJSアプリケーションでrequirejsを使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。