2015年8月21日 星期五

AngularJS 1.3 1.4 Dependency Injection mechanism

學習AngulaJS的時候,常常會覺得ng的依賴注入很厲害,可以直接判斷function的參數,就可以得知要注入那些物件,直到有一天看到在javascript中可以對function執行toString,這才恍然大悟!

在ng解析執行 .controller / .factory ...等provider的時候,會將參數中的function傳遞給angular.injector做處理,而injector的處理方式就是在function上執行toString

toString後 執行一個regex將所有註解清除,接著用下一個regex將 function 的參數列擷取出來,
如此就可以知道每個參數的名稱,並且進行injection了,詳細的運作方式可以參考injector.js的原始檔案,或是以下節錄片段重點程式碼

function anonFn(fn) {
  // For anonymous functions, showing at the very least the function signature can help in  // debugging.  var fnText = fn.toString().replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg, ''),
      args = fnText.match(/^[^\(]*\(\s*([^\)]*)\)/m);
  if (args) {
    return 'function(' + (args[1] || '').replace(/[\s\r\n]+/, ' ') + ')';
  }
  return 'fn';
}