依賴注入（Dependency Injection，簡稱DI）是像C#,java等典型的面嚮物件語言框架設計原則控制反轉的一種典型的一種實現方式，angular把它引入到js中，介紹angular依賴注入的使用方式的文章很多，
angular官方的文件,也有很詳細的說明。但介紹原理的較少，angular程式碼結構較複雜，文章實現了一簡化版本的DI,核心程式碼只有30行左右,相看實現效果（可能需FQ）或檢視原始碼

這篇文章用盡量簡單的方式說一說 angular依賴注入的實現。

簡化的實現原理

要實現注入，基本有三步：

1. 得到模組的依賴項
2. 查詢依賴項所對應的物件
3. 執行時注入

1. 得到模組的依賴項

javascript 實現DI的核心api是Function.prototype.toString

functionextractArgs(fn) { //angular 這裡還加了註釋、箭頭函式的處理
            var args = fn.toString().match(/^[^\(]*\(\s*([^\)]*)\)/m);
            return args[1].split(',');
        }

2. 查詢依賴項所對應的物件

java與.net通過反射來獲取依賴物件，js是動態語言，直接一個object[name]就可以直接拿到物件。所以只要用一個物件儲存物件或函式列表就可以了

functioncreateInjector(cache) {
            this.cache = cache;

        }
angular.module = function () {
            modules = {};
            injector = new createInjector(modules);
            return {
                injector: injector,
                factory: function (name, fn) {
                    modules[name
 
.trim()] = this.injector.invoke(fn); 
                    return this;
                }
            }
        };

3. 執行時注入

最後通過 fn.apply方法把執行上下文，和依賴列表傳入函式並執行：

createInjector.prototype = {
            invoke: function (fn, self) {
                argsString = extractArgs(fn);
                args = [];
                argsString.forEach(function (val) {
                    args.push(this.cache[val.trim()]);
                }, this);
                return fn.apply(self, args);
            }
        };

這裡是簡化的版本，實際angular的實現考慮了很多問題，如模組管理，延遲執行等

angular 的實現

為了簡單，我們也按這三步來介紹angular DI

1. 得到模組的依賴項
2. 查詢依賴項所對應的物件
3. 執行時注入

注：以下程式碼行數有就可能變

1. 得到模組的依賴項

var ARROW_ARG = /^([^\(]+?)=>/;
var FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m;
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;

functionextractArgs(fn) {
  var fnText = fn.toString().replace(STRIP_COMMENTS, ''),
      args = fnText.match(ARROW_ARG) || fnText.match(FN_ARGS);
  return args;
}

2. 查詢依賴項所對應的物件

    functiongetService(serviceName, caller) {
      if (cache.hasOwnProperty(serviceName)) {
        if (cache[serviceName] === INSTANTIATING) {
          throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
                    serviceName + ' <- ' + path.join(' <- '));
        }
        return cache[serviceName];
      } else {
        try {
          path.unshift(serviceName);
          cache[serviceName] = INSTANTIATING;
          return cache[serviceName] = factory(serviceName, caller);
        } catch (err) {
          if (cache[serviceName] === INSTANTIATING) {
            delete cache[serviceName];
          }
          throw err;
        } finally {
          path.shift();
        }
      }
    }

3. 執行時注入

得到引數：

    functioninjectionArgs(fn, locals, serviceName) {
      var args = [],
          $inject = createInjector.$$annotate(fn, strictDi, serviceName);

      for (var i = 0, length = $inject.length; i < length; i++) {
        var key = $inject[i];
        if (typeof key !== 'string') {
          throw $injectorMinErr('itkn',
                  'Incorrect injection token! Expected service name as string, got {0}', key);
        }
        args.push(locals && locals.hasOwnProperty(key) ? locals[key] :
                                                         getService(key, serviceName));
      }
      return args;
    }

呼叫

    functioninvoke(fn, self, locals, serviceName) {
      if (typeof locals === 'string') {
        serviceName = locals;
        locals = null;
      }

      var args = injectionArgs(fn, locals, serviceName);
      if (isArray(fn)) {
        fn = fn[fn.length - 1];
      }

      if (!isClass(fn)) {
        // http://jsperf.com/angularjs-invoke-apply-vs-switch
        // #5388
        return fn.apply(self, args);
      } else {
        args.unshift(null);
        return new (Function.prototype.bind.apply(fn, args))();
      }
    }

angular模組管理，深坑

angular在每次應用啟動時，初始化一個Injector例項：

var injector = createInjector(modules, config.strictDi);

由此程式碼可以看出對每一個Angular應用來說，無論是哪個模組，所有的"provider"都是存在相同的providerCache或cache中

所以會導致一個被譽為angular模組管理的坑王的問題：
module 並沒有什麼名稱空間的作用，當依賴名相同的時候，後面引用的會覆蓋前面引用的模組。

具體的示例可以檢視：

注：angular di用本文的呼叫方式壓縮程式碼會出問題：可以用g-annotate轉為安全的呼叫方式。

到此angular di的實現原理已完成簡單的介紹，angular用了專案中幾乎不會用到的api：Function.prototype.toString 實現依賴注入，思路比較簡單，但實際框架中考慮的問題較多，更加詳細的實現可以直接看angular的原始碼。

以後會逐步介紹angular其它原理。