Detaillierte Erläuterung der Abhängigkeitsinjektion in JavaScript_Javascript-Kenntnissen

Die Welt der Computerprogrammierung ist eigentlich ein Prozess, bei dem einfache Teile ständig abstrahiert und diese Abstraktionen organisiert werden. JavaScript ist keine Ausnahme. Wenn wir JavaScript zum Schreiben von Anwendungen verwenden, verwenden wir alle Code, der von anderen geschrieben wurde, beispielsweise von einigen berühmten Open-Source-Bibliotheken oder Frameworks. Da unser Projekt wächst, werden immer mehr Module, auf die wir uns verlassen müssen, immer wichtiger. Derzeit ist die effektive Organisation dieser Module zu einem sehr wichtigen Thema geworden. Die Abhängigkeitsinjektion löst das Problem, wie codeabhängige Module effektiv organisiert werden können. Möglicherweise haben Sie in einigen Frameworks oder Bibliotheken den Begriff „Abhängigkeitsinjektion“ gehört, beispielsweise im berühmten Front-End-Framework AngularJS. Die Abhängigkeitsinjektion ist eine der sehr wichtigen Funktionen. Allerdings ist die Abhängigkeitsinjektion überhaupt nichts Neues. In anderen Programmiersprachen wie PHP gibt es sie schon seit langem. Gleichzeitig ist die Abhängigkeitsinjektion nicht so kompliziert wie gedacht. In diesem Artikel lernen wir das Konzept der Abhängigkeitsinjektion in JavaScript kennen und erklären auf einfache und unkomplizierte Weise, wie man Code im „Abhängigkeitsinjektionsstil“ schreibt.

Zielsetzung

Angenommen, wir haben jetzt zwei Module. Das erste Modul dient zum Senden von Ajax-Anfragen, während das zweite Modul als Router dient.

Code kopieren Der Code lautet wie folgt:

var service = function() {
Geben Sie { name: 'Service' };
zurück }
var router = function() {
Geben Sie { name: 'Router' };
zurück }

Zu diesem Zeitpunkt haben wir eine Funktion geschrieben, die die Verwendung der beiden oben genannten Module erfordert:

Code kopieren Der Code lautet wie folgt:

var doSomething = function(other) {
var s = service();
var r = router();
};

Um unseren Code interessanter zu machen, muss dieser Parameter hier einige weitere Parameter erhalten. Natürlich können wir den obigen Code vollständig verwenden, aber der obige Code ist in jeder Hinsicht etwas weniger flexibel. Was passiert, wenn sich der Name des Moduls, das wir verwenden müssen, in ServiceXML oder ServiceJSON ändert? Oder was wäre, wenn wir einige gefälschte Module zu Testzwecken verwenden möchten? An dieser Stelle können wir nicht einfach die Funktion selbst bearbeiten. Als erstes müssen wir also das abhängige Modul als Parameter an die Funktion übergeben. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var doSomething = function(service, router, other) {
var s = service();
var r = router();
};

Im obigen Code übergeben wir genau die Module, die wir benötigen. Aber das wirft ein neues Problem auf. Angenommen, wir rufen die Methode doSomething in beiden Teilen des Codes auf. Was ist, wenn wir an diesem Punkt eine dritte Abhängigkeit benötigen? Zu diesem Zeitpunkt ist es keine kluge Idee, den gesamten Funktionsaufrufcode zu bearbeiten. Daher benötigen wir einen Code, der uns dabei hilft. Dies ist das Problem, das der Abhängigkeitsinjektor zu lösen versucht. Jetzt können wir unsere Ziele festlegen:

1. Wir sollten in der Lage sein, Abhängigkeiten zu registrieren
2. Der Abhängigkeitsinjektor sollte eine Funktion empfangen und dann eine Funktion zurückgeben, die die erforderlichen Ressourcen erhalten kann
3. Der Code sollte nicht kompliziert, aber einfach und benutzerfreundlich sein
4. Der Abhängigkeitsinjektor sollte den übergebenen Funktionsumfang beibehalten
5. Die übergebene Funktion sollte in der Lage sein, benutzerdefinierte Parameter zu empfangen, nicht nur die beschriebenen Abhängigkeiten

requirejs/AMD-Methode

Vielleicht haben Sie von den berühmten requirejs gehört, einer Bibliothek, die Abhängigkeitsinjektionsprobleme sehr gut lösen kann:

Code kopieren Der Code lautet wie folgt:

define(['service', 'router'], function(service, router) { 
// ...
});

Die Idee von „requirejs“ besteht darin, dass wir zunächst die erforderlichen Module beschreiben und dann unsere eigenen Funktionen schreiben. Dabei ist die Reihenfolge der Parameter wichtig. Angenommen, wir müssen ein Modul namens Injector schreiben, das eine ähnliche Syntax implementieren kann.

Code kopieren Der Code lautet wie folgt:

var doSomething = injektor.resolve(['service', 'router'], function(service, router, other) {
Expect(service().name).to.be('Service');
Expect(router().name).to.be('Router');
Expect(other).to.be('Other');
});
doSomething("Other");

Bevor wir fortfahren, muss noch erklärt werden, dass wir im Funktionskörper von doSomething die Assertionsbibliothek „expect.js“ verwenden, um die Korrektheit des Codes sicherzustellen. Hier gibt es etwas Ähnliches wie die Idee von TDD (Test Driven Development).

Jetzt beginnen wir offiziell mit dem Schreiben unseres Injektormoduls. Erstens sollte es ein Monolith sein, damit es in jedem Teil unserer Anwendung die gleiche Funktionalität bietet.

Code kopieren Der Code lautet wie folgt:

var-Injektor = {
Abhängigkeiten: {},
Registrieren: Funktion(Schlüssel, Wert) {
This.dependencies[key] = value;
},
Auflösen: function(deps, func, Scope) {

}
}

Dieses Objekt ist sehr einfach und enthält nur zwei Funktionen und eine Variable für Speicherzwecke. Was wir tun müssen, ist das deps-Array zu überprüfen und dann in der Abhängigkeitsvariablen nach der Antwort zu suchen. Der verbleibende Teil besteht darin, die .apply-Methode zu verwenden, um die von uns übergebene Funktionsvariable aufzurufen:

Code kopieren Der Code lautet wie folgt:

auflösen: function(deps, func, Scope) {
var args = [];
for(var i=0; i            if(this.dependencies[d]) {
               args.push(this.dependencies[d]);
         } sonst {
                throw new Error('Can'tsolve' d);
}
}
Rückgabefunktion() {
           func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
                                            }

Wenn Sie einen Bereich angeben müssen, kann der obige Code auch normal ausgeführt werden.

Im obigen Code besteht die Funktion von Array.prototype.slice.call(arguments, 0) darin, die Variable arguments in ein echtes Array umzuwandeln. Bisher hat unser Code den Test perfekt bestanden. Das Problem hierbei ist jedoch, dass wir die erforderlichen Module zweimal schreiben müssen und sie nicht in beliebiger Reihenfolge anordnen können. Nach allen Abhängigkeiten stehen immer zusätzliche Parameter.

Reflexionsmethode

Laut der Erklärung in Wikipedia bedeutet Reflexion, dass ein Objekt seine eigene Struktur und sein eigenes Verhalten ändern kann, während das Programm ausgeführt wird. In JavaScript handelt es sich vereinfacht gesagt um die Fähigkeit, den Quellcode eines Objekts zu lesen und den Quellcode zu analysieren. Zurück zu unserer doSomething-Methode: Wenn Sie die doSomething.toString()-Methode aufrufen, können Sie die folgende Zeichenfolge erhalten:

Code kopieren Der Code lautet wie folgt:

"Funktion (Dienst, Router, Sonstiges) {
var s = service();
var r = router();
}"

Auf diese Weise können wir, solange wir diese Methode verwenden, leicht die gewünschten Parameter und, was noch wichtiger ist, ihre Namen erhalten. Dies ist auch die Methode, die AngularJS zur Implementierung der Abhängigkeitsinjektion verwendet. Im AngularJS-Code können wir den folgenden regulären Ausdruck sehen:

Code kopieren Der Code lautet wie folgt:

/^functions*[^(]*(s*([^)]*))/m


Wir können die Auflösungsmethode in den unten gezeigten Code ändern:

Code kopieren Der Code lautet wie folgt:

auflösen: function() {
var func, deps, Scope, args = [], self = this;
func = arguments[0];
deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(' ,');
Scope = Argumente[1] ||. {};
Rückgabefunktion() {
      var a = Array.prototype.slice.call(arguments, 0);
for(var i=0; i             var d = deps[i];
                 args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
}
           func.apply(scope || {}, args);
                                            }

Wir verwenden den obigen regulären Ausdruck, um die von uns definierte Funktion abzugleichen, und können die folgenden Ergebnisse erhalten:

Code kopieren Der Code lautet wie folgt:

["Funktion (Dienst, Router, andere)", "Dienst, Router, andere"]

An dieser Stelle benötigen wir nur den zweiten Punkt. Aber sobald wir die zusätzlichen Leerzeichen entfernen und die Zeichenfolge durch teilen, erhalten wir das deps-Array. Der folgende Code ist der Teil, den wir geändert haben:

Code kopieren Der Code lautet wie folgt:

var a = Array.prototype.slice.call(arguments, 0);
...
args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

Im obigen Code durchlaufen wir die abhängigen Projekte. Wenn in den abhängigen Projekten Teile fehlen, erhalten wir diese aus dem Argumentobjekt. Wenn ein Array leer ist, gibt die Verwendung der Shift-Methode einfach undefiniert zurück, ohne einen Fehler auszulösen. Bisher sieht die neue Version des Injektors so aus:

Code kopieren Der Code lautet wie folgt:

var doSomething = injektor.resolve(function(service, other, router) {
Expect(service().name).to.be('Service');
Expect(router().name).to.be('Router');
Expect(other).to.be('Other');
});
doSomething("Other");

Im obigen Code können wir die Reihenfolge der Abhängigkeiten frei ändern.

Aber nichts ist perfekt. Es gibt ein sehr ernstes Problem bei der Abhängigkeitsinjektion reflektierender Methoden. Wenn Code vereinfacht wird, treten Fehler auf. Dies liegt daran, dass sich während des Codevereinfachungsprozesses die Namen der Parameter geändert haben, was dazu führen würde, dass die Abhängigkeiten nicht aufgelöst werden können. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var doSomething=function(e,t,n){var r=e();var i=t()}

Wir benötigen also, genau wie in AngularJS, folgende Lösung:

Code kopieren Der Code lautet wie folgt:

var doSomething = injektor.resolve(['service', 'router', function(service, router) {
}]);

Dies ist der AMD-Lösung, die wir am Anfang gesehen haben, sehr ähnlich, sodass wir die beiden oben genannten Methoden integrieren können. Der endgültige Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var-Injektor = {
    Abhängigkeiten: {},
    registrieren: Funktion(Schlüssel, Wert) {
        this.dependencies[key] = value;
    },
    auflösen: function() {
        var func, deps, Scope, args = [], self = this;
        if(typeof arguments[0] === 'string') {
            func = arguments[1];
            deps = arguments[0].replace(/ /g, '').split(',');
            Geltungsbereich = Argumente[2] || {};
        } sonst {
            func = arguments[0];
            deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(' ,');
            Geltungsbereich = Argumente[1] || {};
        }
        return function() {
            var a = Array.prototype.slice.call(arguments, 0);
            for(var i=0; i                 var d = deps[i];
                args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());
            }
            func.apply(scope || {}, args);
        }       
    }
}

这一个版本的resolve方法可以接受两个或者三个参数.下面是一段测试代码:

复制代码 代码如下:

var doSomething = injektor.resolve('router,,service', function(a, b, c) {
    erwarten(a().name).to.be('Router');
    erwarten(b).to.be('Andere');
    erwarten(c().name).to.be('Service');
});
doSomething("Other");

你可能注意到了两个逗号之间什么都没有，这并不是错误.这个空缺是留给Andere这个参数的.这就是我们控制参数顺序的方法.

结语

在上面的内容中, 我们介绍了几种JavaScript中依赖注入的方法, 希望本文能够帮助你开始使用依赖注入这个技巧，并且写出依赖注入风格的代码.