jQuery의 데이터 연산 방법과 jQuery의 정의

이 글은 jQuery의 데이터 연산 방법과 jQuery의 정의를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

jQuery에는 데이터 작업을 위한 두 가지 방법이 있습니다

$().data()

$.data(elem);

내부 구현은 사용자 정의 클래스 DataData

内部类 Data

Data在src/data/Data.js定义，构建时为实例添加expando属性，作为唯一标识

function Data() {
    this.expando = jQuery.expando + Data.uid++;
}

在原型上添加了多个方法

Data.prototype = {
    cache: function(){
        ...
    },
    set: function(){
        ...
    },
    get: function(){
        ...
    },
    access: function(){
        ...
    },
    remove: function(){
        ...
    },
    hasData: function(){
        ...
    }
}

在jq内部，使用cache方法获取缓存的数据。传入一个参数owner，表示要获取缓存数据的对象。判断在owner上是否有expando属性，如果没有，说明这个owner是否第一次调用，需要在其初始化缓存数据对象。判断节点的类型，如果是元素节点或者document节点或者对象时，可以设置缓存数据。如果是元素节点或者document节点，直接使用对象字面量进行赋值，属性名是expando，值为空对象。如果是对象的话，使用Object.defineProperty为其定义数据，属性名也是expando，初始化为{}，同时属性描述符可以更改，不可枚举。

Data.prototype.cache

    cache: function( owner ) {

        // Check if the owner object already has a cache
        // 获取在owner的缓存值
        var value = owner[ this.expando ];

        // If not, create one
        if ( !value ) {
            value = {};

            // We can accept data for non-element nodes in modern browsers,
            // but we should not, see #8335.
            // Always return an empty object.
            // 判断owener类型 是否能在其上调用data
            // 在元素节点或body或对象上可以设置data
            // 其他节点不设置缓存数据
            if ( acceptData( owner ) ) {

                // If it is a node unlikely to be stringify-ed or looped over
                // use plain assignment
                // 此处为owner添加属性 key为Data对象的expando值 建立owner和Data对象之间的连接
                // owner是元素节点或body
                if ( owner.nodeType ) {
                    owner[ this.expando ] = value;

                // Otherwise secure it in a non-enumerable property
                // configurable must be true to allow the property to be
                // deleted when data is removed
                // owner是对象
                // 为owner添加expando属性 初始化为{},同时属性描述符可以更改，不可枚举
                } else {
                    Object.defineProperty( owner, this.expando, {
                        value: value,
                        configurable: true
                    } );
                }
            }
        }

        return value;
    }

使用set来更新缓存对象，分为data(key,value)或data(obj)两种调用情况，保存时要将键名保存为驼峰命名法。

Data.prototype.set

    set: function( owner, data, value ) {
        var prop,
            cache = this.cache( owner );

        // Handle: [ owner, key, value ] args
        // Always use camelCase key (gh-2257)
        if ( typeof data === "string" ) {
            cache[ jQuery.camelCase( data ) ] = value;

        // Handle: [ owner, { properties } ] args
        } else {

            // Copy the properties one-by-one to the cache object
            for ( prop in data ) {
                cache[ jQuery.camelCase( prop ) ] = data[ prop ];
            }
        }
        return cache;
    }

使用get来获取缓存对象，调用时有data(key)和data()。未指定key时直接返回整个cache对象，否则返回cache[key]。键名也要转为驼峰命名。

Data.prototype.get

    get: function( owner, key ) {
        return key === undefined ?
            this.cache( owner ) :

            // Always use camelCase key (gh-2257)
            owner[ this.expando ] && owner[ this.expando ][ jQuery.camelCase( key ) ];
    }

对调用的方式进行区分，内部调用 set或get

通过参数的数量和类型进行区分：

• key为空时，获取整个cache对象

• key类型为string且value===undefined 对应获取指定值

• 其他调用均为set，在set内部进行区分

Data.prototype.access

    access: function( owner, key, value ) {

        // In cases where either:
        //
        //   1. No key was specified
        //   2. A string key was specified, but no value provided
        //
        // Take the "read" path and allow the get method to determine
        // which value to return, respectively either:
        //
        //   1. The entire cache object
        //   2. The data stored at the key
        //
        if ( key === undefined ||
                ( ( key && typeof key === "string" ) && value === undefined ) ) {

            return this.get( owner, key );
        }

        // When the key is not a string, or both a key and value
        // are specified, set or extend (existing objects) with either:
        //
        //   1. An object of properties
        //   2. A key and value
        //
        this.set( owner, key, value );

        // Since the "set" path can have two possible entry points
        // return the expected data based on which path was taken[*]
        return value !== undefined ? value : key;
    }

使用remove来删除缓存对象属性，调用时，可以传入一个string，表示要删除的键名，或者传入一个保存多个键名的string数组。键名也要转为驼峰命名。如果不传入出参数，则直接删除掉在owner上的缓存数据对象。

Data.prototype.remove

    remove: function( owner, key ) {
        var i,
            cache = owner[ this.expando ];

        if ( cache === undefined ) {
            return;
        }

        if ( key !== undefined ) {

            // Support array or space separated string of keys
            if ( Array.isArray( key ) ) {

                // If key is an array of keys...
                // We always set camelCase keys, so remove that.
                key = key.map( jQuery.camelCase );
            } else {
                key = jQuery.camelCase( key );

                // If a key with the spaces exists, use it.
                // Otherwise, create an array by matching non-whitespace
                key = key in cache ?
                    [ key ] :
                    ( key.match( rnothtmlwhite ) || [] );
            }

            i = key.length;

            while ( i-- ) {
                delete cache[ key[ i ] ];
            }
        }

        // Remove the expando if there's no more data
        if ( key === undefined || jQuery.isEmptyObject( cache ) ) {

            // Support: Chrome <=35 - 45
            // Webkit & Blink performance suffers when deleting properties
            // from DOM nodes, so set to undefined instead
            // https://bugs.chromium.org/p/chromium/issues/detail?id=378607 (bug restricted)
            if ( owner.nodeType ) {
                owner[ this.expando ] = undefined;
            } else {
                delete owner[ this.expando ];
            }
        }
    }

判断owner上是否有缓存数据。

Data.prototype.hasData

    hasData: function( owner ) {
        var cache = owner[ this.expando ];
        return cache !== undefined && !jQuery.isEmptyObject( cache );
    }

jQuery方法的定义

定义后内部类data后，在/src/data.js进行拓展。在jQuery添加了hasData、data、 removeData、_data、_removeData等方法，在jQuery.fn上添加了data和removeData方法。

在jQuery拓展的方法，都是对Data方法的封装，在调用时$.data()时，并无对set和get操作区分，在Data.prototype.access内部区分set和get。下面源码中，dataUser和dataPriv是Data实例，分别为缓存数据和表示jq对象是否将元素的data属性添加到dataUser中

// $.data
jQuery.extend( {
    hasData: function( elem ) {
        return dataUser.hasData( elem ) || dataPriv.hasData( elem );
    },

    data: function( elem, name, data ) {
        return dataUser.access( elem, name, data );
    },

    removeData: function( elem, name ) {
        dataUser.remove( elem, name );
    },

    // TODO: Now that all calls to _data and _removeData have been replaced
    // with direct calls to dataPriv methods, these can be deprecated.
    _data: function( elem, name, data ) {
        return dataPriv.access( elem, name, data );
    },

    _removeData: function( elem, name ) {
        dataPriv.remove( elem, name );
    }
} );

在jQuery.fn上拓展的方法只有data和removeData。在data内，先对$().data()和$().data({k:v})两个调用情况进行处理。如果是第一种情况，则返回在this[0]上的缓存数据对象，如果是第一次以$().data()的方式调用，同时还会将元素上的data属性添加dataUser中，并更新dataPriv。如果是$().data({k:v})的调用方式，则遍历jq对象，为每个节点更新缓存数据。其他调用方式如$().data(k)和$().data(k,v)则调用access进行处理。此处的access并非Data.prototype.access。

removeData则遍历jq对象，删除在每个节点上的缓存数据。

// $().data
jQuery.fn.extend( {
    data: function( key, value ) {
        var i, name, data,
            elem = this[ 0 ], // elem为dom对象
            attrs = elem && elem.attributes; // 节点上的属性

        // Gets all values
        // $().data()
        if ( key === undefined ) {
            if ( this.length ) {
                data = dataUser.get( elem );

                // elem是元素节点，且dataPriv中无hasDataAttrs时执行这个代码块里的代码
                // dataPriv上的hasDataAttrs表示elem是否有data-xxx属性
                // 初始化dataPriv后花括号内的代码不再执行，即以下的if内的代码只执行一次
                if ( elem.nodeType === 1 && !dataPriv.get( elem, "hasDataAttrs" ) ) {
                    i = attrs.length;
                    while ( i-- ) {

                        // Support: IE 11 only
                        // The attrs elements can be null (#14894)
                        // 将elem的data-*-*属性以*-*转为驼峰命名方式的值为键
                        // 在dataAttr函数内保存到dataUser中
                        // 所以用$().data可以获取元素的data-*属性 但修改后dom上的属性却不变化
                        if ( attrs[ i ] ) {
                            name = attrs[ i ].name;
                            // name为data-xxx
                            if ( name.indexOf( "data-" ) === 0 ) {
                                // name为xxx
                                name = jQuery.camelCase( name.slice( 5 ) );
                                dataAttr( elem, name, data[ name ] );
                            }
                        }
                    }
                    // 同时将dataPriv的hasDataAttrs属性设置为真，表示已经将元素属性节点上的data属性保存到缓存对象中
                    dataPriv.set( elem, "hasDataAttrs", true );
                }
            }

            return data;
        }
        
        // Sets multiple values
        //  $().data(obj) 此处遍历this，即遍历jq对象上所有的节点，并在其设置值
        if ( typeof key === "object" ) {
            return this.each( function() {
                dataUser.set( this, key );
            } );
        }

        // 除了$().data()和$().data({k:v})的其他情况
        return access( this, function( value ) {
            var data;

            // The calling jQuery object (element matches) is not empty
            // (and therefore has an element appears at this[ 0 ]) and the
            // `value` parameter was not undefined. An empty jQuery object
            // will result in `undefined` for elem = this[ 0 ] which will
            // throw an exception if an attempt to read a data cache is made.
            // value undefined说明是获取操作
            // 调用$().data(k)
            if ( elem && value === undefined ) {

                // Attempt to get data from the cache
                // The key will always be camelCased in Data
                // 从dataUser中获取 非undefined时返回
                data = dataUser.get( elem, key );
                if ( data !== undefined ) {
                    return data;
                }

                // Attempt to "discover" the data in
                // HTML5 custom data-* attrs
                // dataUser中不存在key，调用dataAttr查找元素的data-*属性
                // 如果存在属性，更新dataUser并返回其值
                data = dataAttr( elem, key );
                if ( data !== undefined ) {
                    return data;
                }

                // We tried really hard, but the data doesn't exist.
                return;
            }

            // Set the data...
            // jq对象长度 >= 1, 调用如$().data(k,v) 遍历jq对象，为每个节点设置缓存数据
            this.each( function() {

                // We always store the camelCased key
                dataUser.set( this, key, value );
            } );
        }, null, value, arguments.length > 1, null, true );
    },

    // 遍历jq对象，删除各个元素上的缓存数据
    removeData: function( key ) {
        return this.each( function() {
            dataUser.remove( this, key );
        } );
    }
} );

其中，getData用于对元素上的data属性进行类型转换，dataAttr用于获取保存在元素节点上的data属性，并同时更新dataUser。需要注意的是，以$().data(k, v)方式调用时，如果在缓存数据上查找不到属性，则会调用dataAttr

내부 클래스 Data

와 분리될 수 없습니다. Data는 src/data/Data.js에 정의되어 있습니다. 빌드할 때 인스턴스에 expando 속성을 ​​고유 식별자

// 属性值是string 进行类型转换
function getData( data ) {
    if ( data === "true" ) {
        return true;
    }

    if ( data === "false" ) {
        return false;
    }

    if ( data === "null" ) {
        return null;
    }

    // Only convert to a number if it doesn't change the string
    // data转化成number再转成string后仍严格等于data
    if ( data === +data + "" ) {
        return +data;
    }

    if ( rbrace.test( data ) ) {
        return JSON.parse( data );
    }

    return data;
}

// 获取元素的dataset中的属性，并保存到dataUser中
function dataAttr( elem, key, data ) {
    var name;

    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    // 此处获取dataset里的值
    if ( data === undefined && elem.nodeType === 1 ) {
        name = "data-" + key.replace( rmultiDash, "-$&" ).toLowerCase(); // 此处将驼峰命名方式的key转化为data-*-*
        data = elem.getAttribute( name );

        if ( typeof data === "string" ) {
            try {
                data = getData( data );
            } catch ( e ) {}

            // Make sure we set the data so it isn't changed later
            // 将元素的data-*属性保存到dataUser中
            dataUser.set( elem, key, data );
        } else {
            data = undefined;
        }
    }
    return data;
}

로 추가하세요. 프로토타입에는 여러 메소드가 추가되었습니다

rrreee jq 내부에서는 캐시 메소드를 사용하여 캐시된 데이터를 얻습니다. 캐시된 데이터를 가져올 개체를 나타내는 매개변수 소유자를 전달합니다. 소유자에 확장 속성이 있는지 확인합니다. 그렇지 않은 경우 소유자가 처음으로 호출되어 캐시 데이터 개체를 초기화해야 하는지 여부를 나타냅니다. 노드 유형을 결정합니다. 요소 노드, 문서 노드 또는 개체인 경우 캐시 데이터를 설정할 수 있습니다. 요소 노드 또는 문서 노드인 경우 할당을 위해 객체 리터럴을 직접 사용합니다. 속성 이름은 Expando이고 값은 빈 객체입니다. 객체인 경우 Object.defineProperty를 사용하여 해당 데이터를 정의합니다. 속성 이름도 확장되고 {}로 초기화됩니다. 동시에 속성 설명자는 변경될 수 있으며 열거될 수 없습니다. .

Data.prototype.cache

rrreeeset를 사용하여 data(key, value)로 나누어진 캐시 개체를 업데이트합니다. > 또는 data(obj) 두 호출 케이스 모두 저장 시 키 이름을 카멜 케이스로 저장해야 합니다. 🎜

Data.prototype.set

rrreee🎜get을 사용하여 캐시 개체를 가져옵니다. 호출 시 data(key) 및 <code>data(). 키를 지정하지 않으면 전체 캐시 객체가 직접 반환되고, 그렇지 않으면 캐시[키]가 반환됩니다. 키 이름도 카멜 표기법으로 변환해야 합니다. 🎜

Data.prototype.get

rrreee🎜 호출 방법을 구별하고, 내부적으로 set 또는 get를 호출합니다.🎜🎜 구별 매개변수의 수와 유형: 🎜

• 🎜key가 비어 있으면 전체 캐시 객체를 가져옵니다. 🎜
• 🎜key 유형은 문자열입니다. 및 value===undefine은 지정된 값을 얻는 데 해당합니다🎜
• 🎜다른 호출은 set, set 내부 구별🎜

Data.prototype.access

rrreee🎜캐시된 객체 속성을 삭제하려면 remove를 사용하세요. 호출할 때 삭제할 키 이름을 나타내는 문자열을 전달하거나 여러 키 이름을 보유하는 문자열 배열을 전달할 수 있습니다. 키 이름도 카멜 표기법으로 변환해야 합니다. 매개변수가 전달되거나 전달되지 않으면 소유자의 캐시된 데이터 개체가 직접 삭제됩니다. 🎜

Data.prototype.remove

rrreee🎜 소유자에 캐시된 데이터가 있는지 확인합니다. 🎜

Data.prototype.hasData

rrreee🎜jQuery 메서드 정의🎜🎜내부 클래스 data를 정의한 후 /src/data.js가 확장됩니다. hasData, data, removeData, _data, _removeData 및 기타 메서드를 jQuery에 추가했습니다. , jQuery.fn에 data 및 removeData 메서드를 추가했습니다. 🎜🎜jQuery에서 확장된 메서드는 모두 Data 메서드를 캡슐화한 것입니다. $.data() 호출 시 set 및 get을 지원하지 않습니다. code>작업 구별, 세트 구별 및 <code>Data.prototype.access 내부 가져오기. 아래 소스 코드에서 dataUser 및 dataPriv는 각각 데이터를 캐시하고 jq 객체가 요소의 데이터 속성을 추가하는지 여부를 나타내는 Data의 인스턴스입니다. jQuery.fn의 >dataUser에서 🎜rrreee🎜에 의해 확장된 유일한 메서드는 data 및 removeData입니다. data에서 먼저 $().data() 및 $().data({k:v})라는 두 가지 호출을 수행합니다. 상황이 처리됩니다. 첫 번째 경우에는 $().data()this[0]에 캐시된 데이터 객체가 반환됩니다. /code>, 요소의 데이터 속성을 dataUser에 추가하고 dataPriv를 업데이트합니다. $().data({k:v})의 호출 메소드인 경우 jq 객체를 순회하며 각 노드마다 캐시된 데이터가 업데이트됩니다. $().data(k) 및 $().data(k,v)와 같은 다른 호출 메서드는 처리를 위해 access를 호출합니다. 여기서 access는 Data.prototype.access가 아닙니다. 🎜🎜removeData는 jq 객체를 순회하고 각 노드에서 캐시된 데이터를 삭제합니다. 🎜rrreee🎜그 중 getData는 요소의 데이터 속성에 대한 유형 변환을 수행하는 데 사용되고 dataAttr는 요소 노드에 저장된 데이터 속성을 가져오고 dataUser 업데이트하세요. $().data(k, v) 메서드를 호출할 때 캐시된 데이터에서 속성을 찾을 수 없으면 dataAttr가 호출된다는 점에 유의하세요. 요소에서 속성을 찾습니다. 🎜rrreee🎜추천 관련 기사: 🎜🎜🎜Angular 형식 유효성 검사의 두 가지 방법 소개🎜🎜

JavaScript 함수를 사용하는 방법 JavaScript 함수의 속성과 메서드 소개

위 내용은 jQuery의 데이터 연산 방법과 jQuery의 정의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!