本文實例講述了JavaScript反射與依賴注入。分享給大家供大家參考，具體如下：
對于javascript中的反射的理解，一直都是認為，利用數組對回調函數進行保存，之后在適當的時刻利用call或是apply 方法，對回調進行調用即可，一般如下操作：
首先定義兩個方法：
var service = function() { return { name: 'Service' };}var router = function() { return { name: 'Router' };}我們有另一個函數需要用到這兩個模塊。
var doSomething = function(other) { var s = service(); var r = router();};當然，我們希望能夠能夠使用依賴注入的方式去做，把該控制權交給計算機去做，而不是人為的去調用如下：
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");那么我們可以造出一個反射方法如下：
var injector ={ dependencies: {}, register: function(key, value) { this.dependencies[key] = value; }, 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))); } }};如上代碼,dependencies 用來保存回調函數集合，resolve用來調用。
這也算是一個比較成熟ok的想法。
但是依舊存在幾點問題：
1 resolve 在進行調用時，deps參數列表順序必須保持一致。
2 這一點有點牽強，但是也算。在調用時，需要再一次的輸入形參，而不能直接調用。
那么為了解決以上問題，給出以下解決方案：
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*([^]*/(/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 列表參數，再進行一一自動匹配傳值，那么即可解決，順序必須一直問題，當然這也是當然最熱mvvm框架AngularJs采取的方式。
調用方式可以如下：
injector.resolve(['service,,router', function(service, router) {}]);你可能注意到在第一個參數后面有兩個逗號――注意
這不是筆誤。空值實際上代表“Other”參數（占位符）。這顯示了我們是如何控制參數順序的。
最后還有一種方式，直接注入scope ，也就是直接注入作用域，那么作用域被注入，也就不存在上述的傳參順序問題
因為不在需要傳遞參數，直接可以從作用域中訪問到。
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");javascript反射依賴注入新的理解，記錄之，謹防忘記.
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
