Esaminando la dipendenza dall'iniezione in JavaScript, come con Angular, ho deciso che il vero DI era eccessivo per il mio progetto di medie dimensioni, quindi ho lavorato su un modo più semplice per organizzare il mio progetto e implementare Inversion of Control.
Ho ritenuto che le interfacce non valessero veramente la sintassi extra poiché JavaScript ha così pochi tipi di dati da gestire, ed è davvero facile digitare check in JS senza l'aiuto di interfacce. E ho ritenuto che non fosse necessario definire diverse varianti di servizi (fabbriche, ecc.), E invece considero ogni elemento come un semplice servizio, che può dipendere da qualsiasi altro servizio. Sono abbastanza sicuro che il risultato non si chiamerebbe DI.
Quindi come definirei questo modello? E può essere considerata una forma di IoC?
var Directory = function() {
this.directories = {};
this.items = {};
}
var root = new Directory();
//File projects/my-project-1/libraries/depends.js
var Service = function(name, dependencies, func) {
this.dependencyCollection = [];
this.func;
for (var x = 0; x < dependencies.length; x++) {
var nameSegments = dependencies[x].split(' / ');
var service = root;
var servicePlaceholder = service;
for (var i = 0; i < nameSegments.length; i++) {
var segment = nameSegments[i];
if (i === nameSegments.length - 1) {
if (servicePlaceholder.items[segment]) {
this.dependencyCollection.push(servicePlaceholder.items[segment]);
} else {
throw 'Dependent item missing: ' + JSON.stringify(servicePlaceholder.items, null, 3) + ' (' + dependencies + ": " + segment + ')';
}
} else if (servicePlaceholder.directories[segment]) {
servicePlaceholder = servicePlaceholder.directories[segment];
} else {
throw 'Dependent directory missing: ' + JSON.stringify(servicePlaceholder.directories, null, 3) + ' (' + segment + ')';
}
}
}
var directory = root;
var directoryPlaceholder = directory;
var nameSegments = name.split(' / ');
for (var i = 0; i < nameSegments.length; i++) {
var segment = nameSegments[i];
if (i === nameSegments.length - 1) {
directoryPlaceholder.items[segment] = func.apply(null, this.dependencyCollection);
this.init = function() {
func.apply(null, this.dependencyCollection);
}
} else {
if (directoryPlaceholder.directories[segment]) {
directoryPlaceholder = directoryPlaceholder.directories[segment];
} else {
directoryPlaceholder.directories[segment] = new Directory();
directoryPlaceholder = directoryPlaceholder.directories[segment];
}
}
}
}
//File: projects/my-project-1/js/selectors/button-1.js
var button = new Service('selectors / button-1', [], function() {
return $('.button');
});
//File: projects/my-project-1/js/selectors/body.js
var body = new Service('selectors / body', [], function() {
return $('body');
});
//File: projects/my-project-1/js/handlers/handler-1.js
var handler = new Service('handlers / handler-1', ['selectors / button-1', 'selectors / body'], function(button, body) {
button.on('click', function() {
body.css({
'background-color': 'green'
});
});
}).init();