详解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()); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。