视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
对于JavaScript中的函数重载的说明
2020-11-27 19:33:46 责编:小采
文档


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( )方法 ,传入一个参数,就判断是用十六进制解析,还是用十进制解析,如果传入两个参数,就用第二个参数作为数字的基数,来进行解析。

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

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

下载本文
显示全文
专题