上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的。我们接下来,来看这几个静态方法和实例方法的源码解析:
data_user = new Data(); //对外使用的数据缓存对象
data_priv = new Data(); //内部的数据缓存对象,内部使用
jQuery.extend({ //在jQuery中添加静态方法
acceptData: Data.accepts, //调用Data构造函数的accepts静态方法
hasData: function( elem ) { //是否有这个属性
return data_user.hasData( elem ) || data_priv.hasData( elem );
},
data: function( elem, name, data ) {
return data_user.access( elem, name, data );
},
removeData: function( elem, name ) {
data_user.remove( elem, name );
},
_data: function( elem, name, data ) { //_代表私有的方法,不对外
return data_priv.access( elem, name, data );
},
_removeData: function( elem, name ) {
data_priv.remove( elem, name );
}
});
静态方法,是直接调用Data原型上的方法,而上一课已经详细讲解了这个Data的原型,可以参照上一课。而在jQuery缓存系统中,我们经常使用的就是以下这几个实例方法:
jQuery.fn.extend({ //在jQuery原型上添加实例方法
data: function( key, value ) { //一个参数时是获取数据,两个参数时是设置数据
var attrs, name,
elem = this[ 0 ], //找到一组元素中的第一个,如果是获取操作,只获取一个元素,如果是设置,就设置这一组元素
i = 0,
data = null;
if ( key === undefined ) { //当不传入参数时,就代表取这个元素的所有数据,比如:$("div").data();
if ( this.length ) { //如果有元素
data = data_user.get( elem ); //获取这个元素的数据
//下面这一段代码是来处理HTML5中的自定义属性data-xxx的。比如:<div id="div1" data-chao-ji="dan"></div>,$("#div1")[0].dataset.chaoJi等于"dan"(HTML5写法)。$("#div1").data("chaoJi")等于"dan"。jQuery缓存系统会把HTML5自定义属性data-xxx这种格式的数据自动缓存起来。
if ( elem.nodeType === 1 && !data_priv.get( elem, "hasDataAttrs" ) ) {//元素是否是Element,元素是否有hasDataAttrs属性,第一次是没有的,也就是undefined。data_priv是内部使用的Data对象,不会影响到外部使用的Data对象data_user。
attrs = elem.attributes; //获取元素所有的属性
for ( ; i < attrs.length; i++ ) {
name = attrs[ i ].name; //得到每一个属性的名字
if ( name.indexOf( "data-" ) === 0 ) { //如果元素中的属性名有data-开头的字符串,就进入到if语句
name = jQuery.camelCase( name.slice(5) ); //取data-后面的字符串,也就是chao-ji,然后转驼峰格式,也就是变成chaoJi。
dataAttr( elem, name, data[ name ] ); //把data-开头的属性名的值添加到缓存系统中
}
}
data_priv.set( elem, "hasDataAttrs", true ); //设置此元素的hasDataAttrs属性值为true
}
}
return data;
}
if ( typeof key === "object" ) { //比如:$("#div1").data({name:"chaojidan",age:"25"});
return this.each(function() { //对每个元素,都在数据缓存中设置json中的属性值
data_user.set( this, key );
});
}
return jQuery.access( this, function( value ) { //access的第一个参数是所有元素,第二个参数是回调,第三个参数是key值,第四个参数是value值。第五个参数的作用是来决定回调是用来设置数据还是获取数据的(true代表设置操作,false代表获取操作)。第六个参数和第七个参数是内部使用的,我们不用管。
var data,
camelKey = jQuery.camelCase( key );
if ( elem && value === undefined ) { //如果value为空的话,就代表参数只有一个,那么arguments。length=1 >1,返回false,因此代表获取操作,获取元素elem在缓存系统中的key属性值
data = data_user.get( elem, key ); //获取数据
if ( data !== undefined ) { //如果找到,就直接返回
return data;
}
data = data_user.get( elem, camelKey ); //如果没找到,就再找key的驼峰方式的属性值,比如:$("#div1").data("name-age"),它会先找name-age这种属性名的值,如果没找到,就找nameAge这种属性名的值。
if ( data !== undefined ) {
return data;
}
data = dataAttr( elem, camelKey, undefined ); //如果都没找到,就找HTML5自定义属性data-xxx的值,比如:元素div上的data-name-age的属性值。
if ( data !== undefined ) {
return data;
}
return;
}
this.each(function() { //如果value存在,就代表是设置操作。就循环所有元素,对每个元素都设置
var data = data_user.get( this, camelKey ); //先去缓存系统中取key的驼峰形式的属性值
data_user.set( this, camelKey, value ); //然后把值设置给key的驼峰形式的属性名
if ( key.indexOf("-") !== -1 && data !== undefined ) { //如果key包含"-",并且之前取到的key的驼峰形式的属性值存在,那么就把此驼峰形式的属性值,赋给key这个属性名。举个例子:$("#div1").data("name-age","1"),这时缓存系统中会存储nameAge:1,然后我再$("#div1").data("name-age","2"),这时data = 1,nameAge:2,进入if语句,缓存系统会再存储name-age:1。
data_user.set( this, key, value );
}
});
}, null, value, arguments.length > 1, null, true );
},
removeData: function( key ) { //删除数据
return this.each(function() {
data_user.remove( this, key );
});
}
});
function dataAttr( elem, key, data ) { //key=chaoJi
var name;
if ( data === undefined && elem.nodeType === 1 ) { //首先判断数据缓存中是否有此名字的属性值,如果没有,并且元素是Element,就进入if语句。如果数据缓存中已经有了此名字的属性值,那么就直接返回这个值。意思就是:当HTML5的data-xxx的属性名xxx与jQuery通过data方法添加到数据缓存的属性名xxx是一样的,那么你通过data方法访问时,获取到的值是数据缓存中的xxx属性值,而不是HTML5的data-xxx的属性值,只有数据缓存没有这个xxx的属性值时,才会去取HTML5的data-xxx的属性值。
name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); //rmultiDash = /([A-Z])/g;取大写字母,也就是J,然后用-J代替J,这时key是chao-Ji,然后转小写,因此变成chao-ji。name= "data-chao-ji"
data = elem.getAttribute( name ); //得到元素上的这个HTML5自定义属性的属性值"dan"
if ( typeof data === "string" ) { //如果属性值是字符串就保存到缓存系统
try {
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
+data + "" === data ? +data : //如果是数字字符串,就存入数字
rbrace.test( data ) ? JSON.parse( data ) : //rbrace判断是否是一个json字符串,如果是就解析成json。
data; //如果是字符串,就直接返回字符串
} catch( e ) {}
data_user.set( elem, key, data );
} else { //如果不是字符串就直接返回undefined,也就是说HTML5的data-xxx的属性值只能是一个字符串,如果不是,那么你通过jQuery的data(xxx)方法获取时,是获取不到的,返回undefined。
data = undefined;
}
}
return data;
}
缓存系统到此结束,下一课将讲解队列Queue的实现原理。
大家不要以为这就是源码粘贴,其实里面的注释是非常重要的,有些复杂的,我都会举例子说明,因此看起来不会很难。请看里面的注释。
加油!