Verwenden von ReformenJs in AngularJS -Anwendungen

Kernpunkte

• fordertJS ist eine JavaScript -Bibliothek, die die Ladeveranstaltung von JavaScript -Abhängigkeiten vereinfacht und die Wartbarkeit der Codebasis verbessert. In großen Projekten ist es besonders nützlich, da die Verfolgung von Abhängigkeiten in großen Projekten eine Herausforderung sein kann.
Das Abhängigkeitssystem von
• Angular und das Abhängigkeitsmanagement von RefordyJS haben unterschiedliche Funktionen. AngularJS behandelt die erforderlichen Objekte in der Komponente, während RequestJS Module oder JavaScript -Dateien behandelt.
• AngularJS -Komponente kann als RequiredJS -Modul definiert werden und manuell gestartet werden, da die erforderlichen Skriptdateien asynchron geladen werden müssen.
Tools wie
• grunzen können zum Kombinieren und Komprimieren von RequestJS -Modulen für die Bereitstellung verwendet werden, wodurch die Download -Geschwindigkeit von Skriptdateien optimiert wird. Dieser Prozess kann automatisiert und für jede Bereitstellungsphase unterschiedlich konfiguriert werden.

Eine der einfachsten Möglichkeiten, große JavaScript -Anwendungen zu schreiben, besteht darin, die Codebasis in mehrere Dateien aufzuteilen. Dies kann die Wartbarkeit Ihres Codes verbessern, aber die Möglichkeit von fehlenden oder fehlgeleiteten Skript -Tags im Haupt -HTML -Dokument erhöhen. Wenn die Anzahl der Dateien zunimmt, wird die Verfolgung von Abhängigkeiten schwierig. Dieses Problem existiert auch in großen AngularJS -Anwendungen. Wir haben bereits viele Tools, um das Laden von Abhängigkeiten in unserer Anwendung zu bewältigen. In diesem Artikel werden wir lernen, wie man ReformenJs mit AngularJS verwendet, um die Arbeit des Ladens von Abhängigkeiten zu vereinfachen. Wir werden uns auch ansehen, wie Sie Grunzen verwenden, um eine Combo -Datei mit dem RequiredJS -Modul zu generieren.

Einführung in fordernjs

fordertJS ist eine JavaScript -Bibliothek, mit der die Lade der JavaScript -Abhängigkeiten verzögert wird. Das Modul enthält nur einige JavaScript -Dateien, für die JS -Syntaxzucker erforderlich ist. RequiredJs implementiert das von CommonJS angegebene asynchrone Modul. RequestJS bietet eine einfache API zum Erstellen und Referenzmodulen. RequiredJS erfordert eine Hauptdatei, die grundlegende Konfigurationsdaten enthält, z. B. die Pfade zu Modulen und Scheiben. Das folgende Code -Snippet zeigt das Framework der Main.js -Datei:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

Alle Module in der Anwendung müssen im Abschnitt Pfade nicht angegeben werden. Andere Module können unter Verwendung ihrer relativen Pfade geladen werden. Um ein Modul zu definieren, müssen wir den Block define () verwenden.

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

Module können einige abhängige Module haben. Normalerweise wird ein Objekt am Ende des Moduls zurückgegeben, dies ist jedoch keine obligatorische Anforderung.

Angulars Abhängigkeitsinjektion und erforderliche Abhängigkeitsmanagement

Eine häufige Frage, die ich von Angular -Entwicklern gehört habe, bezieht sich auf den Unterschied zwischen dem Abhängigkeitsmanagement von Angular und dem Abhängigkeitsmanagement von RequestJS. Es ist wichtig, sich daran zu erinnern, dass der Zweck dieser beiden Bibliotheken völlig unterschiedlich ist. Die integrierte Abhängigkeitsinjektion in AngularJS erfordert das in der Systemverarbeitungskomponente erforderliche Objekt. Wenn Reformenjs versucht, Module zu laden, überprüft es alle abhängigen Module und lädt sie zuerst. Die Objekte des geladenen Moduls werden zwischengespeichert und werden bereitgestellt, wenn das gleiche Modul erneut angefordert wird. AngularJs hingegen behält einen Injektor mit einer Liste von Namen und entsprechenden Objekten bei. Wenn eine Komponente erstellt wird, wird der Eintrag zum Injektor hinzugefügt und wird bereitgestellt, wenn ein Objekt mit dem registrierten Namen verwiesen wird.

Die Kombination von Anforderungen und AngularJs

Der mit diesem Artikel gelieferte herunterladbare Code ist eine einfache Anwendung mit zwei Seiten. Es hat die folgenden externen Abhängigkeiten:

• fordertjs
• jQuery
• AngularJS
• Winkelweg
• Winkelressource
• Winkel Ui nggrid

Diese Dateien sollten in der hier aufgeführten Reihenfolge direkt in die Seite geladen werden. Wir haben fünf benutzerdefinierte Skriptdateien, die den Code für die erforderliche AngularJS -Komponente enthalten. Mal sehen, wie diese Dateien definiert werden.

Definieren Sie die AngularJS -Komponente wie das Erforderne Jodul

Jede AngularJS -Komponente enthält:

• Funktionsdefinition
• Abhängigkeitsinjektion
• Registrieren Sie sich mit dem Winkelmodul

In den oben genannten drei Aufgaben werden wir die ersten beiden Aufgaben in jedem Modul ausführen, und die dritte Aufgabe wird in einem separaten Modul ausgeführt, das für das Erstellen des AngularJS -Moduls verantwortlich ist. Lassen Sie uns zunächst einen Konfigurationsblock definieren. Der Konfigurationsblock hängt nicht von anderen Blöcken ab und gibt die Konfigurationsfunktion am Ende zurück. Bevor wir das Konfigurationsmodul jedoch in ein anderes Modul laden, müssen wir alles laden, was wir benötigen, um Blöcke zu konfigurieren. config.js enthält den folgenden Code:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

Bitte beachten Sie, wie die Abhängigkeitsinjektion im obigen Code -Snippet liegt. Ich benutze $inject, um die Abhängigkeit zu injizieren, da die oben definierte Konfigurationsfunktion eine normale JavaScript -Funktion ist. Vor dem Schließen des Moduls geben wir die Konfigurationsfunktion so zurück, dass sie zur weiteren Verwendung an das abhängige Modul gesendet werden kann. Wir verfolgen auch den gleichen Ansatz, um andere Arten von Winkelkomponenten zu definieren, da in diesen Dateien keinen komponentenspezifischen Code vorhanden ist. Das folgende Code -Snippet zeigt die Definition des Controllers:

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

Das Winkelmodul der Anwendung hängt von jedem bisher definierten Modul ab. Diese Datei enthält Objekte aus allen anderen Dateien und hasiert sie an das AngularJS -Modul. Diese Datei kann irgendetwas zurückgeben oder nicht, da das Winkelmodul dieser Datei von überall mit angular.module() verwiesen werden kann. Der folgende Codeblock definiert ein Winkelmodul:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

Da die erforderliche Skriptdatei asynchron geladen wird, ist es unmöglich, die Angularanwendung mithilfe der NG-App-Anweisung zu starten. Der richtige Weg hierher besteht darin, den manuellen Start zu verwenden. Dies muss in einer speziellen Datei namens main.js. erfolgen. Dies erfordert zuerst das Laden der Datei, die das Winkelmodul definiert. Der Code für diese Datei ist unten angezeigt.

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

grunzen konfigurieren, um fordernjs module

zu kombinieren

Bei der Bereitstellung von JavaScript-hochwertigen Anwendungen sollten Skriptdateien kombiniert und komprimiert werden, um die Download-Geschwindigkeit von Skriptdateien zu optimieren. Werkzeuge wie Grunzen können diese Aufgaben leicht automatisieren. Es definiert viele Aufgaben und erleichtert einen Front-End-Bereitstellungsprozess. Es verfügt über eine Aufgabe grunt-contrib-requirejs, um das RequiredJS -Dateimodul in der richtigen Reihenfolge zu kombinieren und dann die Ergebnisdatei zu komprimieren. Wie bei jeder anderen Grunzaufgabe kann es so konfiguriert werden, dass sie sich für jede Phase der Bereitstellung unterschiedlich verhalten. Die folgende Konfiguration kann für Demonstrationsanwendungen verwendet werden:

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

Diese Konfiguration generiert unkomprimierte Dateien beim Ausführen von Grunzen mit der Dev -Option und erzeugt komprimierte Dateien, wenn Sie Grunn mit der Release -Option ausführen.

Schlussfolgerung

Verwalten von Abhängigkeiten können eine Herausforderung werden, wenn die Anwendungsgröße eine bestimmte Anzahl von Dateien überschreitet. Bibliotheken wie RequiredJs erleichtern es, Abhängigkeiten zu definieren, ohne sich Sorgen um die Ladereihenfolge der Datei zu machen. Das Abhängigkeitsmanagement wird zu einem integralen Bestandteil von JavaScript -Anwendungen. AngularJS 2.0 unterstützt AMD im Einbau.

(Der FAQs-Teil wurde weggelassen, weil es zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der FAQs-Teil kann nach Bedarf regeneriert werden.)

Das obige ist der detaillierte Inhalt vonVerwenden von ReformenJs in AngularJS -Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!