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;   }