JavaScript Injection De Dépendance

Vous pouvez utiliser AngularJS comme un exemple. Si c'est une bonne chose, vous aurez à décider pour vous-même. J'ai écrit il y a une semaine une
article sur demistifying l'injection de dépendance dans AngularJS. Ici, vous pouvez lire le code de l'article:

//The following simplified code is partly taken from the AngularJS source code:
//https://github.com/angular/angular.js/blob/master/src/auto/injector.js#L63
function inject(fn, variablesToInject) {
var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
var FN_ARG_SPLIT = /,/;
var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/;
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
if (typeof fn === 'function' && fn.length) {
var fnText = fn.toString(); //getting the source code of the function
fnText = fnText.replace(STRIP_COMMENTS, ''); //stripping comments like function(/*string*/a) {}
var matches = fnText.match(FN_ARGS); //finding arguments
var argNames = matches[1].split(FN_ARG_SPLIT); //finding each argument name
var newArgs = [];
for (var i = 0, l = argNames.length; i < l; i++) {
var argName = argNames[i].trim();
if (!variablesToInject.hasOwnProperty(argName)) {
//the argument cannot be injected
throw new Error("Unknown argument: '" + argName + "'. This cannot be injected.");
}
newArgs.push(variablesToInject[argName]);
}
fn.apply(window, newArgs);
}
}
function sum(x, y) {
console.log(x + y);
}
inject(sum, {
x: 5,
y: 6
}); //should print 11
inject(sum, {
x: 13,
y: 45
}); //should print 58
inject(sum, {
x: 33,
z: 1 //we are missing 'y'
}); //should throw an error: Unknown argument: 'y'. This cannot be injected.

Nous allons apprendre à faire un super simple l'exemple du monde réel 🙂

L'exemple de la classe, je vais vous parler ici est un Printer
qui a besoin d'un driver d'imprimer quelque chose. Je l'ai démontré
les avantages de l'injection de dépendance modèle de conception en 4
les étapes pour arriver à la meilleure solution à la fin.

Décision1: pas de l'injection de dépendances utilisés:

class Printer {
constructor () {
this.lcd = '';
}
/* umm! Not so flexible! */
print (text) {
this.lcd = 'printing...';
console.log (`This printer prints ${text}!`);
}
}
//Usage:
var printer = new Printer ();
printer.print ('hello');

l'utilisation est simple, il est facile de faire une nouvelle imprimante de cette façon mais cette imprimante n'est pas flexible.

Case2: résumé les fonctionnalités à l'intérieur de la print méthode dans une nouvelle classe appelée Driver:

class Printer {
constructor () {
this.lcd = '';
this.driver = new Driver ();
}
print (text) {
this.lcd = 'printing...';
this.driver.driverPrint (text);
}
}
class Driver {
driverPrint (text) {
console.log (`I will print the ${text}`);
}
}
//Usage:
var printer = new Printer ();
printer.print ('hello');

Donc notre classe d'Imprimante est maintenant plus modulaire, propre et facile de undrestand mais Il n'est pas souple, mais encore. Chaque fois que vous utilisez new mot-clé vous sont effectivement de codage en dur quelque chose; dans ce cas, vous êtes la construction de un conducteur à l'intérieur de votre Imprimante dans le monde réel est un exemple d'une imprimante qui est livré avec un pilote qui ne peuvent jamais changer!

Case3: Injecter déjà fait le pilote de votre imprimante

Une meilleure version est d'injecter un pilote au moment où nous construisons une imprimante
ce qui signifie que vous pouvez faire n'importe quel type d'imprimante, couleur ou noir&blanc, parce que c'
fois que le pilote est en train d'être fait dans l'isolement et à l'extérieur de la classe d'Imprimante, puis
compte tenu de (INJECTÉE!) dans le Printer...

class Printer {
constructor (driver) {
this.lcd = '';
this.driver = driver;
}
print (text) {
this.lcd = 'printing...';
this.driver.driverPrint (text);
}
}
class BWDriver {
driverPrint (text) {
console.log (`I will print the ${text} in Black and White.`);
}
}
class ColorDriver {
driverPrint (text) {
console.log (`I will print the ${text} in color.`);
}
}
//Usage:
var bwDriver = new BWDriver ();
var printer = new Printer (bwDriver);
printer.print ('hello'); //I will print the hello in Black and White.

utilisation est maintenant différente, comme un utilisateur, afin de disposer d'une imprimante, vous devez d'abord
construire (faire) un pilote (de votre choix!) et puis passer à ce pilote de votre Imprimante. Il peut sembler que l'utilisateur final doit maintenant d'en savoir un peu plus sur le système, cependant, cette structure donne plus de felexibility. Les utilisateurs peuvent passer d'un pilote, aussi longtemps que valable! par exemple, disons que nous avons un BWDriver (noir & blanc) type de pilote; l'utilisateur peut créer un nouveau pilote de ce type et l'utiliser pour faire une nouvelle Imprimante qui imprime en noir et blanc.

So far So good! Mais ce que vous pensez que nous pouvons faire mieux et ce que vous en pensez a encore un peu de place à l'adresse ici?! Je suis sûr que vous pouvez le voir aussi!

La création d'une nouvelle imprimante chaque fois nous avons besoin de notre imprimante pour imprimer avec
un autre pilote! C'est parce que nous passons notre moteur de choix pour
la classe d'Imprimante au moment de la construction; si l'utilisateur veut utiliser un autre pilote dont ils ont besoin pour créer une nouvelle Imprimante avec le pilote; par exemple, si maintenant je veux faire une impression couleur que je dois faire:

var cDriver = new ColorDriver ();
var printer = new Printer (cDriver); //Yes! This line here is the problem!
printer.print ('hello'); //I will print the hello in color.

Case4: Fournir un setter pour définir le pilote de votre imprimante à TOUT MOMENT!

class Printer {
constructor () {
this.lcd = '';
}
setDriver (driver) {
this.driver = driver;
}
print (text) {
this.lcd = 'printing...';
this.driver.driverPrint (text);
}
}
class BWDriver {
driverPrint (text) {
console.log (`I will print the ${text} in Black and White.`);
}
}
class ColorDriver {
driverPrint (text) {
console.log (`I will print the ${text} in color.`);
}
}
//Usage:
var bwDriver = new BWDriver ();
var cDriver = new ColorDriver ();
var printer = new Printer (); //I am happy to see this line only ONCE!
printer.setDriver (bwDriver);
printer.print ('hello'); //I will print the hello in Black and White.
printer.setDriver (cDriver);
printer.print ('hello'); //I will print the hello in color.

L'Injection de dépendance n'est pas vraiment un concept difficile à comprendre. Le terme peut être un peu surchargé, mais une fois que vous avez réalisé son but, vous trouverez vous-même en utilisant la plupart du temps.

Prendre un butin à la Moucheture: https://gist.github.com/elfet/11349215

var c = new Flyspeck();
c.set('name', 'GistHub');
c.set('config', {
server: 'https://gist.github.com'
});
c.set('user', function (c) {
return new User(c.get('name'));
});
c.extend('user', function (user, c) {
return new ProxyUser(user);
});
c.set('app', function (c) {
return new Application(c.get('config'), c.get('user'));
});
var app = c.get('app');

candiJS est un léger implicite de l'injection de dépendance et la création d'un objet de la bibliothèque. Avoir un coup d'oeil

Exemple:

candi.provider.singleton('ajax', function() {
return {
get: function() { /* some code */ },
put: function() { /* some code */ }
};
});
candi.provider.singleton('carService', function(ajax) {
return {
getSpecs: function(manufacturer, year, model, trim) {
return ajax.get();
}
};
});
var Car = candi.provider.instance('Car', function(carService, year, manufacturer, model, trim) {
this.year = year;
this.manufacturer = manufacturer;
this.model = model;
this.trim = trim;
this.specs = carService.getSpecs(manufacturer, year, model, trim);
});
var car = new Car(2009, 'honda', 'accord', 'lx');

bulle-di est un léger DI conteneur pour le Javascript et le Tapuscrit.

Il vous permet de vous inscrire à l'usine méthodes (rappels) ou d'instances. Ci-dessous est un exemple simple (d'autres exemples).

npm install --save bubble-di

var {DiContainer} = require("bubble-di");
//import { DiContainer } from "bubble-di";
DiContainer.setContainer(new DiContainer());
class Bar { sayBar(){ console.log("bar"); } }
class Baz { sayBaz(){ console.log("baz"); } }
class Foo { 
constructor (bar, baz)
{
bar.sayBar();
baz.sayBaz();
//...
}
};
DiContainer.getContainer().registerInstance("bar", new Bar());
DiContainer.getContainer().registerInstance("baz", new Baz());
DiContainer.getContainer().register("foo", {
dependencies: ["bar", "baz"],
factoryMethod: (bar, baz) => new Foo(bar, baz) },
);
const foo = DiContainer.getContainer().resolve("foo"); //will print "bar" and "baz".

Même si c'est une vieille question que j'ai envie. 😉

//dependency injection
class Thing1 {
constructor(aThing){
this.otherThing = aThing;
}
}
class Thing2 {}
const thing = new Thing1(new Thing2())
//dependency inversion
class Thing1 {
constructor({
read = null
} = {}){
if(typeof read !== 'function'){
//establish a simple contract
throw new TypeError(read + ' is not a function.');
}
this._read = read;
//Somewhere an instance of Thing1()
//will call this._read()
}
}
class Thing2 {
read(){
//read something
}
}
const thing2 = new Thing2();
const thing1 = new Thing1({
read(){
//Here is the equivalent to the so called "interface"
return thing2.read();
}
});