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

发布时间：2020-12-14 01:49:46 所属栏目：百科来源：网络整理

导读：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 class. Instead,we would want to factor that into a Custom

Let's say we have aCustomerEditScreenthat needs to load aCustomerentity by ID from a web service. We wouldn't want to place all the details of our AJAX implementation inside ourclass. Instead,we would want to factor that into aCustomerServiceclass that our,or any other class,can use when it needs to load a. Aurelia's dependency injection container lets you accomplish this by declaring that theneeds to have ainjected at creation time.

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

  
Typically,you would use Decorators,an ES Next feature supported by both Babel and TypeScript. Here's what it looks like to declare that theneeds aCustomerService
 
 
用修饰符，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 theinjectdecorator and that the constructor signature matches the list of dependencies in thedecorator. This tells the DI that any time it wants to create an instance ofit must first obtain an instance ofwhich it caninjectinto the constructor ofduring instantiation. You can have as many injected dependencies as you need. Simply ensure that thedecorator 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": trueoption in thecompilerOptionssection of yourtsconfig.jsonfile. If you do this,you don't need to duplicate the type information withautoinjectdecorator like this
  
如果用的是ts，那么只需要进行上述的配置就可以自动注入依赖。inject换成了autoinject。 

  
Interestingly,you don't need to use ourautoinjectdecorator at all to get the above to work. The TypeScript compiler will emit the type metadata ifanydecorator is added to the class. Aurelia can read this metadata regardless of what decorator triggers TypeScript to add it. We simply provide thedecorator 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,247)">If you aren't using Babel's or TypeScript's decorator support (or don't want to),you can easily providemetadata 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,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',247)">因为我们class文件里面的方法都是public或者private，我们想要使用必须对class进行实例化，只有static可以直接使用， 
所以需要注入依赖实例化后才能调用。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!