Inyección de dependencias a través de propiedades de función en JavaScript

Un método de inyección de dependencia bien conocido pero no muy popular. Un intento de implementar este método en paquetes populares de DI npm. Otro DI.

Algunas palabras sobre OOP y DI

. . ES js .

. 2006 , — PERL. . OO , , PERL , 1, 2, .

2 , , , . , . . , .

JavaScript, , . , , .

TypeScript , , - ( ). .

, JS , . JQuery UI Widget Factory. , - , . ES6 classes ES5 . ES6 DI.

(dependency injection) . , , . , DI, .

DI . , — . , (/ , , , , ...). / . , “”, - . — ! DI.

DI — .

— , . Javascript . . , .

.

App ,

Storage — ( singleton/service),

Date, ( ).

- . (transient) “new”.

- (singleton) “one”.

class App {

    /** @type { function( int ):IDate } */
    newDate;

    /** @type { function(): IStorage } */
    oneStorage;

    construct( newDate, oneStorage ) {
        this.newDate = newDate;
        this.oneStorage = oneStorage;
    }

    main() {
        const oDate1 = this.newDate( 0 );
        const oDate2 = this.newDate( 1000 );
        const oStorage = this.oneStorage();
        oStorage.insert( oDate1.format() + ' - ' + oDate2.format() );
    }
}

, . (lazy). , ( inversify: to, toSelf, toConstantValue, toDynamicValue, toConstructor, toFactory, toFunction, toAutoFactory, toProvider, toService), DI . , .

DI . DI , , . DI .

dependency injection

, , , . dependency injection. :

1. , . .
2. , / . , , .
3. , . , , , , / IDE.

DI. , DI , .

DI . , . , , DI .

, , , , , . , - , - , . . — “-” )

dependency injection javascript/typescript

, “di” npm. ~1400. . npm dependents.

Gitcompare

Codesandbox

https://github.com/inversify/InversifyJS

, , , . )). , . )

https://github.com/typestack/typedi

, , . , , App Date, . , ?

https://github.com/thlorenz/proxyquire

, . . DI, .

https://github.com/jeffijoe/awilix

, “Symbol(Symbol.toPrimitive)”, , - Proxy, Date . .

https://github.com/aurelia/dependency-injection

. Aurelia.

https://github.com/stampit-org/stampit

. . - .

https://github.com/microsoft/tsyringe

Microsoft, . , .

https://github.com/boblauer/mock-require

proxyquire.

https://github.com/mgechev/injection-js

Angular 4. , , useFactory .

https://github.com/young-steveo/bottlejs

. .instanceFactory, .

https://github.com/jaredhanson/electrolyte

. ES6 .

https://github.com/zhang740/power-di

. React. . - . , .

https://github.com/jpex-js/vue-inject

vue ES6 . . ES6 classes, provide inject DI. .

https://github.com/zazoomauro/node-dependency-injection

YAML/JS/JSON . . php symfony , setParameter, , .

https://github.com/justmoon/constitute

, , DI .

https://github.com/owja/ioc

inversify, . , : , , . , .

https://github.com/kraut-dps/di-box

, .

, , DI , , .

“”, :

class Service {
    work () {
        console.log('work');
    }
}

class App {
    oneService;
    main () {
        this.oneService().work();
    }
}

//  es6 ,   DI
class AppBox {
    Service;
    App;

    _oService;

    newApp () {
        const oApp = new this.App();

        //   
        oApp.oneService = this.oneService.bind(this);

        return oApp;
    }

    oneService () {
        if (!this._oService) {
            this._oService = new this.Service();
        }
        return this._oService;
    }
}

const oBox = new AppBox();
oBox.Service = Service;
oBox.App = App;
const oApp = oBox.newApp();
oApp.main();

Box , , .

(.one()), bind(this), . :

import {Box} from "di-box";

class Service {
    work() {
        console.log( 'work' );
    }
}

class App {
    oneService;
    main() {
        this.oneService().work();
    }
}

class AppBox extends Box {
    App;
    Service;

    newService() {
        return new this.Service();
    }

    oneService() {
        return this.one( this.newService );
    }

    newApp() {
        const oApp = new this.App();
        oApp.oneService = this.oneService;
        return oApp;
    }
}

const oBox = new AppBox();
oBox.Service = Service;
oBox.App = App;
const oApp = oBox.newApp();
oApp.main();

codesandbox

:

const oBox = new AppBox();
//  oBox.Service = Service;
oBox.App = App;
const oApp = oBox.newApp(); //   :  Service is undefined
oApp.main();

...

DI . , , . , .

:

constructor( arg1, arg2, arg3 ) {}

// 

constructor( { arg1key: arg1, arg2key: arg2, arg3key: arg3 } ) {}

, . ?

1. - .
2. .

ES . , - . DI .

. undefined. . .

:

class A {
    _arg1;
    _arg2;

    constructor( arg1, arg2 = null ) {
        this._arg1 = arg1;
        this._arg2 = arg2;
    }
}
const instance = new A( 1, 2 );

// 

class A {
    arg1; //  ,   
    arg2 = null; //    null !== undefined
}
const instance = new A();
instance.arg1 = 1;
instance.arg2 = 2;

dependency injection , . di-box.

typescript constructor( public arg1: type, public arg2: type ) Box:

new AppBox( { bNeedSelfCheck: false, sNeedCheckPrefix: null } );

codesandbox.

Entonces, con di-box tenemos la oportunidad de escribir en estilo OOP, con un código adicional mínimo pero suficiente que implementa DI. Por un lado, hay "magia" prototípica en la implementación, pero por otro lado, es solo en el nivel meta, y los componentes en sí pueden ser puros y no saber nada sobre el entorno.

Me encantaría discutirlo, tal vez me perdí algunas otras bibliotecas. O tal vez sepa cuál es la mejor manera de implementar mi ejemplo en algunas de las implementaciones de DI. Escribe en los comentarios.