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程式碼中獲取引數的正規表示式。

/^function\s*[^\(]*\(\s*([^\)]*)\)/m

我們可以像下面這樣修改resolve 的程式碼：

resolve: function() {
    var func, deps, scope, args = [], self = this;
    func = arguments[0];
    deps = func.toString().match(/^function\s*[^\(]*\(\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(/^function\s*[^\(]*\(\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);
        }        
    }
}

resolve訪客接受兩或三個引數，如果有兩個引數它實際上和文章前面寫的一樣。然而，如果有三個引數，它會將第一個引數轉換並填充deps陣列，下面是一個測試例子：

var doSomething = injector.resolve('router,,service', function(a, b, c) {
    expect(a().name).to.be('Router');
    expect(b).to.be('Other');
    expect(c().name).to.be('Service');
});
doSomething("Other");

你可能注意到在第一個引數後面有兩個逗號——注意這不是筆誤。空值實際上代表“Other”引數（佔位符）。這顯示了我們是如何控制引數順序的。

直接注入Scope

有時我會用到第三個注入變數，它涉及到操作函式的作用域（換句話說，就是this物件）。所以，很多時候不需要使用這個變數。

var injector = {
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {
        var args = [];
        scope = scope || {};
        for(var i=0; i<deps.length, d=deps[i]; i++) {
            if(this.dependencies[d]) {
                scope[d] = this.dependencies[d];
            } else {
                throw new Error('Can\'t resolve ' + d);
            }
        }
        return function() {
            func.apply(scope || {}, Array.prototype.slice.call(arguments, 0));
        }        
    }
}

我們所做的一切其實就是將依賴新增到作用域。這樣做的好處是，開發人員不用再寫依賴性引數；它們已經是函式作用域的一部分。

var doSomething = injector.resolve(['service', 'router'], function(other) {
    expect(this.service().name).to.be('Service');
    expect(this.router().name).to.be('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

結束語

其實我們大部分人都用過依賴注入，只是我們沒有意識到。即使你不知道這個術語，你可能在你的程式碼裡用到它百萬次了。希望這篇文章能加深你對它的瞭解。

在這篇文章中提到的例子都可以在這裡找到。

譯者注

本文為譯文，原文為“Dependency Injection in JavaScript”。

我的部落格 更多內容請點選這裡。