一、概述
AngularJS有一经典之处就是依赖注入，对于什么是依赖注入，熟悉spring的同学应该都非常了解了，但，对于前端而言，还是比较新颖的。
依赖注入，简而言之，就是解除硬编码，达到解偶的目的。
下面，我们看看AngularJS中常用的实现方式。
方法一：推断式注入声明，假定参数名称就是依赖的名称。因此，它会在内部调用函数对象的toString()方法，分析并提取出函数参数列表，然后通过$injector将这些参数注入进对象实例。
如下：
//方法一：推断式注入声明，假定参数名称就是依赖的名称。
//因此，它会在内部调用函数对象的toString()方法，分析并提取出函数参数列表，
//然后通过$injector将这些参数注入进对象实例
injector.invoke(function($http, $timeout){
//TODO
});
方法二：行内注入声明，允许我们在函数定义时，直接传入一个参数数组，数组包含了字符串和函数，其中，字符串代表依赖名，函数代表目标函数对象。
如下：
//方法二：行内注入声明，允许我们在函数定义时，直接传入一个参数数组，
//数组包含了字符串和函数，其中，字符串代表依赖名，函数代表目标函数对象。
module.controller('name', ['$http', '$timeout', function($http, $timeout){
//TODO
}]);
看了上述代码，心中有一疑问，这些是怎么实现的呢？
哈哈，下面，我们就来一起模拟一下这些依赖注入方式，从而了解它们。
二、搭建基本骨架
依赖注入的获取过程就是，通过字段映射，从而获取到相应的方法。
故而，要实现一个基本的依赖注入，我们需要一个存储空间（dependencies），存储所需键值（key/value）；一个注册方法（register），用于新增键值对到存储空间中；还有一个就是核心实现方法（resolve），通过相关参数，到存储空间中获得对应的映射结果。
So，基本骨架如下：
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(){
}
};
三、完善核心方法resolve
从我们搭建的基本骨架中，可以发现，重点其实resolve方法，用于实现我们具体形式的依赖注入需求。
首先，我们来实现，如下形式的依赖注入：推断式注入声明。
如下：
injector.resolve(function(Monkey, Dorie){
Monkey();
Dorie();
});
要实现上述效果，我们可以利用函数的toString()方法，我们可以将函数转换成字符串，从而通过正则表达式获得参数名，即key值。 然后通过key值，在存储空间dependencies找value值，没找到对应值，则报错。
实现如下：
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(){
var func, deps, args = [], scope = null;
func = arguments[0];
//获取函数的参数名
deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
scope = arguments[1] || {};
for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
func.apply(scope, args);
}
};
测试代码，如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(){
var func, deps, args = [], scope = null;
func = arguments[0];
//获取函数的参数名
deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
scope = arguments[1] || {};
for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
func.apply(scope, args);
}
};
//测试代码
injector.register('Monkey', function(){
console.log('Monkey');
}).register('Dorie', function(){
console.log('Dorie');
});
injector.resolve(function(Monkey, Dorie){
Monkey();
Dorie();
console.log('-.-');
});
</script>
</body>
</html>
推断式注入声明，有个缺点，就是不能利用压缩工具压缩，因为我们是通过函数的参数作为依赖的，当我们压缩时，会将参数名改掉，参数名都变了，那肯定扑街咯。
那么下面，我们就看看行内注入声明，它可以弥补这缺点。
实现行内注入声明，如下：
injector.resolve(['Monkey', 'Dorie', function(M, D){
M();
D();
}]);
利用typeof判断arguments[0]的类型可以辨别并获得依赖参数和函数。
实现如下：
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(){
var firstParams, func, deps = [], scope = null, args = [];
firstParams = arguments[0];
scope = arguments[1] || {};
//获得依赖参数
for(var i = 0, len = firstParams.length; i < len; i++){
var val = firstParams[i],
type = typeof val;
if(type === 'string'){
deps.push(val);
}else if(type === 'function'){
func = val;
}
}
//通过依赖参数，找到关联值
for(i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
func.apply(scope || {}, args);
}
};
测试代码，如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(){
var firstParams, func, deps = [], scope = null, args = [];
firstParams = arguments[0];
scope = arguments[1] || {};
//获得依赖参数
for(var i = 0, len = firstParams.length; i < len; i++){
var val = firstParams[i],
type = typeof val;
if(type === 'string'){
deps.push(val);
}else if(type === 'function'){
func = val;
}
}
//通过依赖参数，找到关联值
for(i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
func.apply(scope || {}, args);
}
};
//测试代码
injector.register('Monkey', function(){
console.log('Monkey');
}).register('Dorie', function(){
console.log('Dorie');
});
injector.resolve(['Monkey','Dorie',function(M, D){
M();
D();
console.log('-.-');
}]);
</script>
</body>
</html>
因为行内注入声明，是通过字符串的形式作为依赖参数，so，压缩也不怕咯。
最后，我们将上面实现的两种方法，整合到一起，就可以为所欲为啦。
那，就合并下吧，如下：
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(){
var firstParams, func, deps = [], scope = null, args = [];
firstParams = arguments[0];
scope = arguments[1] || {};
//判断哪种形式的注入
if(typeof firstParams === 'function'){
func = firstParams;
deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
}else{
for(var i = 0, len = firstParams.length; i < len; i++){
var val = firstParams[i],
type = typeof val;
if(type === 'string'){
deps.push(val);
}else if(type === 'function'){
func = val;
}
}
}
//通过依赖参数，找到关联值
for(i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
func.apply(scope || {}, args);
}
};
四、花絮—RequireJS之依赖注入
依赖注入并非在AngularJS中有，倘若你使用过RequireJS，那么下面这种形式，不会陌生吧：
require(['Monkey', 'Dorie'], function(M, D){
//TODO
});
通过，上面我们一步步的模拟AngularJS依赖注入的实现，想必，看到这，你自己也会豁然开朗，换汤不换药嘛。
模拟实现如下：
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(deps, func, scope){
var args = [];
for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t resolve ' + d);
}
}
func.apply(scope || {}, args);
}
};
测试代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var injector = {
dependencies: {},
register: function(key, value){
this.dependencies[key] = value;
return this;
},
resolve: function(deps, func, scope){
var args = [];
for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
if(this.dependencies[d]){
args.push(this.dependencies[d]);
}else{
throw new Error('Can\'t resolve ' + d);
}
}
func.apply(scope || {}, args);
}
};
//测试代码
injector.register('Monkey', function(){
console.log('Monkey');
}).register('Dorie', function(){
console.log('Dorie');
});
injector.resolve(['Monkey', 'Dorie'], function(M, D){
M();
D();
console.log('-.-');
});
</script>
</body>
</html>
五、参考
1、AngularJS应用开发思维之3：依赖注入
2、Dependency injection in JavaScript
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 没有才能.2024-我终于也变成人了【华研国际】【FLAC分轨】
- 张国荣.1995-宠爱（2014年K2HD限量版）【滚石】【WAV+CUE】
- 林姗.2009-个人精选集【芮河】【WAV+CUE】
- 魔兽世界地心之战织雾武僧用什么饰品 地心之战织雾武僧饰品推荐
- 瑞鸣《喜马拉雅》[WAV+CUE]
- 【古典音乐】郑京和《华纳录音全集》11CD.2015[FLAC+CUE]
- 群星《经典再现·国语男声》2CD[DTS-WAV]
- 打完猴了！来聊聊你最喜欢哪段故事！
- 玩家分享《黑神话：悟空》大怨种：想痛快玩游戏花了快400块
- 作者回应《黑神话》墙绘被毁：当地相关部门支持重绘
- 李泉.1995-上海梦【魔岩】【WAV+CUE】
- 何雨雯.1994-给你的歌【天王唱片】【WAV+CUE】
- 群星.1994-神摇第一章·极乐扬州路【D.I.Y】【WAV+CUE】
- 《车烧友 发烧情歌天碟3CD》[WAV/分轨][1.9GB]
- 《薛之谦 情歌不变招牌 霸气情歌2CD》[WAV/分轨][1.2GB]