敲碎时间的人的个人专栏
上一篇

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);

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

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

我们先看看运行的效果:

可以看出,这两个加载器中的实例是一模一样的。因此,定义好了模块以后是可以重用的。

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

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框架的模块重用以及数组形式的组件依赖注入配置

 

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

X

欢迎加群学习交流

联系我们