Come dovrebbe apparire un iniettore di dipendenza in JavaScript?

Come "dovrebbe" essere fatto è un argomento di discussione, ma posso fornirti un esempio che funziona bene da una libreria piuttosto comune - angularjs:

(function() { // wrap in anonymous function to not pollute global scope
    angular
        .module('mymodule') // which module to register this object with
        // register 'someSvc' identifier to inject someSvc object
        // for testing, provide a replacement object
        .service('someSvc', someSvc);

    // the object that will be injected
    function someSvc() {
        var privateVar = '';
        this.publicVar = '';
        this.publicMethod = function() { ... };
    }
})();

Se in seguito utilizzo someSvc in un altro componente (che verrà registrato anche con l'injector delle dipendenze) ...:

(function() { // wrap in anonymous function to not pollute global scope
    angular
        .module('mymodule') // which module to register this object with
        // register someCtrl object with identifier 'someCtrl'
        .controller('someCtrl', someCtrl);

    // tell angular which dependencies this object requires
    // this method of injection survives javascript minification
    someCtrl.$inject = ['someSvc']

    // constructor inject dependencies
    // name someSvc doesn't have to match (since we used $inject above)
    // but kept same for clarity
    function someCtrl(someSvc) {
        this.doSomething = function () {
            someSvc.publicMethod();
        }
    }
    // javascript functions are "hoisted", so it's available even if declared last
})();

Scopes

Esistono diversi metodi di registrazione su angolare che forniscono essenzialmente ambiti diversi come un contenitore DI standard. .service riporta l'oggetto una sola volta (singleton). .factory si aspetta una funzione che restituisce l'oggetto e chiama la funzione una sola volta (singleton). .controller è per ambito di durata dell'oggetto e generalmente utilizzato per i controllori del modello di pagina.

Minimo JS

Devi anche tenere a mente che i nomi delle variabili possono e saranno modificati dal processo di minimizzazione, quindi il tuo metodo di iniezione deve ancora funzionare quando cambiano i nomi delle variabili. In angolare, ciò si ottiene specificando l'identificatore di stringa della dipendenza (tramite $ inject o sintassi dell'array sulla registrazione del modulo).

Iniezione

La sintassi precedente registra le dipendenze con l'iniettore. Le dipendenze vengono iniettate dall'iniettore in questo modo:

// create an injector
var $injector = angular.injector(['ng']);

// use the injector to kick off your application
// use the type inference to auto inject arguments, or use implicit injection
$injector.invoke(function($rootScope, $compile, $document) {
  $compile($document)($rootScope);
  $rootScope.$digest();
});

Esempio estratto da questo link . L'iniettore legge i nomi dei parametri (o la proprietà $ inject) della funzione invocata e tenta di trovare i nomi delle dipendenze corrispondenti nel suo registro. Se non può, allora si blocca. Ovviamente, è responsabilità dell'utente assicurarsi che i moduli appropriati siano registrati prima di chiamare l'iniettore. (Angular chiama automaticamente l'iniettore durante il suo processo di avvio mentre esegue la scansione e trova i componenti registrati specificati nel DOM HTML.)

È possibile trovare ulteriori informazioni sulla DI angolare qui .

Ci sono un certo numero di soluzioni esistenti che dovresti esaminare prima di reinventare la ruota. Uno è Definizione di modulo asincrono (AMD) , che è condiviso da alcuni framework e utilizzabile da molti altri. Praticamente tutti i framework di qualsiasi nota hanno risolto questo problema.

La grande differenza con JavaScript rispetto ad altri linguaggi è l'idea che di solito vuoi essere in grado di caricare le dipendenze in modo asincrono sul web su richiesta, e solo quelle di cui hai bisogno, e memorizzarle nella cache per un uso successivo. D'altra parte, si desidera anche la possibilità di compilare tutte le dipendenze in un unico file miniato che è veloce da scaricare per l'uso di produzione, ma avere la versione semanticamente identica alla versione on-demand asincrona utilizzata durante lo sviluppo.