前端的技術(shù)的極速發(fā)展，對(duì)前端同學(xué)來說也是一個(gè)不小的挑戰(zhàn)，有各種各樣的東西需要學(xué)，在開發(fā)過程中經(jīng)常會(huì)被后端同學(xué)嘲諷，對(duì)于前端來講根本就不存在類的概念，很多時(shí)候需要把大量的業(yè)務(wù)代碼堆積在頁面或者組件中，使組件和頁面變得特別的臃腫，一旦業(yè)務(wù)邏輯復(fù)雜的情況下，及時(shí)組件化做的很好，仍然避免不了難以維護(hù)。
之所以會(huì)被后端同學(xué)嘲諷，一基礎(chǔ)掌握不扎實(shí)，對(duì)前端理解不到位，二缺乏面向?qū)ο笏枷耄龑?duì)業(yè)務(wù)與基礎(chǔ)傻傻分不清楚。ECMAScript 2015與Type Script的推出，提出了一個(gè)很重要的概念就是class(類)的概念。在沒有class之前為了前端能夠有類的概念，一直都是使用構(gòu)造函數(shù)模擬類的概念，通過原型完成繼承。
雖然前端提出了很多概念(模塊化，組件化...)，個(gè)人覺得面向?qū)ο蟮膽?yīng)用是前端對(duì)于項(xiàng)目以及整體架構(gòu)來講是一件利器，代碼結(jié)構(gòu)好與壞與面向?qū)ο笥幸欢ǖ年P(guān)系，但不是全部。不過我們可以借助計(jì)算機(jī)領(lǐng)域的一些優(yōu)秀的編程理念來一定程度上解決這些問題，接下來簡單的說下依賴注入(控制反轉(zhuǎn))。
什么是依賴注入
依賴注入一般指控制反轉(zhuǎn)，是面向?qū)ο缶幊讨械囊环N設(shè)計(jì)原則，可以用來減低計(jì)算機(jī)代碼之間的耦合度。其中最常見的方式叫做依賴注入，還有一種方式叫依賴查找。通過控制反轉(zhuǎn)，對(duì)象在被創(chuàng)建的時(shí)候，由一個(gè)調(diào)控系統(tǒng)內(nèi)所有對(duì)象的外界實(shí)體將其所依賴的對(duì)象的引用傳遞給它。也可以說，依賴被注入到對(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ū)ο?大原則：
詳細(xì)解釋參照：面向?qū)ο笾叽蠡驹瓌t(javaScript)
然而使用依賴注入的事為了降低代碼的耦合程度，提高代碼的可拓展性。以上都是一些面向?qū)ο蟮乃枷?，我們參考一下以上最重要的幾個(gè)原則，層模塊不應(yīng)該依賴低層模塊。兩個(gè)都應(yīng)該依賴抽象，抽象不應(yīng)該依賴具體實(shí)現(xiàn)，具體實(shí)現(xiàn)應(yīng)該依賴抽象。
依賴注入的作用
初始化被依賴的模塊
如果不通過依賴注入模式來初始化被依賴的模塊，那么就要依賴模塊自己去初始化了
那么問題來了：依賴模塊就耦合了被依賴模塊的初始化信息了
注入到依賴模塊中
被依賴模塊已經(jīng)被其他管理器初始化了，那么依賴模塊要怎么獲取這個(gè)模塊呢?
有兩種方式：
- 自己去問
- 別人主動(dòng)給你
沒用依賴注入模式的話是1，用了之后就是2
想想，你需要某個(gè)東西的時(shí)候，你去找別人要，你需要提供別人什么信息?最簡單的就是那個(gè)東西叫什么，即你需要提供一個(gè)名稱。所以，方式1的問題是：依賴模塊耦合了被依賴模塊的名稱還有那個(gè)別人而方式2解決了這個(gè)問題，讓依賴模塊只依賴需要的模塊的接口。
依賴注入的優(yōu)點(diǎn)
依賴注入降低了依賴和被依賴類型間的耦合，在修改被依賴的類型實(shí)現(xiàn)時(shí)，不需要修改依賴類型的實(shí)現(xiàn)，同時(shí)，對(duì)于依賴類型的測試。依賴注入方式，可以將代碼耦合性降到最低，而且各個(gè)模塊拓展不會(huì)互相影響，
Vue中使用
上面寫的例子也只是對(duì)依賴注入見單的使用，在項(xiàng)目過程中往往就不是這么簡單了，肯定不會(huì)向例子這么簡單，而是很復(fù)雜很龐大的一個(gè)項(xiàng)目。項(xiàng)目中分為各種各樣的模塊，這種情況又改如何處理?在JavaScript中常見的就是依賴注入。從名字上理解，所謂依賴注入，即組件之間的依賴關(guān)系由容器在運(yùn)行期決定，形象的來說，即由容器動(dòng)態(tài)的將某種依賴關(guān)系注入到組件之中。
前端項(xiàng)目中并不像后端一樣，各種各樣的類，雖然前端可以寫class，若是React項(xiàng)目的話，還會(huì)好很多，由于其框架使用，全部是基于class但是在vue項(xiàng)目中，又應(yīng)該怎么具體體現(xiàn)呢?頁面中的業(yè)務(wù)也是可以作為類存在最終注入到Vue頁面中，最終完成業(yè)務(wù)邏輯。
通過依賴注入到底想要達(dá)到到什么效果呢，依賴注入最終想要達(dá)成的效果則是，頁面的表現(xiàn)與業(yè)務(wù)相脫離，從本質(zhì)上來說，頁面的展現(xiàn)形式與業(yè)務(wù)邏輯其實(shí)沒有根本聯(lián)系的。若使用這種依賴注入的形式，則可以輕松的把業(yè)務(wù)和頁面表現(xiàn)分離開，頁面更加的專注于展示，而所注入的東西則更加的專注于業(yè)務(wù)的處理。項(xiàng)目也則會(huì)變得容易維護(hù)。
index.vue
operations.js
上面也是在項(xiàng)目中的一個(gè)簡單的應(yīng)用，使頁面表現(xiàn)數(shù)據(jù)請(qǐng)求與數(shù)據(jù)處理，業(yè)務(wù)相脫離，讓項(xiàng)目變得更加容易維護(hù)。
控制反轉(zhuǎn)這里控制權(quán)從使用者本身轉(zhuǎn)移到第三方容器上，而非是轉(zhuǎn)移到被調(diào)用者上，這里需要明確不要疑惑。控制反轉(zhuǎn)是一種思想，依賴注入是一種設(shè)計(jì)模式。
依賴注入最終想要達(dá)到的目的，首先得為模塊依賴提供抽象的接口，下來應(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í)我們大部分人都用過依賴注入，只是我們沒有意識(shí)到。即使你不知道這個(gè)術(shù)語，你可能在你的代碼里用到它百萬次了。希望這篇文章能加深你對(duì)它的了解。
需要注意的是，依賴注入只是控制反轉(zhuǎn)的一種實(shí)現(xiàn)方式，正確的依賴管理是每個(gè)開發(fā)周期中的關(guān)鍵過程。JavaScript 生態(tài)提供了不同的工具，作為開發(fā)者的我們應(yīng)該挑選最適合自己的工具。
【責(zé)任編輯：龐桂玉 TEL：（010）68476606】