Detaillierte Analyse des Beispielcodes für die Abhängigkeitsinjektion in JavaScript

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 Codes, die von anderen geschrieben wurden, beispielsweise einige berühmte 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. Abhängigkeitsinjektion löst das Problem, wie codeabhängige Module effektiv organisiert werden können. Möglicherweise haben Sie den Begriff „Abhängigkeitsinjektion“ in einigen Frameworks oder Bibliotheken gehört, beispielsweise im berühmten Front-End-FrameworkAngularJS, wo die Abhängigkeitsinjektion eine der sehr wichtigen Funktionen ist. 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 wird zum Senden von Ajax-Anfragen verwendet, während das zweite Modul als Router verwendet wird.

var service = function() {
    return { name: 'Service' };
}
var router = function() {
    return { name: 'Router' };
}

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

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

Hier, für uns Der Code wird etwas interessanter, dieser Parameter muss noch ein paar Parameter erhalten. Natürlich können wir den obigen Code vollständig verwenden, aber der obige Code ist in jeder Hinsicht etwas weniger flexibel. Wenn der Modulname, den wir verwenden müssen, zu Service<a href="http://www.php.cn/wiki/1527.html" target="_blank">XML<code>Service<a href="http://www.php.cn/wiki/1527.html" target="_blank">XML</a> oder < wird code>DienstJSONService<a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON</a>Was soll ich tun? 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 die abhängigen Module als Parameter an die Funktion übergeben. 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:

• Wir sollten in der Lage sein, Abhängigkeiten zu registrieren

• Der Abhängigkeitsinjektor sollte eine Funktion empfangen und dann eine Funktion zurückgeben das kann die erforderlichen Ressourcen erhalten

• Der Code sollte nicht kompliziert, sondern einfach und benutzerfreundlich sein

• Der Abhängigkeitsinjektor sollte transitiv bleiben Funktionsumfang

• Die übergebene Funktion sollte in der Lage sein, benutzerdefinierte Parameter zu empfangen, nicht nur die beschriebenen Abhängigkeiten

erfordernjs/AMD-Methode

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

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

Die Idee von Requirejs ist dass wir zuerst die erforderlichen Module beschreiben und dann Ihre eigenen Funktionen schreiben sollten. Dabei ist die Reihenfolge der Parameter wichtig. Angenommen, wir müssen ein Modul namens injector schreiben, das eine ähnliche Syntax implementiert.

var doSomething = injector.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 Richtigkeit des Codes sicherzustellen. Hier gibt es etwas Ähnliches wie die Idee von TDD (testdriven development).

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

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {

    }
}

这个对象非常的简单，其中只包含两个函数以及一个用于存储目的的变量。我们需要做的事情是检查deps数组，然后在dependencies变量种寻找答案。剩余的部分，则是使用.apply方法去调用我们传递的func变量：

resolve: function(deps, func, scope) {
    var args = [];
    for(var i=0; i<deps.length, d=deps[i]; i++) {
        if(this.dependencies[d]) {
            args.push(this.dependencies[d]);
        } else {
            throw new Error(&#39;Can\&#39;t resolve &#39; + d);
        }
    }
    return function() {
        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
    }        
}

如果你需要指定一个作用域，上面的代码也能够正常的运行。

在上面的代码中，Array.prototype.slice.call(arguments, 0)的作用是将arguments变量转换为一个真正的数组。到目前为止，我们的代码可以完美的通过测试。但是这里的问题是我们必须要将需要的模块写两次，而且不能够随意排列顺序。额外的参数总是排在所有的依赖项之后。

反射(reflection)方法

根据维基百科中的解释，反射(reflection)指的是程序可以在运行过程中，一个对象可以修改自己的结构和行为。在JavaScript中，简单来说就是阅读一个对象的源码并且分析源码的能力。还是回到我们的doSomething方法，如果你调用doSomething.to<a href="http://www.php.cn/wiki/57.html" target="_blank">String</a>()方法，你可以获得下面的字符串:

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

这样一来，只要使用这个方法，我们就可以轻松的获取到我们想要的参数，以及更重要的一点就是他们的名字。这也是AngularJS实现依赖注入所使用的方法。在AngularJS的代码中，我们可以看到下面的正则表达式：

/^function\s*[^\(]*\(\s*([^\)]*)\)/m

我们可以将resolve方法修改成如下所示的代码：

resolve: function() {
    var func, deps, scope, args = [], self = this;
    func = arguments[0];
    deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
    scope = arguments[1] || {};
    return function() {
        var a = Array.prototype.slice.call(arguments, 0);
        for(var i=0; i<deps.length; i++) {
            var d = deps[i];
            args.push(self.dependencies[d] && d != &#39;&#39; ? self.dependencies[d] : a.shift());
        }
        func.apply(scope || {}, args);
    }        
}

我们使用上面的正则表达式去匹配我们定义的函数，我们可以获取到下面的结果：

["function (service, router, other)", "service, router, other"]

此时，我们只需要第二项。但是一旦我们去除了多余的空格并以,来切分字符串以后，我们就得到了deps数组。下面的代码就是我们进行修改的部分：

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

在上面的代码中，我们遍历了依赖项目，如果其中有缺失的项目，如果依赖项目中有缺失的部分，我们就从arguments对象中获取。如果一个数组是空数组，那么使用shift方法将只会返回undefined，而不会抛出一个错误。到目前为止，新版本的injector看起来如下所示：

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

在上面的代码中，我们可以随意混淆依赖项的顺序。

但是，没有什么是完美的。反射方法的依赖注入存在一个非常严重的问题。当代码简化时，会发生错误。这是因为在代码简化的过程中，参数的名称发生了变化，这将导致依赖项无法解析。例如：

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

因此我们需要下面的解决方案，就像AngularJS中那样：

var doSomething = injector.resolve(['service', 'router', function(service, router) {

}]);

这和最一开始看到的AMD的解决方案很类似，于是我们可以将上面两种方法整合起来，最终代码如下所示：

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function() {
        var func, deps, scope, args = [], self = this;
        if(typeof arguments[0] === 'string') {
            func = arguments[1];
            deps = arguments[0].replace(/ /g, '').split(',');
            scope = arguments[2] || {};
        } else {
            func = arguments[0];
            deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
            scope = arguments[1] || {};
        }
        return function() {
            var a = Array.prototype.slice.call(arguments, 0);
            for(var i=0; i<deps.length; i++) {
                var d = deps[i];
                args.push(self.dependencies[d] && d != &#39;&#39; ? self.dependencies[d] : a.shift());
            }
            func.apply(scope || {}, args);
        }        
    }
}

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

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

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

结语

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

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des Beispielcodes für die Abhängigkeitsinjektion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!