1. 程式人生 > >Angular 2中的依賴注入

Angular 2中的依賴注入

翻譯者:http://kittencup.com/javascript/2015/07/23/Angular%202%E4%B8%AD%E7%9A%84%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5.html

依賴注入一直是Angular的一個最大特點和賣點。它允許在我們應用不同元件中注入依賴,而不需要知道這些依賴是如何建立的,或者它們需要的依賴關係是什麼,可是,已證明了目前的Angular 1的依賴注入系統有一些問題,所以建立了下一代框架Angular 2來解決這些問題,在這篇文章中,我們將探索新的依賴注入系統。

在我們進入新的依賴注入系統之前,先讓我們先了解什麼是依賴注入,而Angular 1的問題又是什麼問題。

依賴注入是一種模式

在ng-conf 2014中Vojta Jina有一個關於依賴注入的演講,在這次演講中,它討論了在開發Angular 2中關於新的DI系統的想法和故事,他很清楚,我們可以把DI看成兩件事:作為一種設計模式和作為一個框架。而前者用來解釋DI模式,後者可以幫助我們的系統,維護和組裝依賴關係。這篇文章中我想做同樣的事來幫助我們理解這一概念。

我們首先考慮看看下面的程式碼。

classCar{
  constructor() {
    this.engine = new Engine();
    this.tires = Tires.getInstance
(); this.doors = app.get('doors'); } }

在這裡沒什麼特別的東西,我們有一個Car類,我們在建構函式中建立了構建一輛汽車需要的物件,此程式碼有什麼問題嗎?你可以看到,建構函式不僅分配需要的依賴關係到內部屬性,也知道如何建立這些物件。 例如engine屬性是使用Engine建構函式建立的,Tires似乎是一個單例的物件,doors是從一個全域性物件中獲取的,全域性物件類似於服務定位(service locator)。

這導致程式碼難以維護,甚至更難測試。想象一下你想測試這個類,在程式碼中你將如何替換依賴Engine為MockEngine? 當編寫測試時,我們想要使用程式碼在不同的場景中測試,因此每個場景需要它自己的配置。 如果我們想寫測試程式碼,我們需要編寫可重用的程式碼。只要所有依賴關係都滿足,我們的程式碼應該在任何環境中工作。這給我們帶來的結論是可測試的程式碼是可重用的程式碼,反之亦然。

那麼如何才能更好的寫出這樣的程式碼,使它更容易測試?這是超級容易,你可能已經知道該怎麼做。我們把程式碼改成這樣:

classCar{
  constructor(engine, tires, doors) {
    this.engine = engine;
    this.tires = tires;
    this.doors = doors;
  }
}

所有我們做的是,我們將期望所有需要依賴的物件從建構函式建立移動到建構函式的引數建立,在這個程式碼中沒有具體的實現,我們從字面上把建立這些依賴關係的責任轉移到一個更高的層次上。如果我們想建立一個Car物件,我們所要做的就是把所有需要的依賴關係傳遞給建構函式:

var car = new Car(
  new Engine(),
  new Tires(),
  new Doors()
);

這太酷了,不是嗎?依賴從我們的類脫離出來,在我們編寫測試中,我們可以通過mock依賴實現測試

var car = new Car(
  new MockEngine(),
  new MockTires(),
  new MockDoors()
);

這就是依賴注入。更具體一點,這個特定的模式也被稱為建構函式注入。還有兩個注入模式,setter注入和interface注入,但我們將不會在本文中介紹這些內容。

好酷,現在我們正在使用DI,但是什麼時候來一個DI系統呢?如前所述,我們從字面上把依賴性創造的責任轉移到一個更高的水平。這正是我們新的問題。誰來負責組裝所有這些依賴關係?是我們。

functionmain(){
  var engine = new Engine();
  var tires = new Tires();
  var doors = new Doors();
  var car = new Car(engine, tires, doors);
  car.drive();
}

我們必須保留一個main函式,這樣做是相當危險的,尤其是當應用程式變得越來越大,如果我們能做點像這樣的事情,那是不是更好?

functionmain(){
  var injector = new Injector(...)
  var car = injector.get(Car);

  car.drive();
}

依賴注入作為一個框架

這是依賴注入作為框架的地方。眾所周知,Angular 1有它自己的DI系統,允許我們註釋服務和其他元件,讓injector發現他們知道什麼依賴需要例項化,例如,下面的程式碼演示瞭如何在Angular 1中註釋我們的Car類:

classCar{
  ...
}
Car.$inject = [
            
           

相關推薦

angular 2 可以注入介面嗎?如何實現?

答:不能,因為TypeScript的介面是設計時的, JavaScript沒有介面。 TypeScript程式碼​​從生成的JavaScript過程中消失。沒有任何介面型別資訊可供Angular在執行時查詢。 有兩個方案可以實現: 1、方案1: 最簡單的解決方案就是定義一個實現介面的抽象類。通常,無論如何你都

Angular 2依賴注入

翻譯者:http://kittencup.com/javascript/2015/07/23/Angular%202%E4%B8%AD%E7%9A%84%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5.html 依賴注入一直是An

Angular依賴注入

依賴注入: DI,Dependency injection 控制反轉: IOC,Inversion of Control 好處:鬆耦合 注入器: constructor(private productService:ProductService){} 提供器: providers:[Prpd

spring依賴注入的方式及實現(2

依賴注入的方式1、屬性注入2、構造器注入3、工廠方法注入(很少使用,不推薦)1、屬性注入(1)屬性注入即通過 setter 方法注入Bean 的屬性值或依賴的物件(2)屬性注入使用 <proper

在Spring依賴注入的幾種方式實現鬆耦合

一、普通注入方式: (1)在IDEA工作空間內先建立lib包然後匯入Spring的架包(複製進去的架包要按住滑鼠右鍵出現Add as Library)。 (2)在已經建立好架包的基礎上在src目錄下建立XML檔案,檔案命為applicationContext.xml,需要注意的是我們建

spring依賴注入方式總結

文章來源於今日頭條使用者:分散式系統架構 一、註解注入 註解注入在Spring中是用的最多的一種方式,就是在java程式碼中使用註解的方式進行裝配,在程式碼中加入@Resource或者@Autowired、 1、Autowired是自動注入,自動從spring的上下文找到合適的bean來

關於php依賴注入(DI)和控制反轉(IOC)的理解

一、什麼是依賴注入和控制反轉 1.依賴注入(DI)— Dependecy Injection 為了更方便的理解,我們把依賴注入分開理解,首先什麼是依賴?顧名思義,依賴就是各元件之間的一種關係。一般來說,在面向物件程式設計中,我們在類A中 使用到了 類B的例項,我們就可以說

第三講: 3.2 spring 依賴注入

一,通過屬性注入 1. 在beans.xml中,定義id為 people2 ,class屬性不變的bean,並給bean的屬性賦值。 xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.spr

Angular學習筆記-依賴注入入門

依賴注入 依賴注入:Dependency Injection 簡稱DI 首先,當使用引數是物件的方法時,需要先例項化物件,再傳給方法。 var person = new Person(); addPerson(person); 於是我們說,addPerson方法依賴Pers

angular 2elasticsearch.js的使用

1.安裝 進入angular工程中, 執行 npm install --save elasticsearch 2.封裝api // 參考-https://www.elastic.co/guid

解決 SpringbootInterceptor攔截器依賴注入失敗

BeanFactory beanFactory = WebApplicationContextUtils.getRequiredWebApplicationContext(request.getServletContext()); userService = (UserService) bea

關於spring依賴注入(AOP)的理解

Spring中的依賴注入可以分為介面注入、構造器注入、set方法注入    介面注入的話都是實現一個介面然後實現對應的方法。(比較常用)    如果使用構造器注入可以在建立物件的同時完成依賴關係的建立。如果使用set方法注入的話更容易識別它的名稱。但是如果使用構造器注入的方式

Angular 2 的元件(一)

簡述 元件是Angular 2 眾多好的理念之一。 在Angular apps中,我們使用HTML的標籤來編寫我們的互動應用。但是瀏覽器只理解一些標籤,像select或者form等一些瀏覽器建立者定義的標籤。 我們如何讓瀏覽器認識新的標籤呢?如果我們想使用

18. Yii 2.0 依賴注入容器

三層架構:從高到底分別是使用者介面層(UIL)、業務邏輯層(BLL)和資料訪問層(DAL),傳統的依賴關係是高層模組直接依賴於低層模組。 區分層次的目的是為了”高內聚、低耦合“的思想。 依賴倒置:高層模組不依賴於低層模組的實現,而是依賴於二者之間的抽象(介面)。 控制反

Play 2.6 依賴注入

依賴注入 Play對實現了JSR 330的依賴注入提供了支援。Play自帶的預設的實現是Guice,其他實現也可以新增進來。為了啟用Guice模組,先要在依賴中新增資訊 libraryDependencies += guice Guice wiki

解決SpringbootInterceptor攔截器依賴注入失敗

I want to add spring mvc interceptor as part of Java config. I already have a xml based config for this but I am trying to move to a Java

.Net Core依賴注入服務使用總結

一、依賴注入   引入依賴注入的目的是為了解耦和。說白了就是面向介面程式設計,通過呼叫介面的方法,而不直接例項化物件去呼叫。這樣做的好處就是如果添加了另一個種實現類,不需要修改之前程式碼,只需要修改注入的地方將實現類替換。上面的說的通過介面呼叫方法,實際上還是需要去例項化介面的實現類,只不過不需要我們手動n

.NET 依賴注入元件 Autofac 的效能漫聊

Autofac 是一款超讚的 .NET IoC 容器 ,在眾多效能測評中,它也是表現最優秀的一個。 它管理類之間的依賴關係, 從而使 應用在規模及複雜性增長的情況下依然可以輕易地修改。它的實現方式是將常規的.net類當做 元件 處理。 簡單的效能測試 在 LINQPad 中,我們

angular js依賴注入是什麼?

這裡是修真院前端小課堂,每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能,本篇分享的是: 【angular js中的依賴注入是什麼? 】 【JS-7】  &n

ASP.NET Core依賴注入2):依賴注入(DI)

IoC主要體現了這樣一種設計思想:通過將一組通用流程的控制從應用轉移到框架之中以實現對流程的複用,同時採用“好萊塢原則”是應用程式以被動的方式實現對流程的定製。我們可以採用若干設計模式以不同的方式實現IoC,比如我們在上面介紹的模板方法、工廠方法和抽象工廠,接下來我們介紹一種更為有價值的IoC模式,即依賴注入