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( )方法 ,传入一个参数,就判断是用十六进制解析,还是用十进制解析,如果传入两个参数,就用第二个参数作为数字的基数,来进行解析。
文中提到的实现重载效果的方法,本质都是对参数进行判断,不管是判断参数个数,还是判断参数类型,都是根据参数的不同,来决定执行什么操作的。
虽然,重载能为我们带来许多的便利,但是也不能滥用,不要把一些根本不相关的函数合为一个函数,那样并没有什么意义。