本文實例講述了JavaScript反射與依賴注入。分享給大家供大家參考,具體如下:
在鄯善等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供網(wǎng)站制作、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需定制,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站建設(shè),鄯善網(wǎng)站建設(shè)費用合理。
對于javascript中的反射的理解,一直都是認(rèn)為,利用數(shù)組對回調(diào)函數(shù)進行保存,之后在適當(dāng)?shù)臅r刻利用call或是apply 方法,對回調(diào)進行調(diào)用即可,一般如下操作:
首先定義兩個方法:
var service = function() { return { name: 'Service' }; } var router = function() { return { name: 'Router' }; }
我們有另一個函數(shù)需要用到這兩個模塊。
var doSomething = function(other) { var s = service(); var r = router(); };
當(dāng)然,我們希望能夠能夠使用依賴注入的方式去做,把該控制權(quán)交給計算機去做,而不是人為的去調(diào)用如下:
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 用來保存回調(diào)函數(shù)集合,resolve用來調(diào)用。
這也算是一個比較成熟ok的想法。
但是依舊存在幾點問題:
1 resolve 在進行調(diào)用時,deps參數(shù)列表順序必須保持一致。
2 這一點有點牽強,但是也算。在調(diào)用時,需要再一次的輸入形參,而不能直接調(diào)用。
那么為了解決以上問題,給出以下解決方案:
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 列表參數(shù),再進行一一自動匹配傳值,那么即可解決,順序必須一直問題,當(dāng)然這也是當(dāng)然最熱mvvm框架AngularJs采取的方式。
調(diào)用方式可以如下:
injector.resolve(['service,,router', function(service, router) { }]);
你可能注意到在第一個參數(shù)后面有兩個逗號——注意
這不是筆誤??罩祵嶋H上代表“Other”參數(shù)(占位符)。這顯示了我們是如何控制參數(shù)順序的。
最后還有一種方式,直接注入scope ,也就是直接注入作用域,那么作用域被注入,也就不存在上述的傳參順序問題
因為不在需要傳遞參數(shù),直接可以從作用域中訪問到。
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反射依賴注入新的理解,記錄之,謹(jǐn)防忘記.
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞標(biāo)題:JavaScript反射與依賴注入實例詳解
網(wǎng)頁URL:http://www.rwnh.cn/article28/pdejcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計、定制開發(fā)、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)