深入理解Javascript裡的依賴注入_javascript技巧

遲早你需要用到其他開發人員的抽象成果－也就是你依賴別人的程式碼。我喜歡依賴自由（無依賴）的模組，但那是難以實現的。甚至你創建的那些漂亮的黑盒子組件也或多或少會依賴一些東西。這正是依賴注入大顯身手的之處。現在有效地管理依賴的能力是絕對必要的。本文總結了我對問題探索和一些的解決方案。

一、目標
設想我們有兩個模組。第一個是負責Ajax請求服務（service），第二個是路由（router）。

複製程式碼 程式碼如下:

var service = function() {


var service = function() {
name: 'Service' };
}

var router = function() {
    return { name: 'Router' };
}

我們有另一個函數需要用到這兩個模組。 複製程式碼

程式碼如下:


var doSomething = function(>

var doSomething = function(>

var doothersthing = s = service();    var r = router();};為使看起來更有趣，這函數接受一個參數。當然，我們完全可以使用上面的程式碼，但這顯然不夠靈活。如果我們想使用ServiceXML或ServiceJSON呢,或者如果我們需要一些測試模組呢。我們不能只靠編輯函數體來解決問題。首先，我們可以透過函數的參數來解決依賴性。即：

複製程式碼


程式碼如下:

var doSomething = function(>

var doSomething = function(.router, unction ) {

    var s = service();
    var r = router();
};

我們透過傳遞額外的參數來實現我們想要的功能，然而，這會帶來新的問題。想像如果我們的doSomething 方法散落在我們的程式碼中。如果我們需要更改依賴條件，我們不可能更改所有呼叫函數的檔案。

我們需要一個能幫我們搞定這些的工具。這就是依賴注入嘗試解決的問題。讓我們寫下一些我們的依賴注入解決辦法應該達到的目標：

我們應該能夠註冊依賴關係

1.注入應該接受一個函數，並返回一個我們需要的函數2.我們不能寫太多東西——我們需要精簡漂亮的語法3 .注入應該保持被傳遞函數的作用域4.被傳遞的函數應該能夠接受自訂參數，而不僅僅是依賴描述5.堪稱完美的清單，下面讓我們實現它。 三、RequireJS / AMD的方法你可能對RequireJS早有耳聞，它是解決依賴注入不錯的選擇。

複製程式碼

程式碼如下:

define(['service', 'router'], 'router'] function(service, router) {           // ...});這個想法是先描述所需的依賴，然後再寫你的函數。這裡參數的順序很重要。如上所說，讓我們寫一個叫做injector的模組，能接受相同的語法。

複製程式碼

程式碼如下:


var doSomethingve = injector.resolthingve(Ojector.resolthingve, '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) {
  resolve: function(deps, func, scope) {

    }}

這是一個非常簡單的對象，有兩個方法，一個用來儲存的屬性。我們要做的是檢查deps數組並在dependencies變數中搜尋答案。剩下的只是呼叫.apply方法並傳遞之前的func方法的參數。

複製程式碼 程式碼如下:

resolve: function(deps, func, scope) {

    var args = [];
    for(var i=0; i     args.push(this.dependencies[d]);
        } else {
              }
    return function() {
        func.apply(scope || {}, args.concat(Array.prototype.slice.call(arguments, 0)));
   的，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*^(]*(s*^(]*(s*^(]*(s*^(]*(s*^(]*(s*^(]*(s* ([^)]*))/m我們可以像下面這樣修改resolve 的程式碼：

複製程式碼

複製程式碼

程式碼如下:resolve: function() {    var func, deps, scope, args = [], ) {

    var func, deps, scope, args = [], uncf = this;

 🎜>    deps = func.toString().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split (',');
    scope = arguments[1] || {};
    return function() {
        var a = Array.prototype。 for(var i=0; i            var d = deps[i];
      [d] : a.shift());
        }
        func.apply(scope || {}, args);   func.apply(scope || {}, args);   式的結果如下：




複製程式碼

程式碼如下:

["function (serviceservice, router,, service other)", "service, router, other"]
看起來，我們只需要第二項。一旦我們清楚空格並分割字串就得到deps數組。只有一個大的改變：

複製程式碼 程式碼如下:

var a = Array.prototype = Array.prototype .slice.call(arguments, 0);
...
args.push(self.dependencies[d] && d != '' ? self.dependencies[d] : a.shift());

我們循環遍歷dependencies數組，如果發現缺失項則嘗試從arguments物件中取得。謝天謝地，當數組為空時，shift方法只是返回undefined，而不是拋出錯誤（這得益於web的思想）。新版的injector 可以像下面這樣使用：

複製程式碼 程式碼如下:

injector.resolve(function(service, other, router) {
    expect(service().name).to.be('Service');
    expect(router().name).to.be(>    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 = {


var injector = { }.
    register: function(key, value) {
        this.dependencies[key] = value;
   unc, deps, scope, args = [], self = this;
        if(typeof arguments[0] === 'string') {
         ments[0].replace(/ /g , '').split(',');
            scope = arguments[2] || {};
      🎜>            deps = func.toString ().match(/^functions*[^(]*(s*([^)]*))/m)[1].replace(/ /g, '').split(',');
            scope = arguments[1] || {};
        }
   a = Array.prototype.slice.call(arguments, 0);
            for(var i=0; i                var d = deps[i];
    '' ? self.dependencies[d] : a.shift());
            }
           , 🎜>    }
}

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 = {


var injector = { }.
    register: function(key, value) {
        this.dependencies[key] = value;
       var args = [ ];
        scope = scope || {};
        for(var i=0; i            if(this.dependencies[d] ) {
                scope[d] = this.dependencies[d];
         throw new Error('Can't resolve ' d);
            }
        }

        }
return function() {
            func.apply(scope || {}, Array.prototype.slice.call(arguments, 🎜>}

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

複製程式碼 程式碼如下:

var doSomethingve = injector.resolthingve(Ojector.resolthingve, 'router'], function(other) {

    expect(this.service().name).to.be('Service');
    expect(this.router().name).to.be ('Router');
    expect(other).to.be('Other');
});
doSomething("Other");

六、結束語

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