Angular依賴注入

依賴注入Dependency Injection 簡稱DI

例:

var xiaomi = new Xiaomi();     // 假設小米公司生產了一臺xiaomi手機   
createShipment(xiaomi);         //此方法能把貨送給顧客,這叫做把小米手機注入到createShipment()方法

 再假設createShipment()方法需要(手機,快遞公司,訂單詳情)三個參數時,就需要:

var xiaomi = new Xiaomi();                              // 不僅要生產手機
var shipCompany = new ShipCompany();       // 還要自己建立個快遞公司
var order = new Order();                                  // 還要自己建立線上線下平臺做訂單
createShipment(xiaomi,shipCompany,order);   // 雖然小米已經這麼幹了,但還是很累的

上面的例子,小米除了在自己開的店裏賣就沒別的渠道了嗎?不僅要做手機,還要自己接生意,還要自己做快遞,不累嗎?除了自己幹,小米還能在淘寶,京東,蘇寧等平臺賣啊,還能利用三通一順等快遞公司來送貨啊,這就是依賴注入要解決的問題。利用淘寶京東順豐等公司就是給小米公司注入售賣服務(sellService), 快遞服務(sendService) 等等!

控制反轉Inversion of Control 簡稱IOC

IOC是指將依賴的控制權從代碼的內部轉到代碼的內部。好比小米把賣手機送貨的權力給了外部,至於是淘寶在賣還是京東在賣,是圓通在送還是順豐在送,這些都不用小米公司操心,小米公司只需要造手機就行了。專業的事交給專業的人去做。

IOC是一種鬆耦合的模式,實現的手段就是依賴注入。

注入器:

constructor(private someService: SomeService) {...}

這句話的意思是本組件聲明瞭一個someService的屬性,指明它的類型是SomeService然後angular就會去提供器中去找SomeService的一個實例,然後把這個實例注入給someService

提供器:

providers:[{provide:SomeService,useClass:SomeService}] 

providers:[SomeService]//provideuseClass相同可簡寫爲這個

例:

app.module.ts

@NgModule({
      providers:[{provide:SellService,useClass:ShunfengService}],             // 這個是淘寶,用的順豐

      // providers: [{provide:SellService,useClass:YuantongService}]          // 這個是京東,用的圓通
})

product.component.ts

@Component({
  ...

})
export class ProductComponent implements OnInit {
  product: Product;
  
constructor(sellService: SellService) {

        this.product = this.sellService.sendProduct();

  }
}

上面的代碼怎麼理解呢?

小米聲明sellService對象(也是屬性),叫sellService去賣手機,sellService呼叫售賣服務,這個服務是SellService類型的(線上銷售),那麼angular就會去提供器裏面找誰在提供這個售賣服務,至於是淘寶還是京東那要看提供器裏面的,用的哪個快遞公司就更加不需要小米公司來管了。angular找到SellService之後會new一個ShunfengService的一個實例(找一家順豐門店),找到之後把服務注入給小米公司的sellServicesellService就跑到那家順豐門店填送貨單(sendProduct方法)把手機送給客戶了。

各位看官應該能想出更好的比喻,歡迎交流。如果有不妥之處歡迎指正。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章