Implémentation de l'injection de dépendances JavaScript

Avec la popularité d'AngularJS, l'injection de dépendances a commencé à attirer beaucoup d'attention dans le domaine JavaScript. L'avantage le plus important de DI est le développement d'unités de code réutilisables et testables. Cet article utilise un code simple pour expliquer le mécanisme d'implémentation de DI. Pour plus d'informations sur les avantages et les inconvénients de DI, veuillez vous référer à : Quand devez-vous utiliser l'injection de dépendances ?

Un cas d'utilisation de base de DI

Chaque module déclare ses propres dépendances et fournit ses propres services. Par exemple :

di.service('foo', ['bar'], function foo(bar){ function Foo(){ this.bar = bar;
    } this.prototype.greeting = function(){ console.log('hello, world');
    } return Foo;
}); var foo = di.container.get('foo');
foo.greeting();

Notez la différence entre l'injection de dépendances et CommonJS (ou AMD). foo n'a besoin que de déclarer sa barre de dépendances et n'a pas besoin de l'obtenir activement. C'est ce qui fait que la fonction foo ignore complètement l'emplacement et la méthode de construction des dépendances, faisant de la fonction foo une unité de code testable et réutilisable.

Conception du framework DI

L'enregistrement des services et l'utilisation des services doivent être effectués à des moments différents. En tant qu'outil spécial de résolution des dépendances, le framework DI divise le cycle de vie d'une unité logicielle en une phase d'enregistrement et une phase d'exécution. Dans l'exemple ci-dessus, les services foo et bar sont fournis pendant la phase d'enregistrement, et ces services sont obtenus et utilisés pendant la phase d'exécution. La plupart des frameworks DI adoptent une stratégie de construction paresseuse, ce qui évite également la difficulté de construction pendant la phase d'enregistrement.

La personnalisation du service peut être effectuée après la phase d'inscription et avant la phase d'exécution. AngularJS 1 introduit la phase de configuration pour personnaliser ces services, et son fournisseur peut être compris comme un objet d'usine spécialisé. BottleJS utilise des décorateurs et des middlewares pour prendre en charge la personnalisation des services.

Utilisez un conteneur IoC pour indexer des instances de service ou stocker des fournisseurs de services. Lorsqu'une personne fournit un service, celui-ci est ajouté au conteneur. Lorsque quelqu'un utilise le service, le fournisseur est trouvé dans le conteneur et une instance de service est générée. Les instances de service peuvent souvent être mises en cache.

Implémentation du framework DI

Tout d'abord, implémentons la fonction d'interface la plus courante .service(), qui est utilisée pour enregistrer le constructeur d'un service. La fonction transmise sera à nouveau exploitée.

var di = {
    container: {}
};

di.service = function(name, Constructor) {
    defineLazyProperty(name, () => new Constructor());
}; function defineLazyProperty(name, getter){ Object.defineProperty(di.container, name, {
        configurable: true,
        get: function() { var obj = getter(container); Object.defineProperty(di.container, name, {
                configurable: false value: obj
            }); return obj;
        }
    });
}

Object.defineProperty est utilisé ici pour la mise en cache des services. Le constructeur n'est appelé que la première fois que le service est construit, et les accès suivants lisent directement les propriétés du conteneur IoC. Il s'agit d'une méthode standard d'ES5 et présente une très bonne compatibilité. Avec la méthode définirLazyProperty(), la mise en œuvre de ces interfaces d'enregistrement couramment utilisées est très intuitive :

di.factory = function(name, factory) { return defineLazyProperty(name, factory);
};

di.provider = function(name, Provider) { return defineLazyProperty(name, function(){ var provider = new Provider(); return provider.$get();
    });
};

di.value = function(name, val) { return defineLazyProperty(name, () => val);
};

L'interface personnalisée du service ne sera pas décrite en détail. Il convient de mentionner que la personnalisation unifiée du service nécessite. constructeur de services unifiés au lieu d’appeler directement .defineLazyProperty() pour générer des propriétés. Ces stratégies dans AngularJS sont implémentées par Provider, et toutes les autres méthodes d'enregistrement de services sont implémentées par Provider.

Ce qui précède est le contenu de l'implémentation de l'injection de dépendances JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !