前端框架Aurelia - 依赖注入Dependency Injection（一）

Let's say we have a 

CustomerEditScreen

 that
needs to load a 

Customer

 entity
by ID from a web service. We wouldn't want to place all the details of our AJAX implementation inside our 

CustomerEditScreen

 class.
Instead, we would want to factor that into a 

CustomerService

 class
that our 

CustomerEditScreen

,
or any other class, can use when it needs to load a 

Customer

.
Aurelia's dependency injection container lets you accomplish this by declaring that the 

CustomerEditScreen

 needs
to have a 

CustomerService

 injected
at creation time.

我们不想把Ajax请求写在CustomerEditScreen里面，我们把Ajax请求放在CustomerService里面，这样任何class都可以利用这个文件请求。Aurelia's
dependency injection container 通过在创建时候声明CustomerEditScreen需要

CustomerService

 注入来帮你完成。

Typically,
you would use Decorators, an ES Next feature supported by both Babel and TypeScript. Here's what it looks like to declare that the 

CustomerEditScreen

 needs
a 

CustomerService

用修饰符，ES6特性，Babel和TS都支持。下面是个demo。

import {CustomerService} from 'backend/customer-service';
import {inject} from 'aurelia-framework';

@inject(CustomerService)
export class CustomerEditScreen {
constructor(private customerService: CustomerService) {
this.customer = null;
}

activate(params) {
return this.customerService.getCustomerById(params.customerId)
.then(customer => this.customer = customer);
}
}

Notice
that we use the 

inject

 decorator
and that the constructor signature matches the list of dependencies in the 

inject

 decorator.
This tells the DI that any time it wants to create an instance of 

CustomerEditScreen

 it
must first obtain an instance of 

CustomerService

 which
it can inject into
the constructor of 

CustomerEditScreen

 during
instantiation. You can have as many injected dependencies as you need. Simply ensure that the 

inject

 decorator
and the constructor match one another. 

我们用inject修饰符，构造函数匹配inject里面列出的依赖。注意，构造函数里面的依赖必须要一一对应inject修饰符里里面的。这个告诉DI，它任何时候想要创建CustomerEditScreen实例，必须首先获得CustomerService实例，这个要获得的实例可以在CustomerEditScreen实例化的时候被注入到CustomerEditScreen的构造函数中。

多个依赖的注入需要构造函数里面的依赖和inject里面的依赖一一对应。

import {CustomerService} from 'backend/customer-service';
import {CommonDialogs} from 'resources/dialogs/common-dialogs';
import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-framework';

@inject(CustomerService, CommonDialogs, EventAggregator)
export class CustomerEditScreen {
constructor(private customerService: CustomerService, private dialogs: CommonDialogs, private ea: EventAggregator) {
this.customer = null;
}

activate(params) {
return this.customerService.getCustomerById(params.customerId)
.then(customer => this.customer = customer)
.then(customer => this.ea.publish('edit', customer));
}
}

If you are using TypeScript, you can take advantage of an experimental
feature of the language to have the TypeScript transpiler automatically provide Type information to Aurelia's DI. You can do this by configuring the TypeScript compiler with the 

"emitDecoratorMetadata":
true

 option in the 

compilerOptions

 section
of your 

tsconfig.json

 file.
If you do this, you don't need to duplicate the type information with 

inject

,
instead, as long as your constructor definition contains its paramaters' types, you can use Aurelia's 

autoinject

 decorator
like this

如果用的是ts，那么只需要进行上述的配置就可以自动注入依赖。inject换成了autoinject。

Interestingly,
you don't need to use our 

autoinject

 decorator
at all to get the above to work. The TypeScript compiler will emit the type metadata if any decorator
is added to the class. Aurelia can read this metadata regardless of what decorator triggers TypeScript to add it. We simply provide the 

autoinject

 decorator
for consistency and clarity.

其实如果用ts，连autoinject都不需要添加，之所以添加，只是为了让代码更清晰。

import {CustomerService} from 'backend/customer-service';
import {CommonDialogs} from 'resources/dialogs/common-dialogs';
import {EventAggregator} from 'aurelia-event-aggregator';
import {autoinject} from 'aurelia-framework';

@autoinject
export class CustomerEditScreen {
constructor(private customerService: CustomerService, private dialogs: CommonDialogs, private ea: EventAggregator) {
this.customer = null;
}

activate(params) {
return this.customerService.getCustomerById(params.customerId)
.then(customer => this.customer = customer)
.then(customer => this.ea.publish('edit', customer));
}
}

If
you aren't using Babel's or TypeScript's decorator support (or don't want to), you can easily provide 

inject

 metadata
using a simple static method or property on your class:

如果babel和ts都不用，那么就这样添加依赖。用一个inject静态方法。

import {CustomerService} from 'backend/customer-service';
import {CommonDialogs} from 'resources/dialogs/common-dialogs';
import {EventAggregator} from 'aurelia-event-aggregator';

export class CustomerEditScreen {
static inject() { return [CustomerService, CommonDialogs, EventAggregator]; }

constructor(customerService, dialogs, ea) {
this.customerService = customerService;
this.dialogs = dialogs;
this.ea = ea;
this.customer = null;
}

activate(params) {
return this.customerService.getCustomerById(params.customerId)
.then(customer => this.customer = customer)
.then(customer => this.ea.publish('edit:begin', customer));
}
}

因为我们class文件里面的方法都是public或者private，我们想要使用必须对class进行实例化，只有static可以直接使用，

所以需要注入依赖实例化后才能调用。