Skip to content

Latest commit

 

History

History
130 lines (112 loc) · 3.45 KB

README.md

File metadata and controls

130 lines (112 loc) · 3.45 KB

DI Module v2

Dependency Injection Module
The module was inspired by di.js in @angular.

Quick Navigate

  1. Decorator
  2. Global Variables
  3. Functions
  4. Interface
  5. Examples
  6. Lisence

Cookbook

Injectable

Use @Injectable() decorator to register class to INJECTABLE_STORE
Otherwise the class cannot be instanized by function instanize

Inject

Use @Inject(...Providers) decorator to inject providers(functions) to class.
The inputed providers will be used to construct instance of decorated class.
NOTE: the sequence of providers is NOT restricted

Component

Use @Component(config: componentConfig) to decorate class.
pass componentConfig to decorator to determine the specific providers for constructing class instance.

bootstrap()

Example: bootstrap({ provider: [...Function] }); This is where intanizing started.
The instanzing function will generate instaces of inputed Providers and store them to INSTANCE_STORE as global instance.

construct(Component)

The function returns an instance which all dependencies has been injected.

instanize(InjectableClass)

The function returns an instance of registered injectable class.

componentConfig

    {
        restrict?: boolean,
        provider: [Function|providerConfig]
    }

NOTE: In restrict mode, if the dependency instance cannot be found, it will throw an Error. Otherwise it will return null

providerConfig

    {
        provider: Function,
        useValue?: any,
        useClass?: Function,
        useExistInstance?: any
    }

The priority is useClass > useValue > useExistInstance

Examples

The index.web.js has exposed a global variable DI, use <script> tag to import index.web.js

index.html

    <html>
        <head></head>
        <body>
            <script src="path/to/your/index.web.js"></script>
            <script src="your/own/js/my.js"></script>
        </body>
    </html>

my.ts

    @Injectable()
    class Wheel { 
        showInfo(){ console.log('Wheel module is working OK...') };
    }

    @Injectable()
    class Engine {
        showInfo(){ console.log('Engine module is working OK...') };
    }

    @Injectable()
    class V12Engine {
        showInfo(){ console.log('V12 Engine starts!') }
    }


    @Component({
        provider: [
            { provider: Engine, useClass: V12Engine }
        ]
    })
    class Car {
        constructor( private wheel: Wheel, private engine: V12Engine ) {
            this.wheel.showInfo();
            this.engine.showInfo();
        }
    }


    boostrap({
        provider: [
            Wheel,
            Engine,
            V12Engine
        ]
    });

    var car = new Car( new Wheel(), new Engine() );
    var racingCar = constrct(Car);

Console

    Wheel module is working OK...
    Engine module is working OK...
    Wheel module is working OK...
    V12 Engine starts!