详解angularjs的数组传参方式的简单实现
初学angularjs时，对数组传参方式感到很好奇（[‘a',‘b',function(a,b){}]），它到底怎么实现的呢？后来由于工作很忙，对这个问题也就慢慢忘记了。
今天闲来无事，有想到了这个问题。最简单的方法就是查看他的源代码。无奈本人E文不好，不说看他的设计逻辑，仅看英文注释就够我头疼了。尝试闭门造车，最终竟然把车造出来了。
既然自己造的车，就要带上自己的名（取姓名拼音第一个字母），就叫他mqyJs把，下面是演示的调用方法：
varapp2=mqyJs.applicationCreate([{name:'直接传入SCOPE'},'$hello','$world',function($scope,$hello,$world){
return$scope.name+":"+$hello.name+$world.name;
}]);
核心部分如下：
//框架开设
varmqyJs={
//服务注册
servicesList:{},
servicesRegister:function(name,value){
this.servicesList[name]=value;
},
//应用创建
applicationList:[],
applicationCreate:function(_opts,_args){
if(!_args){
_args=_opts;
_opts={}
}
_opts.scope=_opts.scope||{
name:'SCOPE没有设置'
};
if(!(_argsinstanceofArray)){
_args=['$scope',_args];
}
if(typeof_args[_args.length-1]!='function'){
thrownewError('参数中没有指定运行函数');
}
_args.map((arg,index)=>{
if(typeofarg=='string'){
if(arg==='$scope'){
_args[index]=_opts.scope;
}else{
if(!!arg&&!(arginthis.servicesList)){
thrownewError('插件：'+arg+'还没有注册');
}
_args[index]=this.servicesList[arg];
}
}
});
returnthis.applicationList[this.applicationList.push({
run:function(callback){
if(typeofcallback!='function'){
callback=function(_opts){return_opts;}
}
returncallback(_args[_args.length-1].apply(null,_args));
}
})-1];
}
};
//框架结束
通过servicesRegister，可以注册服务，比如angularjs的$http；
//插件开始
mqyJs.servicesRegister('$hello',{
name:'你好'
});
mqyJs.servicesRegister('$world',{
name:'世界'
});
mqyJs.servicesRegister('$china',{
name:'中国'
});
//插件结束
最终，对所有注册的应用，自动执行
/**
*初始化完成后系统自动运行
*比如网页中放到window.onload
*/
mqyJs.applicationList.map(function(app,index){
console.log('自动调用->APP#'+index+'->'+app.run());
});
尝试跑一下代码，能自动识别参数类型，完美执行。
不传入$scope时，程序会自动创建一个$scope。
//演示代码开始
varapp=mqyJs.applicationCreate(['$scope','$hello','$china',function($scope,$hello,$china){
return$scope.name+":"+$hello.name+$china.name;
}]);
varapp2=mqyJs.applicationCreate([{name:'直接传入SCOPE'},'$hello','$world',function($scope,$hello,$world){
return$scope.name+":"+$hello.name+$world.name;
}]);
varapp3=mqyJs.applicationCreate([{name:'world也直接传入'},'$hello',{name:'地球'},function($scope,$hello,$world){
return$scope.name+":"+$hello.name+$world.name;
}]);
varapp4=mqyJs.applicationCreate(function($scope){
return$scope.name;
});
varopts={
scope:{
name:'自定义SCOPE'
}
};
varapp5=mqyJs.applicationCreate(opts,function($scope){
return$scope.name;
});
app4.run(function(result){
console.log('手动调用->RESULT->'+result);
});
//演示代码结束
为了方便测试，再把代码重新写一遍，直接复制下面的代码到浏览器控制台即可测试
//框架开设
varmqyJs={
//服务注册
servicesList:{},
servicesRegister:function(name,value){
this.servicesList[name]=value;
},
//应用创建
applicationList:[],
applicationCreate:function(_opts,_args){
if(!_args){
_args=_opts;
_opts={}
}
_opts.scope=_opts.scope||{
name:'SCOPE没有设置'
};
if(!(_argsinstanceofArray)){
_args=['$scope',_args];
}
if(typeof_args[_args.length-1]!='function'){
thrownewError('参数中没有指定运行函数');
}
_args.map((arg,index)=>{
if(typeofarg=='string'){
if(arg==='$scope'){
_args[index]=_opts.scope;
}else{
if(!!arg&&!(arginthis.servicesList)){
thrownewError('插件：'+arg+'还没有注册');
}
_args[index]=this.servicesList[arg];
}
}
});
returnthis.applicationList[this.applicationList.push({
run:function(callback){
if(typeofcallback!='function'){
callback=function(_opts){return_opts;}
}
returncallback(_args[_args.length-1].apply(null,_args));
}
})-1];
}
};
//框架结束
//插件开始
mqyJs.servicesRegister('$hello',{
name:'你好'
});
mqyJs.servicesRegister('$world',{
name:'世界'
});
mqyJs.servicesRegister('$china',{
name:'中国'
});
varapp=mqyJs.applicationCreate(['$scope','$hello','$china',function($scope,$hello,$china){
return$scope.name+":"+$hello.name+$china.name;
}]);
varapp2=mqyJs.applicationCreate([{name:'直接传入SCOPE'},'$hello','$world',function($scope,$hello,$world){
return$scope.name+":"+$hello.name+$world.name;
}]);
varapp3=mqyJs.applicationCreate([{name:'world也直接传入'},'$hello',{name:'地球'},function($scope,$hello,$world){
return$scope.name+":"+$hello.name+$world.name;
}]);
varapp4=mqyJs.applicationCreate(function($scope){
return$scope.name;
});
varopts={
scope:{
name:'自定义SCOPE'
}
};
varapp5=mqyJs.applicationCreate(opts,function($scope){
return$scope.name;
});
app4.run(function(result){
console.log('手动调用->RESULT->'+result);
});
//插件结束
mqyJs.applicationList.map(function(app,index){
console.log('自动调用->APP#'+index+'->'+app.run());
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。