這次帶給大家JS反射與依賴注入使用案例分析，JS反射與依賴注入使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

對於javascript中的反射的理解，一直都是認為，利用數(shù)組對回調(diào)函數(shù)進行保存，之後在適當?shù)臅r刻利用call或apply 方法，對回呼進行呼叫即可，一般如下操作：

首先定義兩個方法：

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

我們有另一個函數(shù)需要用到這兩個模組。

var?doSomething?=?function(other)?{
??var?s?=?service();
??var?r?=?router();
};

當然，我們希望能夠使用依賴注入的方式去做，把該控制權(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 用來保存回呼函數(shù)集合，resolve用來呼叫。

這也算是比較成熟ok的想法。

但是依舊問題存在幾點問題：

1 resolve 在進行呼叫時，deps參數(shù)列表順序必須保持一致。

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);
??????}
????}
};

利用正規(guī)對程式碼進行解析，解析出function 列表參數(shù)，再進行一一自動匹配傳值，那麼即可解決，順序必須一直問題，當然這也是當然最熱mvvm框架AngularJs採取的方式。

呼叫方式可以如下：

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");

我相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何在微信小程式內(nèi)開發(fā)驗證碼密碼輸入框功能

如何使用js統(tǒng)計頁面標籤數(shù)量

以上是JS反射與依賴注入使用案例分析的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！