Dependency Injection in JavaScript

Techniken zur Inversion of Control (IoC) ermöglichen Entwicklerinnen und Entwicklern, sich von herkömmlichen Programmierabläufen zu lösen. Dadurch erhalten sie mehr Flexibilität und Kontrolle über ihren Code. Dependency Injection ist eine Form von IoC und ein Entwurfsmuster, das die Erstellung von Objekten von ihrer Verwendung trennen soll.

In diesem Artikel erfahren Sie, was Dependency Injection ist, wann Sie sie einsetzen sollten und in welchen beliebten JavaScript-Frameworks sie implementiert ist.

Was ist Dependency Injection?

Dependency Injection ist ein Software-Entwurfsmuster, bei dem ein Objekt oder eine Funktion andere Objekte oder Funktionen (Abhängigkeiten) verwendet, ohne sich um deren Implementierungsdetails kümmern zu müssen. Ein Injector, manchmal auch Assembler, Provider oder Container genannt, stellt Objekten die benötigten Abhängigkeiten bereit.

Denken Sie zum Beispiel daran, dass eine Videospielkonsole nur eine kompatible Disc oder Cartridge benötigt, um zu funktionieren. Verschiedene Discs oder Cartridges enthalten in der Regel Informationen zu unterschiedlichen Spielen. Spielerinnen und Spieler müssen nichts über die internen Abläufe der Konsole wissen und müssen zum Spielen normalerweise lediglich Spieldiscs einlegen oder austauschen.

Wenn Sie Software auf diese Weise entwerfen oder Code schreiben, lassen sich Komponenten (wie im obigen Beispiel) leicht entfernen oder ersetzen. Außerdem können Sie Unit-Tests schreiben und Boilerplate-Code in einer Codebasis reduzieren.

Dependency Injection wird häufig in anderen Sprachen wie Java, C# und Python implementiert und verwendet, ist in JavaScript jedoch seltener anzutreffen. In den folgenden Abschnitten betrachten Sie die Vor- und Nachteile dieses Musters, seine Implementierung in beliebten JavaScript-Frameworks und erfahren, wie Sie ein JavaScript-Projekt von Anfang an auf Dependency Injection ausrichten.

Warum brauchen Sie Dependency Injection?

Um vollständig zu verstehen, warum Dependency Injection hilfreich ist, sollten Sie zunächst wissen, welche Probleme IoC-Techniken lösen. Denken Sie zum Beispiel an die Videospielkonsole aus dem vorherigen Beispiel und versuchen Sie, ihre Funktionalität mit Code abzubilden. In diesem Beispiel nennen Sie Ihre Konsole NoSleepStation und gehen von Folgendem aus:

• Eine NoSleepStation-Konsole kann nur Spiele spielen, die für die NoSleepStation entwickelt wurden.

• Die einzige gültige Eingabequelle für die Konsole ist eine Compact Disc.

Mit diesen Informationen könnte die NoSleepStation-Konsole folgendermaßen implementiert werden:

1// The GameReader class
2class GameReader {
3  constructor(input) {
4    this.input = input;
5  }
6  readDisc() {
7    console.log("Now playing: ", this.input);
8  }
9}
10
11// The NoSleepStation Console class
12class NSSConsole {
13  gameReader = new GameReader("TurboCars Racer");
14
15  play() {
16    this.gameReader.readDisc();
17  }
18}
19
20// use the classes above to play 
21const nssConsole = new NSSConsole();
22nssConsole.play();

Hier befindet sich die zentrale Konsolenlogik in der Klasse GameReader, die von NSSConsole abhängig ist. Die Methode play der Konsole startet ein Spiel mithilfe einer Instanz von GameReader . Hier zeigen sich jedoch einige Probleme, darunter mangelnde Flexibilität und Schwierigkeiten beim Testen.

Flexibilität

Der zuvor gezeigte Code ist unflexibel. Möchte jemand ein anderes Spiel spielen, müsste die Klasse NSSConsole geändert werden – ähnlich wie bei einer echten Konsole, die dafür auseinandergenommen werden müsste. Der Grund: Eine zentrale Abhängigkeit, die Klasse GameReader, ist fest in die Implementierung von NSSConsole codiert.

Dependency Injection löst dieses Problem, indem Klassen von ihren Abhängigkeiten entkoppelt werden und diese nur bei Bedarf bereitgestellt werden. Im vorherigen Codebeispiel benötigt die Klasse NSSConsole lediglich die Methode readDisc() einer Instanz von GameReader.

Mit Dependency Injection lässt sich der vorherige Code folgendermaßen umschreiben:

1class GameReader {
2  constructor(input) {
3    this.input = input;
4  }
5
6  readDisc() {
7    console.log("Now playing: ", this.input);
8  }
9
10  changeDisc(input) {
11    this.input = input;
12    this.readDisc();
13  }
14}
15
16class NSSConsole {
17  constructor(gameReader) {
18    this.gameReader = gameReader;
19  }
20
21  play() {
22    this.gameReader.readDisc();
23  }
24
25  playAnotherTitle(input) {
26    this.gameReader.changeDisc(input);
27  }
28}
29
30const gameReader = new GameReader("TurboCars Racer");
31const nssConsole = new NSSConsole(gameReader);
32
33nssConsole.play();
34nssConsole.playAnotherTitle("TurboCars Racer 2");

Die wichtigste Änderung in diesem Code ist die Entkopplung der Klassen NSSConsole und GameReader . Eine Instanz von NSSConsole benötigt zwar weiterhin eine Instanz von GameReader, um zu funktionieren, muss diese aber nicht explizit selbst erstellen. Der Provider für Dependency Injection erstellt die Instanz von GameReader und übergibt sie an NSSConsole.

In einer umfangreichen Codebasis kann dies den Boilerplate-Code erheblich reduzieren, da ein Provider für Dependency Injection die Abhängigkeiten erstellt und miteinander verbindet. Sie müssen sich also nicht darum kümmern, Instanzen der Klassen zu erstellen, die eine bestimmte Klasse benötigt – insbesondere dann nicht, wenn diese Abhängigkeiten ihrerseits weitere Abhängigkeiten haben.

Testen

Einer der wichtigsten Vorteile von Dependency Injection zeigt sich bei Unit-Tests. Wenn ein externer Provider die Abhängigkeiten einer Klasse bereitstellt, können Mocks oder Stubs anstelle der nicht getesteten Objekte verwendet werden:

1// nssconsole.test.js
2const gameReaderStub = {
3  readDisc: () => {
4    console.log("Read disc");
5  },
6  changeDisc: (input) => {
7    console.log("Changed disc to: " + input);
8  },
9};
10
11const nssConsole = new NSSConsole(gameReaderStub);

Solange sich die Schnittstelle der Abhängigkeit (die verfügbaren Methoden und Eigenschaften) nicht ändert, kann beim Unit-Testen eines einfachen Objekts mit derselben Schnittstelle eine tatsächliche Instanz ersetzt werden.

Grenzen von Dependency Injection

Beachten Sie, dass Dependency Injection auch Nachteile hat. Diese hängen meist damit zusammen, wie Dependency Injection das Problem des übermäßigen Boilerplate-Codes zu lösen versucht.

Um Dependency Injection optimal zu nutzen, insbesondere in einer umfangreichen Codebasis, muss ein Provider für Dependency Injection eingerichtet werden. Das kann viel Arbeit verursachen und ist bei einfachen Projekten manchmal unnötiger Aufwand.

Dieses Problem lässt sich durch eine Dependency-Injection-Bibliothek oder ein Framework lösen. Die Nutzung eines Dependency-Injection-Frameworks erfordert jedoch in den meisten Fällen eine umfassende Festlegung darauf, da sich die APIs verschiedener Dependency-Injection-Frameworks bei der Konfiguration kaum ähneln.

Dependency Injection in beliebten JavaScript-Frameworks

Dependency Injection ist eine zentrale Funktion vieler beliebter JavaScript-Frameworks, insbesondere Angular(), NestJS und Vue.js.

Angular

Angular ist ein clientseitiges Webentwicklungs-Framework mit allen Tools, die Sie zum Erstellen, Testen und Warten von Webanwendungen benötigen. Dependency Injection ist in das Framework integriert. Eine Konfiguration ist daher nicht erforderlich, und diese Vorgehensweise wird für die Entwicklung mit Angular empfohlen.

Im Folgenden sehen Sie ein Codebeispiel dafür, wie Dependency Injection in Angular funktioniert (aus der Angular-Dokumentation):

1// logger.service.ts
2import { Injectable } from '@angular/core';
3
4@Injectable({providedIn: 'root'})
5export class Logger {
6  writeCount(count: number) {
7    console.warn(count);
8  }
9}
10
11// hello-world-di.component.ts
12import { Component } from '@angular/core';
13import { Logger } from '../logger.service';
14
15@Component({
16  selector: 'hello-world-di',
17  templateUrl: './hello-world-di.component.html'
18})
19export class HelloWorldDependencyInjectionComponent  {
20  count = 0;
21
22  constructor(private logger: Logger) { }
23
24  onLogMe() {
25    this.logger.writeCount(this.count);
26    this.count++;
27  }
28}

In Angular zeigt der Decorator @Injectable an einer Klasse an, dass diese Klasse injiziert werden kann. Eine injizierbare Klasse kann Abhängigkeiten auf drei Arten zur Verfügung gestellt werden:

• Auf Komponenten-Ebene über das Feld providers des Decorators @Component

• Auf NgModule-Ebene über das Feld providers des Decorators @NgModule

• Auf Ebene des Anwendungsstamms, indem Sie einem Decorator @Injectable die Angabe providedIn: 'root' hinzufügen (wie zuvor gezeigt)

Um in Angular eine Abhängigkeit zu injizieren, deklarieren Sie diese einfach im Konstruktor einer Klasse. Die folgende Zeile aus dem vorherigen Codebeispiel zeigt, wie das funktioniert:

1constructor(private logger: Logger) // Angular injects an instance of the LoggerService class

NestJS

NestJS ist ein JavaScript-Framework mit einer Architektur, die sich für die Entwicklung hochleistungsfähiger, zuverlässiger und skalierbarer Backend-Anwendungen eignet. Da sich NestJS beim Design stark an Angular orientiert, funktioniert Dependency Injection in NestJS sehr ähnlich:

1// logger.service.ts
2import { Injectable } from '@nestjs/common';
3
4@Injectable()
5export class Logger {
6  writeCount(count: number) {
7    console.warn(count);
8  }
9}
10
11// hello-world-di.component.ts
12import { Controller } from '@nestjs/common';
13import { Logger } from '../logger.service';
14
15@Controller('')
16export class HelloWorldDependencyInjectionController  {
17  count = 0;
18
19  constructor(private logger: Logger) { }
20
21  onLogMe() {
22    this.logger.writeCount(this.count);
23    this.count++;
24  }
25}

Beachten Sie, dass Abhängigkeiten in NestJS und Angular üblicherweise als Singletons behandelt werden. Das bedeutet: Sobald eine Abhängigkeit gefunden wurde, wird ihr Wert zwischengespeichert und während des gesamten Anwendungslebenszyklus wiederverwendet. Um dieses Verhalten in NestJS zu ändern, konfigurieren Sie die Eigenschaft `scope` in den Optionen des Decorators @Injectable. In Angular konfigurieren Sie die Eigenschaft `providedIn` in den Optionen des Decorators @Injectable.

Vue.js

Vue.js ist ein deklaratives und komponentenbasiertes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Dependency Injection lässt sich in Vue.js beim Erstellen einer Komponente mit den Optionen `provide` und `inject` konfigurieren.

Um festzulegen, welche Daten den Nachkommen einer Komponente zur Verfügung stehen sollen, verwenden Sie die Option provide:

1export default {
2provide: {
3message: 'hello!',
4}
5}

Anschließend können diese Abhängigkeiten mit der Option inject in den Komponenten injiziert werden, die sie benötigen:

1export default {
2  inject: ['message'],
3  created() {
4    console.log(this.message) // injected value
5  }
6}

Um eine Abhängigkeit auf Anwendungsebene bereitzustellen, ähnlich wie bei providedIn: 'root' in Angular, verwenden Sie die Methode provide der Vue.js-App-Instanz:

1import { createApp } from 'vue'
2
3const app = createApp({})
4
5app.provide(/* key */ 'message', /* value */ 'hello!')

JavaScript-Frameworks für Dependency Injection

Bisher haben Sie Dependency Injection im Kontext eines JavaScript-Frameworks betrachtet. Was aber, wenn jemand ein Projekt ohne eines der genannten Frameworks starten und keinen Dependency-Injection-Container oder -Resolver von Grund auf selbst implementieren möchte?

Für diesen Anwendungsfall gibt es einige Bibliotheken, die Dependency-Injection-Funktionen bereitstellen, darunter injection-js, InversifyJS und TSyringe. Im folgenden Abschnitt konzentrieren Sie sich auf InversifyJS. Es kann sich jedoch lohnen, auch die anderen Pakete anzusehen, um herauszufinden, welches am besten zu Ihren Anforderungen passt.

InversifyJS

InversifyJS ist ein Dependency-Injection-Container für JavaScript. Er wurde so entwickelt, dass er den Laufzeitaufwand möglichst gering hält und zugleich gute objektorientierte Programmierung (OOP) sowie IoC-Praktiken fördert und unterstützt. Das Repository des Projekts finden Sie auf GitHub.

Um InversifyJS in einem Projekt zu verwenden, müssen Sie es zu den Abhängigkeiten des Projekts hinzufügen. Hier richten Sie InversifyJS mit dem im Artikel verwendeten Gaming-Beispiel ein. Erstellen Sie zunächst mit npm init ein neues Projekt. Öffnen Sie ein Terminal und führen Sie die folgenden Befehle der Reihe nach aus:

1mkdir inversify-di
2cd inversify-di
3npm init

Fügen Sie anschließend inversify mithilfe von npm oder Yarn zu den Projektabhängigkeiten hinzu:

1# Using npm
2npm install inversify reflect-metadata
3
4# or if you use yarn: 
5# yarn add inversify reflect-metadata

InversifyJS verwendet die Metadata Reflection API. Daher müssen Sie das Paket reflect-metadata als Polyfill installieren und verwenden.

Fügen Sie als Nächstes den Code für die Klassen NSSConsole und GameReader hinzu, indem Sie zunächst zwei leere Dateien erstellen:

1touch game-reader.mjs nssconsole.mjs

Fügen Sie anschließend den folgenden Code in die jeweilige Datei ein:

1// game-reader.mjs
2export default class GameReader {
3  constructor(input = "TurboCars Racer") {
4    this.input = input;
5  }
6
7  readDisc() {
8    console.log("Now playing: ", this.input);
9  }
10
11  changeDisc(input) {
12    this.input = input;
13    this.readDisc();
14  }
15}

1// nssconsole.mjs
2export default class NSSConsole {
3  constructor(gameReader) {
4    this.gameReader = gameReader;
5  }
6
7  play() {
8    this.gameReader.readDisc();
9  }
10
11  playAnotherTitle(input) {
12    this.gameReader.changeDisc(input);
13  }
14}

Konfigurieren Sie abschließend das Projekt für die Verwendung von InversifyJS:

1touch config.mjs index.mjs

1// config.mjs
2import { decorate, injectable, inject, Container } from "inversify";
3import GameReader from "./game-reader.mjs";
4import NSSConsole from "./nssconsole.mjs";
5
6// Declare our dependencies' type identifiers
7export const TYPES = {
8  GameReader: "GameReader",
9  NSSConsole: "NSSConsole",
10};
11
12// Declare injectables
13decorate(injectable(), GameReader);
14decorate(injectable(), NSSConsole);
15
16// Declare the GameReader class as the first dependency of NSSConsole
17decorate(inject(TYPES.GameReader), NSSConsole, 0);
18
19// Declare bindings
20const container = new Container();
21container.bind(TYPES.NSSConsole).to(NSSConsole);
22container.bind(TYPES.GameReader).to(GameReader);
23
24export { container };

1// index.mjs
2// Import reflect-metadata as a polyfill
3import "reflect-metadata";
4import { container, TYPES } from "./config.mjs";
5
6// Resolve dependencies
7// Notice how we do not need to explicitly declare a GameReader instance anymore
8const myConsole = container.get(TYPES.NSSConsole);
9
10myConsole.play();
11myConsole.playAnotherTitle("Some other game");

Sie können die neue Einrichtung testen, indem Sie im Stammverzeichnis des Projekts node index.mjs ausführen.

Dieses einfache Beispiel eignet sich als guter Ausgangspunkt für die meisten Projekte, die InversifyJS verwenden möchten.

Fazit

In diesem Artikel haben Sie Dependency Injection in JavaScript, ihre Vor- und Nachteile, Beispiele aus beliebten JavaScript-Frameworks und ihre Verwendung in einem JavaScript-Projekt ohne Framework kennengelernt.