为JavaScript添加重载函数的辅助方法

发布网友 发布时间：2022-04-22 16:51

我来回答

共2个回答

懂视网 时间：2022-04-22 21:13

css(name|pro|[,val|fn])

我们可以看到 css( ) 方法，有5种 参数情况，其中3种是一个参数，另外两种是两个参数。
而在只有一个参数的情况下，如果参数类型是字符串或者数组就是获取属性值，而如果参数是对象，就是是设置属性值。

jQuery 的 css( ) 方法就是通过判断参数的类型，来确定执行什么操作。

我们来看看jQuery 3.3.1中的源码

// name 表示属性名
// value 表示属性值
css: function( name, value ) {
 return access( this, function( elem, name, value ) {
 var styles, len,
  map = {},
  i = 0;

 // 判断属性名是不是数组
 // 是数组就遍历，调用jQuery.css 方法传入每个属性名，获取样式
 if ( Array.isArray( name ) ) {
  styles = getStyles( elem );
  len = name.length;

  for ( ; i < len; i++ ) {
  map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
  }

  return map;
 }

 // 如果value 不等于 undefined 就调用jQuery.style 方法设置样式
 // 如果value 等于 undefined 就调用jQuery.css 方法获取样式
 return value !== undefined ?
  jQuery.style( elem, name, value ) :
  jQuery.css( elem, name );
 }, name, value, arguments.length > 1 );
}

css( ) 方法依赖于三个方法：

1、jQuery.access( ) 方法，这个方法可以获取 或 设置，一个或者多个属性值

jQuery.access( ) 方法里有这样的代码

// 设置多个属性值
// 如果属性名（key）的类型是 object，就遍历这个对象
// 遍历一次就调用一次 access()方法，并传入这次的属性名和属性值
if ( jQuery.type( key ) === "object" ) {
 chainable = true;
 for ( i in key ) {
 jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
 }

// 设置一个值
} else if ( value !== undefined ) {
 ......
}

也就是这个方法，在帮 css( ) 方法判断第一个参数是字符串还是对象的。

2、jQuery.style( ) 方法：在DOM节点上读取或设置样式属性

在css( )方法中，如果有传第二个参数，也就是有要设置的属性值时，那就会调用 jQuery.style( ) 方法设置样式

3、jQuery.css( ) ：在DOM元素上读取DOM样式值

这里的 jQuery.css( ) 是通过 jQuery.extend( ) 添加的方法，而我们最开始提到的 css( )方法，是通过 jQuery.fn.extend( ) 添加的方法，他们不是同一个方法。

jQuery.extend( )与 jQuery.fn.extend( )的区别

jQuery.extend( )是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；

jQuery.fn.extend( )是为jQuery类添加成员数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。

重载的好处

重载其实是把多个功能相近的函数合并为一个函数，重复利用了函数名。
假如jQuery中的css( )方法不使用 重载，那么就要有5个不同的函数，来完成功能，那我们就需要记住5个不同的函数名，和各个函数相对应的参数的个数和类型，显然就麻烦多了。

总结

虽然 JavaScript 并没有真正意义上的重载，但是重载的效果在JavaScript中却非常常见，比如 数组的 splice( )方法，一个参数可以删除，两个参数可以删除一部分，三个参数可以删除完了，再添加新元素。
再比如 parseInt( )方法 ，传入一个参数，就判断是用十六进制解析，还是用十进制解析，如果传入两个参数，就用第二个参数作为数字的基数，来进行解析。

文中提到的实现重载效果的方法，本质都是对参数进行判断，不管是判断参数个数，还是判断参数类型，都是根据参数的不同，来决定执行什么操作的。

虽然，重载能为我们带来许多的便利，但是也不能滥用，不要把一些根本不相关的函数合为一个函数，那样并没有什么意义。

热心网友 时间：2022-04-22 18:21

JavaScript的重载函数，一般是靠对arguments判断来操作的。
比如：
复制代码
代码如下:
var
afunc
=
function()
{
args
=
arguments;
if(args.length
==
1)
{
console.log(1);
}else
if(args.length
==
2)
{
console.log(2);
}else
if
(args.length
==
3)
{
console.log(3);
}
}
可以想象如果重载数量多的时候，要有多少的if-else判断啊（事实上重载数量应该不会太多吧）。
如果要对js函数进行重载，代码量肯定是多的。那么能不能想办法使代码清晰点，再减少那些相同代码的书写呢？
这就是我写篇文章和相关代码的起因了。
惯例先上代码：
复制代码
代码如下:
/**
KOverLoad
一个创建重载函数的辅助方法。
其实这个方法只是帮忙整理了参数不同的情况下的重载方法。
如果还要对参数类型进行判断重载的话，请在提供的方法中自己实现。
@Author
ake
2010-05-02
@weblog
http://www.cnblogs.com/akecn
*/
var
KOverLoad
=
function(scope)
{
this.scope
=
scope
||
window;
//默认添加方法到这个对象中。同时添加的方法的this指向该对象。
this.list
=
{};
//存放重载函数的地方。
return
this;
};
KOverLoad.prototype
=
{
//添加一个重载的方法。
//@param
arg<Function>
重载的方法。
add:function(arg)
{
if(typeof
arg
==
"function")
{
this.list[arg.length]
=
arg;
//以参数数量做标识存储重载方法。很显然如果你的重载方法参数数量
}
return
this;
},
//添加完所有的重载函数以后，调用该方法来创建重载函数。
//@param
fc<String>
重载函数的方法名。
load:function(fc)
{
var
self
=
this,
args,
len;
this.scope[fc]
=
function()
{
//将指定作用域的指定方法
设为重载函数。
args
=
Array.prototype.slice.call(arguments,
0);
//将参数转换为数组。
len
=
args.length;
if(self.list[len])
{
//根据参数数量调用符合的重载方法。
self.list[len].apply(self.scope,
args);
//这里指定了作用域和参数。
}else{
throw
new
Error("undefined
overload
type");
}
}
}
};
使用
方法是我觉得比较清晰的方法：
//这是可选的作用对象。
复制代码
代码如下:
var
s
=function(){}
s.prototype
=
{
init:function()
{
console.log();
}
}
//构造函数的参数可以是Object类型的或者其他合法的类型，如果不指定，则注册到window对象中，并且作用域也是window。其实就是添加该重载方法到什么地方而已。
复制代码
代码如下:
new
KOverLoad(s.prototype).add(function(a)
{
console.log("one",a,this)
})
　.add(function(a,b)
{
console.log("two",a,b,this)
})
　.add(function(a,b,c)
{
console.log("three",a,b,c,this)
})
　.add(function(a,b,c,d)
{
console.log("four",a,b,c,d,this)
})
　.load("func");
//在这里的参数就是要创建的重载函数的方法名称。
完成以上操作以后，s.func就是一个重载函数。
我们可以这样调用重载函数：
复制代码
代码如下:
var
t
=
new
s();
t.func();//抛出错误异常。因为没有指定零参数时的函数
t.func(”o”);//one
o
Object
{}
t.func(1,2);//two
1
2
Object
{}
简单的代码而已，如果各位有建议或者意见，欢迎留言指教。