Injection de dépendances via les propriétés de fonction dans JavaScript

Une méthode d'injection de dépendances bien connue mais pas très populaire. Une tentative d'implémentation de cette méthode dans les packages DI npm populaires. Un autre DI.

Quelques mots sur la POO et la 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.

Ainsi, avec di-box, nous avons la possibilité d'écrire dans le style POO, avec un code supplémentaire minimal mais suffisant qui implémente DI. D'une part, il y a une «magie» prototypique dans l'implémentation, mais d'autre part, c'est seulement au niveau méta, et les composants eux-mêmes peuvent être purs et ne rien connaître de l'environnement.

Je serais heureux d'en discuter, peut-être que j'ai manqué d'autres bibliothèques. Ou peut-être savez-vous comment implémenter au mieux mon exemple dans certaines implémentations DI. Écrivez dans les commentaires.