前端的技術(shù)的極速發(fā)展，對(duì)前端同學(xué)來(lái)說(shuō)也是一個(gè)不小的挑戰(zhàn)，有各種各樣的東西需要學(xué)，在開發(fā)過(guò)程中經(jīng)常會(huì)被后端同學(xué)嘲諷，對(duì)于前端來(lái)講根本就不存在類的概念，很多時(shí)候需要把大量的業(yè)務(wù)代碼堆積在頁(yè)面或者組件中，使組件和頁(yè)面變得特別的臃腫，一旦業(yè)務(wù)邏輯復(fù)雜的情況下，及時(shí)組件化做的很好，仍然避免不了難以維護(hù)。

之所以會(huì)被后端同學(xué)嘲諷，一基礎(chǔ)掌握不扎實(shí)，對(duì)前端理解不到位，二缺乏面向?qū)ο笏枷耄龑?duì)業(yè)務(wù)與基礎(chǔ)傻傻分不清楚。ECMAScript 2015與Type Script的推出，提出了一個(gè)很重要的概念就是class(類)的概念。在沒(méi)有class之前為了前端能夠有類的概念，一直都是使用構(gòu)造函數(shù)模擬類的概念，通過(guò)原型完成繼承。

雖然前端提出了很多概念(模塊化，組件化...)，個(gè)人覺(jué)得面向?qū)ο蟮膽?yīng)用是前端對(duì)于項(xiàng)目以及整體架構(gòu)來(lái)講是一件利器，代碼結(jié)構(gòu)好與壞與面向?qū)ο笥幸欢ǖ年P(guān)系，但不是全部。不過(guò)我們可以借助計(jì)算機(jī)領(lǐng)域的一些優(yōu)秀的編程理念來(lái)一定程度上解決這些問(wèn)題，接下來(lái)簡(jiǎn)單的說(shuō)下依賴注入(控制反轉(zhuǎn))。

什么是依賴注入

依賴注入一般指控制反轉(zhuǎn)，是面向?qū)ο缶幊讨械囊环N設(shè)計(jì)原則，可以用來(lái)減低計(jì)算機(jī)代碼之間的耦合度。其中最常見(jiàn)的方式叫做依賴注入，還有一種方式叫依賴查找。通過(guò)控制反轉(zhuǎn)，對(duì)象在被創(chuàng)建的時(shí)候，由一個(gè)調(diào)控系統(tǒng)內(nèi)所有對(duì)象的外界實(shí)體將其所依賴的對(duì)象的引用傳遞給它。也可以說(shuō)，依賴被注入到對(duì)象中。

從上面的描述中可以發(fā)現(xiàn)，依賴注入發(fā)生在2個(gè)或兩個(gè)以上類，比如現(xiàn)在有兩個(gè)類A與B類，如果A是基礎(chǔ)類存在的話，B做為業(yè)務(wù)類存在，B則會(huì)依賴于A，上面有一句話很重要由一個(gè)調(diào)控系統(tǒng)內(nèi)所有對(duì)象的外界實(shí)體將其所依賴的對(duì)象的引用傳遞給它，個(gè)人理解，在B類中使用A類的實(shí)例，而不是繼承A類。

對(duì)面向?qū)ο罅私獾耐瑢W(xué)應(yīng)該了解，面向?qū)ο?大原則：

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

詳細(xì)解釋參照：面向?qū)ο笾叽蠡驹瓌t(javaScript)

然而使用依賴注入的事為了降低代碼的耦合程度，提高代碼的可拓展性。以上都是一些面向?qū)ο蟮乃枷?，我們參考一下以上最重要的幾個(gè)原則，層模塊不應(yīng)該依賴低層模塊。兩個(gè)都應(yīng)該依賴抽象，抽象不應(yīng)該依賴具體實(shí)現(xiàn)，具體實(shí)現(xiàn)應(yīng)該依賴抽象。

 

// 球隊(duì)信息不依賴具體實(shí)現(xiàn) 
// 面向接口即面向抽象編程 
class Fruit { 
    constructor(name) { 
        this.name = name 
    } 
} 
class Tropical { 
    // 此處的參數(shù)，是teamInfo的一個(gè)實(shí)例，不直接依賴具體的實(shí)例 
    // 面向抽象 
    constructor(fruit) { 
        this.fruit = fruit; 
    } 
    info() { 
        console.log(this.fruit.name) 
    } 
} 
// 將依賴關(guān)系放到此處來(lái)管理，控制權(quán)也放到此處 
// Tropical和Fruit之間不再有直接依賴 
// 原本直接掌握Fruit控制權(quán)的Tropical不再直接依賴 
// 將依賴控制，落在此處(第三方模塊專門管理)即為控制反轉(zhuǎn) 
var ym = new Tropical(new Fruit('香蕉')) 
ym.info() 
var kobe = new Tropical(new Fruit('菠蘿')) 
kobe.info() 

 

依賴注入的作用

初始化被依賴的模塊

如果不通過(guò)依賴注入模式來(lái)初始化被依賴的模塊，那么就要依賴模塊自己去初始化了

那么問(wèn)題來(lái)了：依賴模塊就耦合了被依賴模塊的初始化信息了

注入到依賴模塊中

被依賴模塊已經(jīng)被其他管理器初始化了，那么依賴模塊要怎么獲取這個(gè)模塊呢?

有兩種方式：

• 自己去問(wèn)
• 別人主動(dòng)給你

沒(méi)用依賴注入模式的話是1，用了之后就是2

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

依賴注入的優(yōu)點(diǎn)

依賴注入降低了依賴和被依賴類型間的耦合，在修改被依賴的類型實(shí)現(xiàn)時(shí)，不需要修改依賴類型的實(shí)現(xiàn)，同時(shí)，對(duì)于依賴類型的測(cè)試。依賴注入方式，可以將代碼耦合性降到最低，而且各個(gè)模塊拓展不會(huì)互相影響，

1. 實(shí)現(xiàn)數(shù)據(jù)訪問(wèn)層，也就是前端你的數(shù)據(jù)請(qǐng)求層
2. 模塊與接口重構(gòu)，依賴注入背后的一個(gè)核心思想是單一功能原則，這意味著這些對(duì)象在系統(tǒng)的任何地方都可以重用。
3. 隨時(shí)增加單元測(cè)試，把功能封裝到整個(gè)對(duì)象里面會(huì)導(dǎo)致自動(dòng)測(cè)試?yán)щy或者不可能。將模塊和接口與特定對(duì)象隔離，以這種方式重構(gòu)可以執(zhí)行更先進(jìn)的單元測(cè)試。

Vue中使用

上面寫的例子也只是對(duì)依賴注入見(jiàn)單的使用，在項(xiàng)目過(guò)程中往往就不是這么簡(jiǎn)單了，肯定不會(huì)向例子這么簡(jiǎn)單，而是很復(fù)雜很龐大的一個(gè)項(xiàng)目。項(xiàng)目中分為各種各樣的模塊，這種情況又改如何處理?在JavaScript中常見(jiàn)的就是依賴注入。從名字上理解，所謂依賴注入，即組件之間的依賴關(guān)系由容器在運(yùn)行期決定，形象的來(lái)說(shuō)，即由容器動(dòng)態(tài)的將某種依賴關(guān)系注入到組件之中。

前端項(xiàng)目中并不像后端一樣，各種各樣的類，雖然前端可以寫class，若是React項(xiàng)目的話，還會(huì)好很多，由于其框架使用，全部是基于class但是在vue項(xiàng)目中，又應(yīng)該怎么具體體現(xiàn)呢?頁(yè)面中的業(yè)務(wù)也是可以作為類存在最終注入到Vue頁(yè)面中，最終完成業(yè)務(wù)邏輯。

 

 

 

 

通過(guò)依賴注入到底想要達(dá)到到什么效果呢，依賴注入最終想要達(dá)成的效果則是，頁(yè)面的表現(xiàn)與業(yè)務(wù)相脫離，從本質(zhì)上來(lái)說(shuō)，頁(yè)面的展現(xiàn)形式與業(yè)務(wù)邏輯其實(shí)沒(méi)有根本聯(lián)系的。若使用這種依賴注入的形式，則可以輕松的把業(yè)務(wù)和頁(yè)面表現(xiàn)分離開，頁(yè)面更加的專注于展示，而所注入的東西則更加的專注于業(yè)務(wù)的處理。項(xiàng)目也則會(huì)變得容易維護(hù)。

index.vue

<template> 
  <div> 
    <el-button @click="getList" 
              :loadding="loadding">獲取表格數(shù)據(jù)</el-button> 
    <ul> 
      <li v-for="(item,index) of list" 
          :key="index">{{item}}</li> 
    </ul> 
  </div> 
</template> 
<script> 
import operation from "@/business/index/Operation.js"; 
export default { 
  data() { 
    return { 
      list: [], 
      query:{}, 
      loadding:false 
    } 
  }, 
  methods:{ 
    async getList(){ 
      let {query} = this; 
      this.loadding = true; 
      try{ 
        this.list = await operation.getData.call(this,query); 
      }catch(error){ 
        console.log(error) 
      } 
      this.loadding =false; 
    } 
  } 
} 
</script> 
<style> 
@import "@/style/index.vue"; 
</style> 

 

 

 

operations.js

 

import request from "@/api/errorList/index.js"; 
class Operation { 
    async getData(query){ 
        //  this 指向Vue實(shí)例 
        try { 
            let res = await request.getErrorList(query); 
            let {list} = res; 
            //  這里可以對(duì)數(shù)據(jù)進(jìn)行二次處理 
            //  寫一些其他業(yè)務(wù) 
            Promise.resolve(list); 
        }catch(error){ 
            Promise.reject(error); 
        } 
    } 
}; 
export default new Operation(); 

 

上面也是在項(xiàng)目中的一個(gè)簡(jiǎn)單的應(yīng)用，使頁(yè)面表現(xiàn)數(shù)據(jù)請(qǐng)求與數(shù)據(jù)處理，業(yè)務(wù)相脫離，讓項(xiàng)目變得更加容易維護(hù)。

控制反轉(zhuǎn)這里控制權(quán)從使用者本身轉(zhuǎn)移到第三方容器上，而非是轉(zhuǎn)移到被調(diào)用者上，這里需要明確不要疑惑?？刂品崔D(zhuǎn)是一種思想，依賴注入是一種設(shè)計(jì)模式。

依賴注入最終想要達(dá)到的目的，首先得為模塊依賴提供抽象的接口，下來(lái)應(yīng)該能夠注冊(cè)依賴關(guān)系

在注冊(cè)這個(gè)依賴關(guān)系后有地方存儲(chǔ)它，存儲(chǔ)后，我們應(yīng)該把被依賴的模塊注入依賴模塊中，注入應(yīng)該保持被傳遞函數(shù)的作用域，被傳遞的函數(shù)應(yīng)該能夠接受自定義參數(shù)，而不僅僅是依賴描述。

總結(jié)

在JavaScript中依賴注入的概念不像Java中被經(jīng)常提到，主要原因是在js中很容易就實(shí)現(xiàn)了這種動(dòng)態(tài)依賴。其實(shí)我們大部分人都用過(guò)依賴注入，只是我們沒(méi)有意識(shí)到。即使你不知道這個(gè)術(shù)語(yǔ)，你可能在你的代碼里用到它百萬(wàn)次了。希望這篇文章能加深你對(duì)它的了解。

需要注意的是，依賴注入只是控制反轉(zhuǎn)的一種實(shí)現(xiàn)方式，正確的依賴管理是每個(gè)開發(fā)周期中的關(guān)鍵過(guò)程。JavaScript 生態(tài)提供了不同的工具，作為開發(fā)者的我們應(yīng)該挑選最適合自己的工具。