Injector框架理解(三)

上一节我们学习了didi框架的如何重用一个模块，以及依赖注入的数组式配置，今天我们继续学习如何配置依赖注入等。

我们还是通过例子来说明使用方法

const {Injector} = require('didi');
class FooType {
    constructor() {
       this.name = 'foo';
    }
}

function barFactory(foo) {
    return foo;
}

const module1 = /** @type ModuleDeclaration */ ({
    'foo': [ 'type', [ FooType ] ],
    'bar': [ 'factory', [ 'foo', barFactory ] ]
});

const injector = new Injector([ module1 ]);
function fn(foo, bar) {
	console.log('foo',foo);
	console.log('foo1',injector.get('foo'));
	console.log('bar',bar);
	console.log('bar1',injector.get('bar'));
}
const annotatedFn = [ 'foo', 'bar', fn ];

injector.invoke(annotatedFn);
injector.invoke(annotatedFn);

我们看看输出:

从上面的输出可以看出，这个依赖注入的配置const annotatedFn = [ 'foo', 'bar', fn ];是可以重用的，也就是注入函数是可以重用的。

下面我们看看依赖注入的用法：

const {Injector} = require('didi');
class Foo {
    constructor(bar1, baz1) {
      this.bar = bar1;
      this.baz = baz1;
    }
}
Foo.$inject = [ 'bar', 'baz' ];

function bar(baz, abc) {
    return {
      baz: baz,
      abc: abc
    };
}
bar.$inject = [ 'baz', 'abc' ];
const module1 = /** @type ModuleDeclaration */ ({
    foo: [ 'type', Foo ],
    bar: [ 'factory', bar ],
    baz: [ 'value', 'baz-value' ],
    abc: [ 'value', 'abc-value' ]
});

const injector = new Injector([ module1 ]);
const fooInstance = injector.get('foo');
console.log('fooInstance.bar:',fooInstance.bar);
console.log('fooInstance.baz:',fooInstance.baz);

我们看看输出:

以上的配置通过对一个参数$inject来配置一个类或者一个函数的依赖项。然后通过依赖加载器来加载模块后自动载入每个组件的依赖项。

除此之外，还有另外一种配置依赖项的方式：

const {Injector} = require('didi');
class Foo {
    constructor(bar1, baz1) {
      this.bar = bar1;
      this.baz = baz1;
    }
}

function bar(baz, abc) {
    return {
      baz: baz,
      abc: abc
    };
}
const module1 = /** @type ModuleDeclaration */ ({
    foo: [ 'type', [ 'bar', 'baz', Foo ] ],
    bar: [ 'factory', [ 'baz', 'abc', bar ] ],
    baz: [ 'value', 'baz-value' ],
    abc: [ 'value', 'abc-value' ]
});
const injector1 = new Injector([ module1 ]);
const fooInstance1 = injector1.get('foo');
console.log('fooInstance1.bar:',fooInstance1.bar);
console.log('fooInstance1.baz:',fooInstance1.baz);

输出如下：

这里可以看出，另一种配置组件依赖项的方式是通过数组的方式，在这种定义中，数组的最后一个是组件函数，之前的所有数组项都是最后一个组件函数的依赖项。

我们再来看看第三种依赖注入的方式

const {Injector} = require('didi');
function bar(/* baz */ a, abc) {
    return { baz: a, abc: abc };
}

const module1 = ({
    baz: [ 'value', 'baz-value' ],
    abc: [ 'value', 'abc-value' ]
});
const injector = new Injector([ module1 ]);
const result = injector.invoke(bar);
console.log('result-comment:',result);

这里可以看出，可以使用comment对参数进行依赖注入，比如这里bar函数的参数a,这里对应的组件就是模块中的baz组件

下面我们看看如何通过此框架注入属性：

const {Injector} = require('didi');
const module1 = /** @type ModuleDeclaration */ ({
    config: [ 'value', {
      a: 1,
      b: {
        c: 2
      }
    } ]
});

const injector = new Injector([ module1 ]);
console.log('config.a:',injector.get('config.a'));
console.log('config.b.c:',injector.get('config.b.c'));

const module2 = /** @type ModuleDeclaration */ ({
    'a.b': [ 'value', 'a.b value' ]
});

const injector1 = new Injector([ module2 ]);
console.log('a.b:',injector1.get('a.b'));

输出结果如下：

从以上可以看出，通过value属性配置的组件，可以是一个多层结构的对象，而这些对象的值可以通过a.b.c的方式来获取组件的值。比如我们上面代码中第一个模块中的config.a,config.b.c。

另一种方式通过配置组件的key的值类型为a.b，比如我们第二个模块中的配置。