前面的第三小節(jié)留下了一個(gè)疑問:jQuery.data() 與 .data()為什么會(huì)有區(qū)別?
jQuery的方法設(shè)計(jì)大都是多用的,可以根據(jù)傳遞參數(shù)的個(gè)數(shù)判斷是set還是get處理,不僅如此jQuery還對(duì)參數(shù)的傳遞類型還抽出了一個(gè)處理的方法jQuery.access,我們可以傳遞字符串、數(shù)組、對(duì)象等等,根據(jù)這種類型自動(dòng)分解成接口所有能接受的參數(shù)。
省略了部分,比如數(shù)據(jù)的過濾,HMLT5 data的處理之類,保留直接的處理,如下代碼:
jQuery.fn.extend({ data: function(key, value) { return access(this, function(value) { // 通過access解析出參數(shù) value的值 }, null, value, arguments.length > 1, null, true) }) }
通過access解析后的參數(shù)就能讓data_user接口所接收,此時(shí)我們可以調(diào)用數(shù)據(jù)對(duì)象接口開始對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)設(shè)置了。
this.each(function() { var data = data_user.get( this, camelKey ); data_user.set( this, camelKey, value ); });
因?yàn)閖Query可以是一個(gè)元素合集,所以內(nèi)部需要通過each對(duì)每一個(gè)合集都遍歷處理,
對(duì)數(shù)據(jù)的存儲(chǔ)內(nèi)部就是調(diào)用的data_user.get緩存類的接口。
get: function(owner, key) { var cache = this.cache[this.key(owner)]; return key === undefined ? cache : cache[key]; }
通過get方法通過key去cache中取得之前的值,如果沒有則新開辟一個(gè)空間用來存儲(chǔ)之后的新值,
通過data_user.set去設(shè)置這個(gè)新的值:
set: function(owner, data, value) { var prop, unlock = this.key(owner), cache = this.cache[unlock]; cache[data] = value; return cache; }
取出cache中對(duì)應(yīng)的存儲(chǔ)空間,然后可見
cache[ data ] = value;
數(shù)據(jù)直接就是通過對(duì)象的鍵值對(duì)的方式存儲(chǔ)在內(nèi)存中的。
當(dāng)我們重復(fù)同一個(gè)key的時(shí)候,其實(shí)是反復(fù)操作同一個(gè)cache緩存區(qū)下的同一個(gè)key
所以當(dāng)下面:
cache[‘bar’] = { myType: "慕課網(wǎng)一", }); cache[‘bar’] = { myType: "慕課網(wǎng)二", });
這種情況下,肯定是被覆蓋掉了。所以也就為什么通過實(shí)例的接口會(huì)覆蓋數(shù)據(jù)了。
請驗(yàn)證,完成請求
由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)