jQuery源码解析data

jQuery.fn.extend({
    data:function(key,value){
        //解析html5的自定义属性 data-*
    }
})
1. .data(key,value)
      如果传递的参数是key和value,则是为每个匹配元素设置任意类型的数据
2 .data(key)
如果只传入参数key,则返回第一个匹配元素的指定名称的数据
 var $div = $("div");
 $div.data("name","111");
 console.log($div.data("name"));
3. .data()
如果未传入任何参数的话,则返回第一个匹配元素关联的自定义数据缓存对象,包含html5属性data-中的数据
4.  .data(obj)
如果传入的是含有的键值对的对象的话,则为每个匹配的元素批量设置数据.

/*
@ param attrs 保存元素的所有属性
@ param name  保存元素的属性名
@ param elem  获取第一个元素
*/
jQuery.fn.extend({
        data: function( key, value ) {
            var attrs, name,
                elem = this[0],
                i = 0,
                data = null;

            // Gets all values
            /*如果未传入参数的话,则返回第一个匹配元素关联的自定义数据对象*/
            if ( key === undefined ) {
                if ( this.length ) {
                /*获取匹配的第一个元素关联的自定义数据缓存对象*/
                    data = jQuery.data( elem );
                /**该元素是元素节点的话,则获取该元素的所有自定义属性,进行for循环遍历/
                    if ( elem.nodeType === 1 &&!jQuery._data( elem, "parsedAttrs" ) ) {
                        attrs = elem.attributes;
                        for ( ; i < attrs.length; i++ ) {
                            name = attrs[i].name;
                            if ( !name.indexOf( "data-" ){
                            /*截取以data- 开头的后面的name属性名*/
                                name = jQuery.camelCase( name.slice(5) );
                                /*解析html5属性中的data- 中含有的数据,并把解析结果放入dom元素关联的自定义数据对象的缓存当中*/
                                dataAttr( elem, name, data[ name ] );
                            }
                        }
                        /*过滤已经解析过的数据*/
                        jQuery._data( elem, "parsedAttrs", true );
                    }
                }

                return data;
            }

            // Sets multiple values
            /*如果参数key是对象的话,则为匹配的元素批量设置数据*/
            if ( typeof key === "object" ) {
                return this.each(function() {
                    jQuery.data( this, key );
                });
            }

            return jQuery.access( this, function( value ) {
            /*如果只传入参数key,则返回第一个匹配元素的指定名称的数据*/
                if ( value === undefined ) {
                    // Try to fetch any internally stored data first
                    return elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : null;
                }
                /*如果传入的参数是key和value的话,则为每个匹配的元素设置数据*/
                this.each(function() {
                    jQuery.data( this, key, value );
                });
            }, null, value, arguments.length > 1, null, true );
        }
     });

/*全局匹配26个大写字母*/
var rmultiDash = /([A-Z])/g;
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,
/*
@ param elem 待解析的html5中的属性data-的DOM元素
@ param key 表示待解析的数据名;不包含data-
@ param data 从DOM元素关联的自定义数据缓存对象中取到的数据;
*/
   function dataAttr( elem, key, data ) {
       // 参数data为undefined的话,且是DOM元素节点的话,尝试从html5中含有data-中去解析数据
       if ( data === undefined && elem.nodeType === 1 ) {
        /*加前缀data- 并把可能的驼峰形式参数name转换为连字字符*/
           var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
           /*获取该属性值*/
           data = elem.getAttribute( name );
           /*如果data有返回值的话,如果是字符串的话,则尝试把字符串转换为javascript对象; 否则的话,直接给data赋值undefined,最后返回
   该data属性*/
           if ( typeof data === "string" ) {
               try {
                   data = data === "true" ? true :
                       data === "false" ? false :
                       data === "null" ? null :
                       // Only convert to a number if it doesn't change the string
                       +data + "" === data ? +data :
                       rbrace.test( data ) ? jQuery.parseJSON( data ) :
                           data;
               } catch( e ) {}

               // Make sure we set the data so it isn't changed later
               jQuery.data( elem, key, data );

           } else {
               data = undefined;
           }
       }

       return data;
   }