Lustige Fragen zu JavaScript: Abhängigkeitsinjektion

Sie haben sicher schon vom Dependency Injection (DI)-Muster gehört, oder?

Ob es sich um das beliebte Back-End-Framework Spring oder den Front-End-Trend angular.js handelt, die Abhängigkeitsinjektion ist überall zu sehen.

Der Begriff ist etwas unklar, aber die Kernidee ist sehr einfach.

Um ein gängiges Sprichwort zu verwenden: „Wer Wind will, bekommt Wind, wer Regen will, bekommt Regen“ , oder mit anderen Worten „Wenn du Wind willst Essen, du öffnest deinen Mund, und wenn du Kleidung hast, streckt du deine Hände aus“ .

Vielleicht sind Sie immer noch etwas verwirrt, nachdem Sie meine Erklärung gehört haben.

Hier sind einige Module, sie werden auch "Abhängigkeiten" genannt und in einem Hash-Objekt gespeichert:

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

Das Folgende ist ein Abhängigkeitsinjektionsmanager, der zu gegebener Zeit neu sein wird:

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

in neu, Übergeben Sie deps als Parameter.

Okay, jetzt kommt der Kern des Problems, was wir schreiben müssen:

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

Diese Injektionsmethode ist an den Prototyp von gebunden DI erhält eine Funktion als Parameter.

Wie benutzt man es dann?

	var di = new DI(deps);

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

	myDependentFunc();

Schauen wir uns zunächst die von inject übergebene anonyme Funktion an. Sie stellt die Anforderung dar und ist dort, wo wir injizieren müssen.

Werfen wir zunächst einen Blick auf die formalen Parameter

secondDepency, firstDependency

Hier gibt es zwei Parameter, die zwei Anforderungen darstellen. Wenn die Zeit gekommen ist, werden wir diese beiden Parameter analysieren und einen Zusammenhang finden Module.

Okay, zurück zum Schreiben der Injektionsfunktion, was sollen wir im ersten Schritt tun?

Erhalten Sie zuerst die toString()-Form der von inject übergebenen Funktion:

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

Dann Analysieren Sie diese Zeichenfolge und finden Sie alle formalen Parameter:

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

Wie schreibe ich die findArgs-Methode? Sie können reguläre Ausdrücke oder String-Segmentierung und -Abfangen verwenden. Letzteres verwende ich hier.

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

Nachdem alle formalen Parameter gefunden wurden, besteht der dritte Schritt darin, die entsprechende Modulfunktion aus der Modul-Hash-Tabelle zu finden und in der tatsächlichen Parameterliste zu speichern.

realArgs bezieht sich auf tatsächliche Parameterliste:

	
	//第三步
	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);
			}
		}
		//......
	};

Der letzte Schritt ist Inject , inject gibt eine anonyme Funktion zurück. Wenn die anonyme Funktion ausgeführt wird, wird die eigentliche Parameterliste durch den -Abschluss abgerufen und in func eingefügt.

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

Auf diese Weise wird eine einfache Version der Injektionsfunktion vervollständigt.
Das Obige ist eine interessante JavaScript-Frage: Der Inhalt der Abhängigkeitsinjektion. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).