JavaScript裡的依賴注入

  我喜歡引用這句話，“程序是對復雜性的管理”。計算機世界是一個巨大的抽象建築群。我們簡單的包裝一些東西然後發布新工具，周而復始。現在思考下，你所使用的語言包括的一些內建的抽象函數或是低級操作符。這在JavaScript裡是一樣的。

  遲早你需要用到其他開發人員的抽象成果——即你依靠別人的代碼。我喜歡依賴自由（無依賴）的模塊，但那是難以實現的。甚至你創建的那些漂亮的黑盒子組件也或多或少會依賴一些東西。這正是依賴注入大顯身手的之處。現在有效地管理依賴的能力是絕對必要的。本文總結了我對問題探索和一些的解決方案。   目標   設想我們有兩個模塊。第一個是負責Ajax請求服務（service），第二個是路由（router）。   var service = function() {     return { name: 'Service' }; } var router = function() {     return { name: 'Router' }; } 我們有另一個函數需要用到這兩個模塊。   var doSomething = function(other) {     var s = service();     var r = router(); }; 為使看起來更有趣，這函數接受一個參數。當然，我們完全可以使用上面的代碼，但這顯然不夠靈活。如果我們想使用ServiceXML或ServiceJSON呢,或者如果我們需要一些測試模塊呢。我們不能僅靠編輯函數體來解決問題。首先，我們可以通過函數的參數來解決依賴性。即：   var doSomething = function(service, router, other) {     var s = service();     var r = router(); }; 我們通過傳遞額外的參數來實現我們想要的功能，然而，這會帶來新的問題。想象如果我們的doSomething 方法散落在我們的代碼中。如果我們需要更改依賴條件，我們不可能更改所有調用函數的文件。   我們需要一個能幫我們搞定這些的工具。這就是依賴注入嘗試解決的問題。讓我們寫下一些我們的依賴注入解決辦法應該達到的目標：   我們應該能夠注冊依賴關系 注入應該接受一個函數，並返回一個我們需要的函數 我們不能寫太多東西——我們需要精簡漂亮的語法 注入應該保持被傳遞函數的作用域 被傳遞的函數應該能夠接受自定義參數，而不僅僅是依賴描述 堪稱完美的清單，下面 讓我們實現它。   RequireJS / AMD的方法   你可能對RequireJS早有耳聞，它是解決依賴注入不錯的選擇。   define(['service', 'router'], function(service, router) {            // ... }); 這種想法是先描述需要的依賴，然後再寫你的函數。這裡參數的順序很重要。如上所說，讓我們寫一個叫做injector的模塊，能接受相同的語法。   var doSomething = injector.resolve(['service', 'router'], function(service, router, other) {     expect(service().name).to.be('Service');     expect(router().name).to.be('Router');     expect(other).to.be('Other'); }); doSomething("Other"); 再繼續之前我應該解釋清楚doSomething函數體內容，我使用expect.js （斷言方面的庫）僅是為了保證我寫的代碼的行為和我期望的是一樣的，體現一點點TDD（測試驅動咖開發）方法。   下面開始我們的injector模塊，這是非常棒的一個單例模式，所以它能在我們程序的不同部分工作的很好。   復制代碼 var injector = {     dependencies: {},     register: function(key, value) {         this.dependencies[key] = value;     },     resolve: function(deps, func, scope) {       } } 復制代碼 這是一個非常簡單的對象，有兩個方法，一個用來存儲的屬性。我們要做的是檢查deps數組並在dependencies變量中搜索答案。剩下的只是調用.apply方法並傳遞之前的func方法的參數。   resolve: function(deps, func, scope) {     var args = [];     for(var i=0; i<deps.length, d=deps[i]; i++) {         if(this.dependencies[d]) {             args.push(this.dependencies[d]);         } else {             throw new Error('Can't resolve ' + d);         }     }     return function() {         func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));     }         } 復制代碼 scope是可選的，Array.prototype.slice.call(arguments, 0)是必須的，用來將arguments變量轉換為真正的數組。到目前為止還不錯。我們的測試通過了。這種實現的問題是，我們需要寫所需部件兩次，並且我們不能混淆他們的順序。附加的自定義參數總是位於依賴之後。   反射方法   根據維基百科的定義反射是指一個程序在運行時檢查和修改一個對象的結構和行為的能力。簡單的說，在JavaScript的上下文裡，這具體指讀取和分析的對象或函數的源代碼。讓我們完成文章開頭提到的doSomething函數。如果你早控制台輸出doSomething.tostring()日志。你將得到如下的字符串：   "function (service, router, other) {     var s = service();     var r = router(); }" 通過此方法返回的字符串給我們遍歷參數的能力，更重要的是，能夠獲取他們的名字。這其實是Angular 實現它的依賴注入的方法。我偷了一點懶，直接截取Angular代碼中獲取參數的正則表達式。   /^functions*[^(]*(s*([^)]*))/m 我們可以像下面這樣修改resolve 的代碼：     resolve: function() {     var func, deps, scope, args = [], self = this;     func = arguments[0];     deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');     scope = arguments[1] || {};     return function() {         var a = Array.prototype.slice.call(arguments, 0);         for(var i=0; i<deps.length; i++) {             var d = deps[i];             args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());         }         func.apply(scope || {}, args);     }         }   我們執行正則表達式的結果如下：   ["function (service, router, other)", "service, router, other"] 看起來，我們只需要第二項。一旦我們清楚空格並分割字符串就得到deps數組。只有一個大的改變：   var a = Array.prototype.slice.call(arguments, 0); ... args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift()); 我們循環遍歷dependencies數組，如果發現缺失項則嘗試從arguments對象中獲取。謝天謝地，當數組為空時，shift方法只是返回undefined，而不是拋出一個錯誤（這得益於web的思想）。新版的injector 能像下面這樣使用：   var doSomething = injector.resolve(function(service, other, router) {     expect(service().name).to.be('Service');     expect(router().name).to.be('Router');     expect(other).to.be('Other'); }); doSomething("Other"); 不必重寫依賴並且他們的順序可以打亂。它仍然有效，我們成功復制了Angular的魔法。   然而，這種做法並不完美，這就是反射類型注射一個非常大的問題。壓縮會破壞我們的邏輯，因為它改變參數的名字，我們將無法保持正確的映射關系。例如，doSometing()壓縮後可能看起來像這樣：   var doSomething=function(e,t,n){var r=e();var i=t()} Angular團隊提出的解決方案看起來像：   var doSomething = injector.resolve(['service', 'router', function(service, router) {   }]); 這看起來很像我們開始時的解決方案。我沒能找到一個更好的解決方案，所以決定結合這兩種方法。下面是injector的最終版本。     var injector = {     dependencies: {},     register: function(key, value) {         this.dependencies[key] = value;     },     resolve: function() {         var func, deps, scope, args = [], self = this;         if(typeof arguments[0] === 'string') {             func = arguments[1];             deps = arguments[0].replace(/ /g, '').split(',');             scope = arguments[2] || {};         } else {             func = arguments[0];             deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');             scope = arguments[1] || {};