jquery源码解析：jQuery数据缓存机制详解2

上一课主要讲了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的实现原理。

大家不要以为这就是源码粘贴，其实里面的注释是非常重要的，有些复杂的，我都会举例子说明，因此看起来不会很难。请看里面的注释。

 

 

 

加油！