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

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!