摘要:未指定時直接返回整個對象,否則返回。鍵名也要轉為駝峰命名。在內,先對和兩個調用情況進行處理。則遍歷對象,刪除在每個節點上的緩存數據。
jQuery源碼學習之data
jQuery中有兩個關于data操作的方法
$().data() $.data(elem);
內部其實現均離不開自定義類Data
內部類 DataData在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.cachecache: 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.setset: 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.getget: 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.accessaccess: 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.removeremove: 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.hasDatahasData: 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在元素查找屬性。
// 屬性值是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; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/96135.html
摘要:一起源方法最終是用綁定事件的而方法正是等于二作用觸發綁定的事件的處理程序源碼源碼行即原生觸發事件的處理程序修正對象獲取事件的處理程序集合,結構如下從數據緩存中獲取事件處理集合即目標元素委托目標這段代碼壓根不會執行,因為全局搜索沒找到結構 showImg(https://segmentfault.com/img/remote/1460000019464031); 一、起源jQuery.e...
摘要:五作用的關鍵方法,用來從目標節點克隆數據添加事件給克隆的元素注意采用數據分離的方法來保存上的事件和數據,利用標記每個元素,然后在內存上,將每個元素相關的數據放到內存中,然后在和內存的數據之間建立映射。 showImg(https://segmentfault.com/img/remote/1460000018991125); 前言:這篇講完后,jQuery的文檔處理就告一段落了,有空我...
摘要:作為此時不存在,直接從數據緩存中獲取并返回。作用是觸發中的回調函數,的表示只讓觸發一次后,就需要清理,表示是將清空成空數組還是空字符。 showImg(https://segmentfault.com/img/remote/1460000019558449); 前言:queue()方法和dequeue()方法是為 jQuery 的動畫服務的,目的是為了允許一系列動畫函數被異步調用,但不...
摘要:階段二目標瀏覽器找到監聽器后,就運行該監聽器階段三冒泡目標到祖在事件自下而上到達目標節點的過程中,瀏覽器會檢測不是針對該事件的監聽器用來捕獲事件,并運行非捕獲事件的監聽器。注意下這種情況,是在里的具體實現,即調用一次后,就執行,卸載事件。 showImg(https://segmentfault.com/img/remote/1460000019304809); 前言:這篇依舊長,請耐...
閱讀 1173·2021-09-10 10:51
閱讀 905·2019-08-30 15:53
閱讀 2732·2019-08-30 12:50
閱讀 983·2019-08-30 11:07
閱讀 1997·2019-08-30 10:50
閱讀 3604·2019-08-29 18:47
閱讀 1317·2019-08-29 18:44
閱讀 1604·2019-08-29 17:01