計算機編程的世界其實就是一個將簡單的部分不斷抽象，并將這些抽象組織起來的過程。JavaScript也不例外，在我們使用JavaScript編寫應用時，我們是不是都會使用到別人編寫的代碼，例如一些著名的開源庫或者框架。隨著我們項目的增長，我們需要依賴的模塊變得越來越多，這個時候，如何有效的組織這些模塊就成了一個非常重要的問題。依賴注入解決的正是如何有效組織代碼依賴模塊的問題。你可能在一些框架或者庫種聽說過“依賴注入”這個詞，比如說著名的前端框架AngularJS，依賴注入就是其中一個非常重要的特性。但是，依賴注入根本就不是什么新鮮玩意，它在其他的編程語言例如PHP中已經(jīng)存在已久。同時，依賴注入也沒有想象種那樣復雜。在本文中，我們將一起來學習JavaScript中的依賴注入的概念，深入淺出的講解如何編寫“依賴注入風格”的代碼。

目標設(shè)定

假設(shè)我們現(xiàn)在擁有兩個模塊。第一個模塊的作用是發(fā)送Ajax請求，而第二個模塊的作用則是用作路由。

這時，我們編寫了一個函數(shù)，它需要使用上面提到的兩個模塊：

在這里，為了讓我們的代碼變得有趣一些，這個參數(shù)需要多接收幾個參數(shù)。當然，我們完全可以使用上面的代碼，但是無論從哪個方面來看上面的代碼都略顯得不那么靈活。要是我們需要使用的模塊名稱變?yōu)镾erviceXML或者ServiceJSON該怎么辦？或者說如果我們基于測試的目的想要去使用一些假的模塊改怎么辦。這時，我們不能僅僅去編輯函數(shù)本身。因此我們需要做的第一件事情就是將依賴的模塊作為參數(shù)傳遞給函數(shù)，代碼如下所示：

在上面的代碼中，我們完全傳遞了我們所需要的模塊。但是這又帶來了一個新的問題。假設(shè)我們在代碼的哥哥部分都調(diào)用了doSomething方法。這時，如果我們需要第三個依賴項該怎么辦。這個時候，去編輯所有的函數(shù)調(diào)用代碼并不是一個明智的方法。因此，我們需要一段代碼來幫助我們做這件事情。這就是依賴注入器試圖去解決的問題?，F(xiàn)在我們可以來定下我們的目標了：

1.我們應該能夠去注冊依賴項
2.依賴注入器應該接收一個函數(shù)，然后返回一個能夠獲取所需資源的函數(shù)
3.代碼不應該復雜，而應該簡單友好
4.依賴注入器應該保持傳遞的函數(shù)作用域
5.傳遞的函數(shù)應該能夠接收自定義的參數(shù)，而不僅僅是被描述的依賴項

requirejs/AMD方法

或許你已經(jīng)聽說過了大名鼎鼎的requirejs，它是一個能夠很好的解決依賴注入問題的庫：

requirejs的思想是首先我們應該去描述所需要的模塊，然后編寫你自己的函數(shù)。其中，參數(shù)的順序很重要。假設(shè)我們需要編寫一個叫做injector的模塊，它能夠?qū)崿F(xiàn)類似的語法。

在繼續(xù)往下之前，需要說明的一點是在doSomething的函數(shù)體中我們使用了expect.js這個斷言庫來確保代碼的正確性。這里有一點類似TDD(測試驅(qū)動開發(fā))的思想。

現(xiàn)在我們正式開始編寫我們的injector模塊。首先它應該是一個單體，以便它能夠在我們應用的各個部分都擁有同樣的功能。

這個對象非常的簡單，其中只包含兩個函數(shù)以及一個用于存儲目的的變量。我們需要做的事情是檢查deps數(shù)組，然后在dependencies變量種尋找答案。剩余的部分，則是使用.apply方法去調(diào)用我們傳遞的func變量：

如果你需要指定一個作用域，上面的代碼也能夠正常的運行。

在上面的代碼中，Array.prototype.slice.call(arguments, 0)的作用是將arguments變量轉(zhuǎn)換為一個真正的數(shù)組。到目前為止，我們的代碼可以完美的通過測試。但是這里的問題是我們必須要將需要的模塊寫兩次，而且不能夠隨意排列順序。額外的參數(shù)總是排在所有的依賴項之后。

反射(reflection)方法

根據(jù)維基百科中的解釋，反射(reflection)指的是程序可以在運行過程中，一個對象可以修改自己的結(jié)構(gòu)和行為。在JavaScript中，簡單來說就是閱讀一個對象的源碼并且分析源碼的能力。還是回到我們的doSomething方法，如果你調(diào)用doSomething.toString()方法，你可以獲得下面的字符串:

這樣一來，只要使用這個方法，我們就可以輕松的獲取到我們想要的參數(shù)，以及更重要的一點就是他們的名字。這也是AngularJS實現(xiàn)依賴注入所使用的方法。在AngularJS的代碼中，我們可以看到下面的正則表達式：

我們可以將resolve方法修改成如下所示的代碼：

我們使用上面的正則表達式去匹配我們定義的函數(shù)，我們可以獲取到下面的結(jié)果：

此時，我們只需要第二項。但是一旦我們?nèi)コ硕嘤嗟目崭癫⒁?來切分字符串以后，我們就得到了deps數(shù)組。下面的代碼就是我們進行修改的部分：

在上面的代碼中，我們遍歷了依賴項目，如果其中有缺失的項目，如果依賴項目中有缺失的部分，我們就從arguments對象中獲取。如果一個數(shù)組是空數(shù)組，那么使用shift方法將只會返回undefined，而不會拋出一個錯誤。到目前為止，新版本的injector看起來如下所示：

在上面的代碼中，我們可以隨意混淆依賴項的順序。

但是，沒有什么是完美的。反射方法的依賴注入存在一個非常嚴重的問題。當代碼簡化時，會發(fā)生錯誤。這是因為在代碼簡化的過程中，參數(shù)的名稱發(fā)生了變化，這將導致依賴項無法解析。例如：

因此我們需要下面的解決方案，就像AngularJS中那樣：

這和最一開始看到的AMD的解決方案很類似，于是我們可以將上面兩種方法整合起來，最終代碼如下所示：

這一個版本的resolve方法可以接受兩個或者三個參數(shù)。下面是一段測試代碼：

你可能注意到了兩個逗號之間什么都沒有，這并不是錯誤。這個空缺是留給Other這個參數(shù)的。這就是我們控制參數(shù)順序的方法。

結(jié)語

在上面的內(nèi)容中，我們介紹了幾種JavaScript中依賴注入的方法，希望本文能夠幫助你開始使用依賴注入這個技巧，并且寫出依賴注入風格的代碼。

最新評論