前端理解依賴注入(控制反轉)

前端的技術的極速發展，對前端同學來說也是一個不小的挑戰，有各種各樣的東西需要學，在開發過程中經常會被後端同學嘲諷，對於前端來講根本就不存在類的概念，很多時候需要把大量的業務代碼堆積在頁面或者組件中，使組件和頁面變得特別的臃腫，一旦業務邏輯複雜的情況下，及時組件化做的很好，仍然避免不了難以維護。

之所以會被後端同學嘲諷，一基礎掌握不紮實，對前端理解不到位，二缺乏面向對象思想，三對業務與基礎傻傻分不清楚。ECMAScript 2015與Type Script的推出，提出了一個很重要的概念就是class(類)的概念。在沒有class之前為了前端能夠有類的概念，一直都是使用構造函數模擬類的概念，通過原型完成繼承。

雖然前端提出了很多概念(模塊化，組件化...)，個人覺得面向對象的應用是前端對於項目以及整體架構來講是一件利器，代碼結構好與壞與面向對象有一定的關係，但不是全部。不過我們可以藉助計算機領域的一些優秀的編程理念來一定程度上解決這些問題，接下來簡單的說下依賴注入(控制反轉)。

什麼是依賴注入

依賴注入一般指控制反轉，是面向對象編程中的一種設計原則，可以用來減低計算機代碼之間的耦合度。其中最常見的方式叫做依賴注入，還有一種方式叫依賴查找。通過控制反轉，對象在被創建的時候，由一個調控系統內所有對象的外界實體將其所依賴的對象的引用傳遞給它。也可以說，依賴被注入到對象中。

從上面的描述中可以發現，依賴注入發生在2個或兩個以上類，比如現在有兩個類A與B類，如果A是基礎類存在的話，B做為業務類存在，B則會依賴於A，上面有一句話很重要由一個調控系統內所有對象的外界實體將其所依賴的對象的引用傳遞給它，個人理解，在B類中使用A類的實例，而不是繼承A類。

對面向對象了解的同學應該了解，面向對象7大原則：

1. 單一職責
2. 開閉原則
3. 裡氏替換
4. 依賴倒置
5. 接口隔離
6. 迪米特法則
7. 組合聚合復用原則

詳細解釋參照：面向對象之七大基本原則(javaScript)

然而使用依賴注入的事為了降低代碼的耦合程度，提高代碼的可拓展性。以上都是一些面向對象的思想，我們參考一下以上最重要的幾個原則，層模塊不應該依賴低層模塊。兩個都應該依賴抽象，抽象不應該依賴具體實現，具體實現應該依賴抽象。

1. // 球隊信息不依賴具體實現 
2. // 面向接口即面向抽象編程 
3. class Fruit { 
4.     constructor(name) { 
5.         this.name = name 
6.     } 
7. } 
8. class Tropical { 
9.     // 此處的參數，是teamInfo的一個實例，不直接依賴具體的實例 
10.     // 面向抽象 
11.     constructor(fruit) { 
12.         this.fruit = fruit; 
13.     } 
14.     info() { 
15.         console.log(this.fruit.name) 
16.     } 
17. } 
18. // 將依賴關係放到此處來管理，控制權也放到此處 
19. // Tropical和Fruit之間不再有直接依賴 
20. // 原本直接掌握Fruit控制權的Tropical不再直接依賴 
21. // 將依賴控制，落在此處(第三方模塊專門管理)即為控制反轉 
22. var ym = new Tropical(new Fruit('香蕉')) 
23. ym.info() 
24. var kobe = new Tropical(new Fruit('菠蘿')) 
25. kobe.info() 

依賴注入的作用

初始化被依賴的模塊

如果不通過依賴注入模式來初始化被依賴的模塊，那麼就要依賴模塊自己去初始化了

那麼問題來了：依賴模塊就耦合了被依賴模塊的初始化信息了

注入到依賴模塊中

被依賴模塊已經被其他管理器初始化了，那麼依賴模塊要怎麼獲取這個模塊呢?

有兩種方式：

沒用依賴注入模式的話是1，用了之後就是2

想想，你需要某個東西的時候，你去找別人要，你需要提供別人什麼信息?最簡單的就是那個東西叫什麼，即你需要提供一個名稱。所以，方式1的問題是：依賴模塊耦合了被依賴模塊的名稱還有那個別人而方式2解決了這個問題，讓依賴模塊只依賴需要的模塊的接口。

依賴注入的優點

依賴注入降低了依賴和被依賴類型間的耦合，在修改被依賴的類型實現時，不需要修改依賴類型的實現，同時，對於依賴類型的測試。依賴注入方式，可以將代碼耦合性降到最低，而且各個模塊拓展不會互相影響，

1. 實現數據訪問層，也就是前端你的數據請求層
2. 模塊與接口重構，依賴注入背後的一個核心思想是單一功能原則，這意味著這些對象在系統的任何地方都可以重用。
3. 隨時增加單元測試，把功能封裝到整個對象裡面會導致自動測試困難或者不可能。將模塊和接口與特定對象隔離，以這種方式重構可以執行更先進的單元測試。

Vue中使用

上面寫的例子也只是對依賴注入見單的使用，在項目過程中往往就不是這麼簡單了，肯定不會向例子這麼簡單，而是很複雜很龐大的一個項目。項目中分為各種各樣的模塊，這種情況又改如何處理?在JavaScript中常見的就是依賴注入。從名字上理解，所謂依賴注入，即組件之間的依賴關係由容器在運行期決定，形象的來說，即由容器動態的將某種依賴關係注入到組件之中。

前端項目中並不像後端一樣，各種各樣的類，雖然前端可以寫class，若是React項目的話，還會好很多，由於其框架使用，全部是基於class但是在vue項目中，又應該怎麼具體體現呢?頁面中的業務也是可以作為類存在最終注入到Vue頁面中，最終完成業務邏輯。

通過依賴注入到底想要達到到什麼效果呢，依賴注入最終想要達成的效果則是，頁面的表現與業務相脫離，從本質上來說，頁面的展現形式與業務邏輯其實沒有根本聯繫的。若使用這種依賴注入的形式，則可以輕鬆的把業務和頁面表現分離開，頁面更加的專注於展示，而所注入的東西則更加的專注於業務的處理。項目也則會變得容易維護。

index.vue

1. <template> 
2.   <div> 
3.     <el-button @click="getList" 
4.               :loadding="loadding">獲取表格數據</el-button> 
5.     <ul> 
6.       <li v-for="(item,index) of list" 
7.           :key="index">{{item}}</li> 
8.     </ul> 
9.   </div> 
10. </template> 
11. <script> 
12. import operation from "@/business/index/Operation.js"; 
13. export default { 
14.   data() { 
15.     return { 
16.       list: [], 
17.       query:{}, 
18.       loadding:false 
19.     } 
20.   }, 
21.   methods:{ 
22.     async getList(){ 
23.       let {query} = this; 
24.       this.loadding = true; 
25.       try{ 
26.         this.list = await operation.getData.call(this,query); 
27.       }catch(error){ 
28.         console.log(error) 
29.       } 
30.       this.loadding =false; 
31.     } 
32.   } 
33. } 
34. </script> 
35. <style> 
36. @import "@/style/index.vue"; 
37. </style> 

operations.js

1. import request from "@/api/errorList/index.js"; 
2. class Operation { 
3.     async getData(query){ 
4.         //  this 指向Vue實例 
5.         try { 
6.             let res = await request.getErrorList(query); 
7.             let {list} = res; 
8.             //  這裡可以對數據進行二次處理 
9.             //  寫一些其他業務 
10.             Promise.resolve(list); 
11.         }catch(error){ 
12.             Promise.reject(error); 
13.         } 
14.     } 
15. }; 
16. export default new Operation(); 

上面也是在項目中的一個簡單的應用，使頁面表現數據請求與數據處理，業務相脫離，讓項目變得更加容易維護。

控制反轉這裡控制權從使用者本身轉移到第三方容器上，而非是轉移到被調用者上，這裡需要明確不要疑惑。控制反轉是一種思想，依賴注入是一種設計模式。

依賴注入最終想要達到的目的，首先得為模塊依賴提供抽象的接口，下來應該能夠註冊依賴關係

在註冊這個依賴關係後有地方存儲它，存儲後，我們應該把被依賴的模塊注入依賴模塊中，注入應該保持被傳遞函數的作用域，被傳遞的函數應該能夠接受自定義參數，而不僅僅是依賴描述。

總結

在JavaScript中依賴注入的概念不像Java中被經常提到，主要原因是在js中很容易就實現了這種動態依賴。其實我們大部分人都用過依賴注入，只是我們沒有意識到。即使你不知道這個術語，你可能在你的代碼裡用到它百萬次了。希望這篇文章能加深你對它的了解。

需要注意的是，依賴注入只是控制反轉的一種實現方式，正確的依賴管理是每個開發周期中的關鍵過程。JavaScript 生態提供了不同的工具，作為開發者的我們應該挑選最適合自己的工具。