Injector框架理解(二)

今天我们继续学习didi这个依赖注入框架,上一节我们知道了怎么定义组件,怎么定义模块,怎么通过Injector这个类来载入模块和获取组件。

今天我们来学习如何重用模块:

我们首先定义好组件和模块:

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

function barFactory(foo) {
    return foo;
}

const module1 = ({
    foo: [ 'type', [ FooType ] ],
    bar: [ 'factory', [ 'foo', barFactory ] ],
});
const injector1 = new Injector([module1]);
console.log('injector1:',injector1);
console.log(injector1.get('foo')===injector1.get('bar'))

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

console.log(injector1.get('foo')===injector2.get('foo'))

说明一下,这里的代码,首先我们定义了两个组件,一个是FooType,另一个是工厂方法barFactory返回的foo组件,其实看模块的定义实际上就是FooType的具体实例。然后我们将这两个组件定义为模块,这个模块的定义是可以重用的,用不同的依赖注入加载器加载后,它们的实例存在于不同的加载器中,虽然实例不同,但是它们的作用是相同的。

我们先看看运行的效果:

可以看出,这两个加载器中的实例是一模一样的。因此,定义好了模块以后是可以重用的。这里也存在一个问题,那就是组件的定义:

模块中组件的定义是这样的:

 const preModule =({
    foo: [
      'factory',
      function() {
        return 'foo-value';
      }
    ],
    bar: ['value', 'bar-value'],
    bub: ['type', BubType],
    buz: ['type', BuzType]
});
const curModule = ({
    foo: [ 'type', [ FooType ] ],
    bar: [ 'factory', [ 'foo', barFactory ] ],
});
//注意对于factory类型的组件,存在两种不同的定义方法,它们的第二个参数可以是一个函数
//也可以是一个数组,从后面可以看出,这是一个配置有依赖组件的数组
//同时,对于type类型的组件,第二个参数可以是一个类,也可以是一个数组,而数组中的值是一个类
//以上这样设计的原因,我们会在后文进行分析

依赖注入的方式,数组定义: 

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

function barFactory(foo) {
    return foo;
}

const module1 = ({
    foo: [ 'type', [ FooType ] ],
    bar: [ 'factory', [ 'foo', barFactory ] ],
});
const injector3 = new Injector([ module1 ]);
function fn(foo, bar) {
    console.log('foo0:',foo);
    console.log('foo1:',injector3.get('foo'));
    console.log('bar0:',bar);
    console.log('bar1:',injector3.get('bar'));
}
const annotatedFn = [ 'foo', 'bar', fn ];

injector3.invoke(annotatedFn);

我们看运行结果:

可以知道,依赖注入的配置可以是一个数组,而数组的最后一个就是组件函数,前面的所有参数就是这个函数组件依赖的组件,比如这里的fn组件依赖于foo和bar组件可以这样配置。

const annotatedFn = [ 'foo', 'bar', fn ];

好了,今天我们主要学习并理解了didi框架的模块重用以及数组形式的组件依赖注入配置

 

版权声明:著作权归作者所有。

thumb_up 0 | star_outline 0 | textsms 0