이 글은 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;
}Data.prototype.cacheset를 사용하여 data(key, value)로 나누어진 캐시 개체를 업데이트합니다. > 또는 data(obj) 두 호출 케이스 모두 저장 시 키 이름을 카멜 케이스로 저장해야 합니다. 🎜Data.prototype.setget을 사용하여 캐시 개체를 가져옵니다. 호출 시 data(key) 및 <code>data(). 키를 지정하지 않으면 전체 캐시 객체가 직접 반환되고, 그렇지 않으면 캐시[키]가 반환됩니다. 키 이름도 카멜 표기법으로 변환해야 합니다. 🎜Data.prototype.getset 또는 get를 호출합니다.🎜🎜 구별 매개변수의 수와 유형: 🎜 문자열입니다. 및 value===undefine은 지정된 값을 얻는 데 해당합니다🎜set, set 내부 구별🎜
Data.prototype.accessremove를 사용하세요. 호출할 때 삭제할 키 이름을 나타내는 문자열을 전달하거나 여러 키 이름을 보유하는 문자열 배열을 전달할 수 있습니다. 키 이름도 카멜 표기법으로 변환해야 합니다. 매개변수가 전달되거나 전달되지 않으면 소유자의 캐시된 데이터 개체가 직접 삭제됩니다. 🎜Data.prototype.removeData.prototype.hasDatadata를 정의한 후 /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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
