JavaScript函数重载模拟

客官°小女子只卖身不卖艺 2022-04-12 07:09 179阅读 0赞

转自：http://www.cnblogs.com/simayixin/archive/2011/03/28/1997519.html  
  
  
我们从结果向实现推，首先看我们要实现什么样的效果：  
  
css(hi,"color","red")  
css(\[hi,hello\],"color","red")  
css(hi,\{"border":"1px solid \#000","width":"200px"\})  
var color = css(hi,"color")  
  
这是很常见的写法，然后看我们希望怎么写：  
  
Overload("css",window,  
\{  
"object,string,string" : function(el,key,val)\{  
el.style\[key\] = val;  
\}  
,"array,string,string" : function(els,key,val)\{  
for(var i=0;i<els.length;i++)\{  
els\[i\].style\[key\] = val;  
\}  
\}  
,"object,object" : function(el,kv)\{  
for(var i in kv)\{  
el.style\[i\] = kv\[i\];  
\}  
\}  
,"object,string" : function(el,key)\{  
return el.style\[key\];  
\}  
\});  
接下来，看实现：  
  
/\*  
JavaScript函数重载模拟  
name : 函数名  
bind : 函数需要绑定到的对象  
fn\_objs : 键值对函数对象，键位以逗号隔开的类型(number,string,object,undefined,boolean,array,\*)字符串,其中\*为万能类型，值为对应的函数,  
如:\{"string,string":function(x,y)\{\},"string,number":functioin(x,y)\{\}\}  
\*/  
var Overload = function(name,bind,fn\_objs)\{  
var dict\_name = "\_"+name+"\_dict",dict;  
dict = bind\[dict\_name\] = bind\[dict\_name\] || \{\};  
  
for(var i in fn\_objs)\{  
dict\[i\] = fn\_objs\[i\];  
\}  
  
var is\_match = function(x,y)\{  
if(x==y)return true;  
if(x.indexOf("\*")==-1)return false;  
  
var x\_arr = x.split(","),y\_arr = y.split(",");  
if(x\_arr.length != y\_arr.length)return false;  
  
while(x\_arr.length)\{  
var x\_first = x\_arr.shift(),y\_first = y\_arr.shift();  
if(x\_first!="\*" && x\_first!=y\_first)return false;  
\}  
return true;  
\};  
  
bind\[name\] = function()\{  
var args = arguments,args\_len = args.length,args\_types=\[\],args\_type,match\_fn = function()\{\};  
for(var i=0;i<args\_len;i++)\{  
var type = typeof args\[i\];  
type=="object" && (args\[i\] instanceof Array) && (type="array");  
args\_types.push(type);  
\}  
args\_type = args\_types.join(",");  
for(var k in dict)\{  
if(is\_match(k,args\_type))\{  
match\_fn = dict\[k\];  
break;  
\}  
\}  
return match\_fn.apply(this,args);  
\};  
\};  
因为采用typeof来动态监测参数类型，而typeof又只能检测到的值只有(number,string,object,undefined,boolean)，所以类型的制定只能从这些值中设定，实现中还加入了万能类型"\*",由于array属于常用类型， 所以又特别添加了对array类型的支持。  
  
基本原理是：将以类型串为键，函数为值的字典挂到需要绑定的对象上，命名为"\_"+fn\_name+"\_dict",可用bind\["\_"+fn\_name\_"\_dict"\]来访问此对象，接着生成一个函数，在函数里靠判断arguments生成的类型串来从上述字典中匹配到相应的函数。  
  
\------------------------------------------------------------------------------------------------------------------  
  
上面的写法 ，始终不好看，有如下改进：  
  
Overload = function(fn\_objs)\{  
var is\_match = function(x,y)\{  
if(x==y)return true;  
if(x.indexOf("\*")==-1)return false;  
  
var x\_arr = x.split(","),y\_arr = y.split(",");  
if(x\_arr.length != y\_arr.length)return false;  
  
while(x\_arr.length)\{  
var x\_first = x\_arr.shift(),y\_first = y\_arr.shift();  
if(x\_first!="\*" && x\_first!=y\_first)return false;  
\}  
return true;  
\};  
var ret = function()\{  
var args = arguments  
,args\_len = args.length  
,args\_types=\[\]  
,args\_type  
,fn\_objs = args.callee.\_fn\_objs  
,match\_fn = function()\{\};  
  
for(var i=0;i<args\_len;i++)\{  
var type = typeof args\[i\];  
type=="object" && (args\[i\].length>-1) && (type="array");  
args\_types.push(type);  
\}  
args\_type = args\_types.join(",");  
for(var k in fn\_objs)\{  
if(is\_match(k,args\_type))\{  
match\_fn = fn\_objs\[k\];  
break;  
\}  
\}  
return match\_fn.apply(this,args);  
\};  
ret.\_fn\_objs = fn\_objs;  
return ret;  
\};  
  
String.prototype.format = Overload(\{  
"array" : function(params)\{  
var reg = /\{(\\d+)\}/gm;  
return this.replace(reg,function(match,name)\{  
return params\[~~name\];  
\});  
\}  
,"object" : function(param)\{  
var reg = /\{(\[^\{\}\]+)\}/gm;  
return this.replace(reg,function(match,name)\{  
return param\[name\];  
\});  
\}  
\});