Points de base

• requirejs est une bibliothèque JavaScript qui simplifie le chargement des dépendances JavaScript et améliore la maintenabilité de la base de code. Il est particulièrement utile dans les grands projets, car le suivi des dépendances dans les grands projets peut être difficile.
• Le système d'injection de dépendance d'Angular et la gestion de la dépendance des obligations ont des fonctions différentes. AngularJS gère les objets requis dans le composant, tandis que les modules de requirejs gèrent les modules ou les fichiers JavaScript.
Le composant
• AngularJS peut être défini comme un module requisejs et peut être démarré manuellement car les fichiers de script requis doivent être chargés de manière asynchrone.
Des outils comme
• Grunt peuvent être utilisés pour combiner et comprimer les modules de requirejs pour le déploiement, optimisant ainsi la vitesse de téléchargement des fichiers de script. Ce processus peut être automatisé et peut être configuré différemment pour chaque phase du déploiement.

L'une des fa?ons les plus simples d'écrire de grandes applications JavaScript est de diviser la base de code en plusieurs fichiers. Cela peut améliorer la maintenabilité de votre code, mais peut augmenter la possibilité de balises de script manquantes ou déplacées dans le document HTML principal. à mesure que le nombre de fichiers augmente, le suivi des dépendances devient difficile. Ce problème existe également dans les grandes applications AngularJS. Nous avons déjà de nombreux outils pour gérer le chargement des dépendances dans notre application. Dans cet article, nous apprendrons à utiliser les OBSI avec AngularJS pour simplifier le travail de chargement des dépendances. Nous examinerons également comment utiliser le grognement pour générer un fichier combo contenant le module requisejs.

Introduction à requirejs

requirejs est une bibliothèque JavaScript qui aide à retarder le chargement des dépendances JavaScript. Le module contient juste des fichiers JavaScript qui nécessitent du sucre de syntaxe JS. Requirejs implémente le module asynchrone spécifié par CommonJS. Requirejs fournit une API simple pour créer et référence aux modules. Requirejs nécessite un fichier principal qui contient des données de configuration de base, telles que les chemins des modules et des cales. L'extrait de code suivant montre le cadre du fichier main.js:

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

Tous les modules de l'application n'ont pas besoin d'être spécifiés dans la section des chemins. D'autres modules peuvent être chargés en utilisant leurs chemins relatifs. Pour définir un module, nous devons utiliser le bloc Define ().

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

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

    return myModule;
});

peuvent avoir des modules dépendants. Habituellement, un objet est retourné à la fin du module, mais ce n'est pas une exigence obligatoire.

Injection de dépendance d'Angular et gestion de la dépendance aux obligations

Une question courante que j'ai entendue des développeurs angulaires concerne la différence entre la gestion des dépendances d'Angular et la gestion des dépendances de OigleJS. Il est important de se rappeler que le but de ces deux bibliothèques est complètement différent. L'injection de dépendance intégrée dans AngularJS nécessite l'objet requis dans le composant de traitement du système; Lorsque le requirejs essaie de charger des modules, il vérifie tous les modules dépendants et les charge d'abord. Les objets du module chargé sont mis en cache et sont fournis lorsque le même module est à nouveau demandé. AngularJS, en revanche, maintient un injecteur contenant une liste de noms et d'objets correspondants. Lorsqu'un composant est créé, l'entrée est ajoutée à l'injecteur et est fournie chaque fois qu'un objet est référencé avec le nom enregistré.

La combinaison de requirejs et angularjs

Le code téléchargeable qui est livré avec cet article est une application simple avec deux pages. Il a les dépendances externes suivantes:

• requirejs
• jQuery
• angularjs
• Route angulaire
• Ressource angulaire
• ui nggrid angulaire

Ces fichiers doivent être chargés directement dans la page dans l'ordre indiqué ici. Nous avons cinq fichiers de script personnalisés qui contiennent le code du composant AngularJS requis. Voyons comment ces fichiers sont définis.

Définissez le composant AngularJS comme module requisejs

Tout composant angularjs contient:

• Définition de la fonction
• Injection de dépendance
• Inscrivez-vous avec le module angulaire

Dans les trois taches ci-dessus, nous exécuterons les deux premières taches dans chaque module, et la troisième tache sera effectuée dans un module distinct responsable de la création du module AngularJS. Tout d'abord, définissons un bloc de configuration. Le bloc de configuration ne dépend de aucun autre bloc et renvoie la fonction de configuration à la fin. Cependant, avant de charger le module de configuration dans un autre module, nous devons charger tout ce dont nous avons besoin pour configurer des blocs. config.js contient le code suivant:

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

Veuillez noter la fa?on dont l'injection de dépendance est dans l'extrait de code ci-dessus. J'utilise $inject pour injecter la dépendance car la fonction de configuration définie ci-dessus est une fonction JavaScript normale. Avant de fermer le module, nous renvoyons la fonction de configuration afin qu'elle puisse être envoyée au module dépendant pour une utilisation ultérieure. Nous adoptons également la même approche pour définir tout autre type de composants angulaires, car il n'y a pas de code spécifique aux composants dans ces fichiers. L'extrait de code suivant montre la définition du contr?leur:

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

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

    return myModule;
});

Le module angulaire de l'application dépend de chaque module défini jusqu'à présent. Ce fichier prend des objets de tous les autres fichiers et les accroche au module AngularJS. Ce fichier peut ou non renvoyer quoi que ce soit, car le module angulaire de ce fichier peut être référencé de n'importe où à l'aide de angular.module(). Le bloc de code suivant définit un module angulaire:

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

étant donné que le fichier de script requis est chargé de manière asynchrone, il est impossible de démarrer l'application angulaire à l'aide de la directive NG-App. La bonne fa?on ici est d'utiliser le démarrage manuel. Cela doit être fait dans un fichier spécial appelé main.js. Cela nécessite un premier chargement du fichier qui définit le module angulaire. Le code de ce fichier est illustré ci-dessous.

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

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

    return myModule;
});

Configurer le grognement pour combiner les modules requisejs

Lors du déploiement des applications JavaScript-lourds, les fichiers de script doivent être combinés et compressés pour optimiser la vitesse de téléchargement des fichiers de script. Des outils comme Grunt peuvent facilement automatiser ces taches. Il définit de nombreuses taches, ce qui facilite tout processus de déploiement frontal. Il a une tache, grunt-contrib-requirejs, pour combiner le module de fichier requisejs dans l'ordre correct, puis compresser le fichier de résultat. Comme toute autre tache de grognement, il peut être configuré pour se comporter différemment pour chaque étape du déploiement. La configuration suivante peut être utilisée pour les applications de démonstration:

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

Cette configuration générera des fichiers non compressés lors de l'exécution du grognement avec l'option de développement et générera des fichiers compressés lors de l'exécution de grognement avec l'option de version.

Conclusion

La gestion des dépendances peut devenir difficile lorsque la taille de l'application dépasse un certain nombre de fichiers. Les bibliothèques comme DibleJS facilitent la définition des dépendances sans se soucier de l'ordre de chargement des fichiers. La gestion des dépendances fait partie intégrante des applications JavaScript. AngularJS 2.0 prendra en charge AMD dans intégré.

(La partie FAQ a été omise car elle est trop longue et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être régénérée au besoin.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!