Questions amusantes JavaScript : injection de dépendances

Vous devez avoir entendu parler du modèle Dependency Injection (DI), n'est-ce pas ?

Qu'il s'agisse du framework back-end populaire Spring ou de la tendance front-end angular.js, l'injection de dépendances est visible partout.

Le terme est un peu obscur, mais l'idée de base est très simple.

En utilisant un dicton courant, « Si tu veux du vent, tu auras du vent, si tu veux de la pluie, tu auras de la pluie » , ou en d'autres termes « Quand tu as nourriture, tu ouvres la bouche, et quand tu as des vêtements, tu tends les mains » .

Vous êtes peut-être encore un peu confus après avoir entendu mon explication. Laissez-moi d'abord vous donner un exemple.

Voici quelques modules, ils sont aussi appelés "dépendances" et sont stockés dans un objet de hachage :

var deps = {
  'firstDependency': function () {return 'this is firstDependency';},
  'secondDepency': function () {return 'this is secondDepency';},
};

Voici un gestionnaire d'injection de dépendances, qui sera nouveau le moment venu :

var DI = function (dependency) {
  this.dependency = dependency;
};

dans nouveau, passez deps en paramètre.

D'accord, vient maintenant le nœud du problème, ce qu'il faut écrire :

DI.prototype.inject = function (func) {......};

Cette méthode d'injection est liée au prototype de DI , reçoit une fonction en paramètre.

Alors comment l'utiliser ?

	var di = new DI(deps);

	var myDependentFunc = di.inject(function (secondDepency, firstDependency) {
	    firstDependency();
	    secondDepency();
	});

	myDependentFunc();

Observons d'abord la fonction anonyme transmise par inject. Elle représente l'exigence et c'est là que nous devons injecter.

Jetons d'abord un coup d'œil à ses paramètres formels

secondDepency, firstDependency

Il y a ici deux paramètres, qui représentent deux exigences. Le moment venu, nous analyserons ces deux paramètres et trouverons des liens. modules.

D'accord, revenons à l'écriture de la fonction d'injection, que devons-nous faire dans la première étape ?

Récupérez d'abord la forme toString() de la fonction transmise par inject :

	
	//第一步
	DI.prototype.inject = function (func) {
		func.toString();
	};

Ensuite, analyser cette String de caractère, retrouver tous les paramètres formels :

	
	//第二步
	DI.prototype.inject = function (func) {
		var args = findArgs(func.toString());
	};

Comment écrire la méthode findArgs ? Vous pouvez utiliser des expressions régulières ou la segmentation et l'interception de chaînes. J'utilise cette dernière ici.

String.prototype.trim=function(){
　　return this.replace(/(^\s*)|(\s*$)/g, "");
};

var findArgs = function(funcStr){
    var bracket1 = funcStr.indexOf("(");
    var bracket2 = funcStr.indexOf(")");
    var argsStr = funcStr.slice(bracket1+1,bracket2);
    var args = argsStr.split(",");
    return args.map(function(e){
        return e.trim();
    });
};

Après avoir trouvé tous les paramètres formels, la troisième étape consiste à trouver la fonction de module correspondante dans la table de hachage du module et à la stocker dans la liste de paramètres réelle.

realArgs fait référence à la liste des paramètres réels :

	
	//第三步
	DI.prototype.inject = function (func) {
		var args = findArgs(func.toString());
		var realArgs = [];
		for(var i=0;i<args.length;i++){
			var dep = this.dependency[args[i]];
			if(dep){
				realArgs.push(dep);
			}
		}
		//......
	};

La dernière étape est Inject , inject renvoie une fonction anonyme Lorsque la fonction anonyme est exécutée, la liste de paramètres réelle est obtenue via la fermeture et injectée dans func.

DI.prototype.inject = function (func) {
    var args = findArgs(func.toString());
    var realArgs = [];
    for(var i=0;i<args.length;i++){
        var dep = this.dependency[args[i]];
        if(dep){
            realArgs.push(dep);
        }
    }
    return function(){
        return func.apply(null,realArgs);
    };
}

De cette manière, une version simple de la fonction d'injection est complétée.
Ce qui précède est une question JavaScript intéressante : le contenu de l'injection de dépendances. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !