jQuery的實(shí)現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
更新時(shí)間:2010年08月01日 10:26:00 作者:
在 jQuery 中,可以對每一個(gè) DOM 對象保存私有的數(shù)據(jù)。
這個(gè)數(shù)據(jù)當(dāng)然要通過屬性來進(jìn)行存取,但是,有多個(gè)屬性怎么辦呢?,要定義多個(gè)屬性嗎?,屬性的名字叫什么呢?會(huì)不會(huì)與其他的屬性有沖突呢?
在 jQuery 中,針對 DOM 對象擴(kuò)展的私有數(shù)據(jù)可以用一個(gè)對象來表示,多個(gè)數(shù)據(jù)就使用這個(gè)對象的多個(gè)屬性來表示。為了能夠通過 DOM 對象找到這個(gè)擴(kuò)展數(shù)據(jù)對象,而不會(huì)與其他現(xiàn)有的屬性沖突,在 jQuery 中通過 expando 這個(gè)常量表示擴(kuò)展對象的屬性名,這個(gè) expando 的值是計(jì)算出來的。而這個(gè)屬性的值就是用來找到擴(kuò)展對象的鍵值。
例如,我們可以定義 expando 的值為 "jQuery1234" ,那么,我們可以為每個(gè) DOM 對象增加這個(gè)名為 "jQuery1234" 的屬性,這個(gè)屬性的值可以是一個(gè)鍵,例如為 1000。
在 jQuery 對象上的 cache 用來保存所有對象擴(kuò)展的對象,這個(gè)對象可以看作一個(gè)字典,屬性名就是鍵值,所對應(yīng)的值就是擴(kuò)展數(shù)據(jù)對象。
也就是說,在 jQuery 對象的 cache 上,將會(huì)有一個(gè) 1000 的成員,這個(gè)成員引用的對象就是 1000 號 DOM 對象的私有擴(kuò)展對象。1000 號成員的私有數(shù)據(jù)將被存在在這個(gè)對象上。
當(dāng)一個(gè) DOM 對象需要取得擴(kuò)展數(shù)據(jù)的時(shí)候,首先通過對象的 expando 屬性取得一個(gè)鍵值,然后通過這個(gè)鍵值到 jQuery.cache 中取得自己的擴(kuò)展對象,然后在擴(kuò)展對象上讀寫數(shù)據(jù)。
/// <reference path="jQuery-core.js" />
// 常用方法
function now() {
return (new Date).getTime();
}
// 擴(kuò)充數(shù)據(jù)的屬性名,動(dòng)態(tài)生成,避免與已有的屬性沖突
var expando = "jQuery" + now(), uuid = 0, windowData = {};
jQuery.cache = {};
jQuery.expando = expando;
// 數(shù)據(jù)管理,可以針對 DOM 對象保存私有的數(shù)據(jù),可以讀取保存的數(shù)據(jù)
jQuery.fn.data = function (key, value) {
// 讀取
if (value === undefined) {
return jQuery.data(this[0], key);
}
else { // 設(shè)置
this.each(
function () {
jQuery.data(this, key, value);
}
);
}
}
// 移除數(shù)據(jù),刪除保存在對象上的數(shù)據(jù)
jQuery.fn.removeData = function (key) {
return this.each(function () {
jQuery.removeData(this, key);
})
}
// 為元素保存數(shù)據(jù)
jQuery.data = function (elem, name, data) { // #1001
// 取得元素保存數(shù)據(jù)的鍵值
var id = elem[expando], cache = jQuery.cache, thisCache;
// 沒有 id 的情況下,無法取值
if (!id && typeof name === "string" && data === undefined) {
return null;
}
// Compute a unique ID for the element
// 為元素計(jì)算一個(gè)唯一的鍵值
if (!id) {
id = ++uuid;
}
// 如果沒有保存過
if (!cache[id]) {
elem[expando] = id; // 在元素上保存鍵值
cache[id] = {}; // 在 cache 上創(chuàng)建一個(gè)對象保存元素對應(yīng)的值
}
// 取得此元素的數(shù)據(jù)對象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if (data !== undefined) {
thisCache[name] = data;
}
// 返回對應(yīng)的值
return typeof name === "string" ? thisCache[name] : thisCache;
}
// 刪除保存的數(shù)據(jù)
jQuery.removeData = function (elem, name) { // #1042
var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
// If we want to remove a specific section of the element's data
if (name) {
if (thisCache) {
// Remove the section of cache data
delete thisCache[name];
// If we've removed all the data, remove the element's cache
if (jQuery.isEmptyObject(thisCache)) {
jQuery.removeData(elem);
}
}
// Otherwise, we want to remove all of the element's data
} else {
delete elem[jQuery.expando];
// Completely remove the data cache
delete cache[id];
}
}
// 檢查對象是否是空的
jQuery.isEmptyObject = function (obj) {
// 遍歷元素的屬性,只有要屬性就返回假,否則返回真
for (var name in obj) {
return false;
}
return true;
}
// 檢查是否是一個(gè)函數(shù)
jQuery.isFunction = function (obj) {
var s = toString.call(obj);
return toString.call(obj) === "[object Function]";
}
下面的腳本可以保存或者讀取對象的擴(kuò)展數(shù)據(jù)。
// 數(shù)據(jù)操作
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("name"));
$("#msg").removeData("name");
alert($("#msg").data("name"));
在 jQuery 中,針對 DOM 對象擴(kuò)展的私有數(shù)據(jù)可以用一個(gè)對象來表示,多個(gè)數(shù)據(jù)就使用這個(gè)對象的多個(gè)屬性來表示。為了能夠通過 DOM 對象找到這個(gè)擴(kuò)展數(shù)據(jù)對象,而不會(huì)與其他現(xiàn)有的屬性沖突,在 jQuery 中通過 expando 這個(gè)常量表示擴(kuò)展對象的屬性名,這個(gè) expando 的值是計(jì)算出來的。而這個(gè)屬性的值就是用來找到擴(kuò)展對象的鍵值。
例如,我們可以定義 expando 的值為 "jQuery1234" ,那么,我們可以為每個(gè) DOM 對象增加這個(gè)名為 "jQuery1234" 的屬性,這個(gè)屬性的值可以是一個(gè)鍵,例如為 1000。
在 jQuery 對象上的 cache 用來保存所有對象擴(kuò)展的對象,這個(gè)對象可以看作一個(gè)字典,屬性名就是鍵值,所對應(yīng)的值就是擴(kuò)展數(shù)據(jù)對象。
也就是說,在 jQuery 對象的 cache 上,將會(huì)有一個(gè) 1000 的成員,這個(gè)成員引用的對象就是 1000 號 DOM 對象的私有擴(kuò)展對象。1000 號成員的私有數(shù)據(jù)將被存在在這個(gè)對象上。
當(dāng)一個(gè) DOM 對象需要取得擴(kuò)展數(shù)據(jù)的時(shí)候,首先通過對象的 expando 屬性取得一個(gè)鍵值,然后通過這個(gè)鍵值到 jQuery.cache 中取得自己的擴(kuò)展對象,然后在擴(kuò)展對象上讀寫數(shù)據(jù)。
復(fù)制代碼 代碼如下:
/// <reference path="jQuery-core.js" />
// 常用方法
function now() {
return (new Date).getTime();
}
// 擴(kuò)充數(shù)據(jù)的屬性名,動(dòng)態(tài)生成,避免與已有的屬性沖突
var expando = "jQuery" + now(), uuid = 0, windowData = {};
jQuery.cache = {};
jQuery.expando = expando;
// 數(shù)據(jù)管理,可以針對 DOM 對象保存私有的數(shù)據(jù),可以讀取保存的數(shù)據(jù)
jQuery.fn.data = function (key, value) {
// 讀取
if (value === undefined) {
return jQuery.data(this[0], key);
}
else { // 設(shè)置
this.each(
function () {
jQuery.data(this, key, value);
}
);
}
}
// 移除數(shù)據(jù),刪除保存在對象上的數(shù)據(jù)
jQuery.fn.removeData = function (key) {
return this.each(function () {
jQuery.removeData(this, key);
})
}
// 為元素保存數(shù)據(jù)
jQuery.data = function (elem, name, data) { // #1001
// 取得元素保存數(shù)據(jù)的鍵值
var id = elem[expando], cache = jQuery.cache, thisCache;
// 沒有 id 的情況下,無法取值
if (!id && typeof name === "string" && data === undefined) {
return null;
}
// Compute a unique ID for the element
// 為元素計(jì)算一個(gè)唯一的鍵值
if (!id) {
id = ++uuid;
}
// 如果沒有保存過
if (!cache[id]) {
elem[expando] = id; // 在元素上保存鍵值
cache[id] = {}; // 在 cache 上創(chuàng)建一個(gè)對象保存元素對應(yīng)的值
}
// 取得此元素的數(shù)據(jù)對象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if (data !== undefined) {
thisCache[name] = data;
}
// 返回對應(yīng)的值
return typeof name === "string" ? thisCache[name] : thisCache;
}
// 刪除保存的數(shù)據(jù)
jQuery.removeData = function (elem, name) { // #1042
var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
// If we want to remove a specific section of the element's data
if (name) {
if (thisCache) {
// Remove the section of cache data
delete thisCache[name];
// If we've removed all the data, remove the element's cache
if (jQuery.isEmptyObject(thisCache)) {
jQuery.removeData(elem);
}
}
// Otherwise, we want to remove all of the element's data
} else {
delete elem[jQuery.expando];
// Completely remove the data cache
delete cache[id];
}
}
// 檢查對象是否是空的
jQuery.isEmptyObject = function (obj) {
// 遍歷元素的屬性,只有要屬性就返回假,否則返回真
for (var name in obj) {
return false;
}
return true;
}
// 檢查是否是一個(gè)函數(shù)
jQuery.isFunction = function (obj) {
var s = toString.call(obj);
return toString.call(obj) === "[object Function]";
}
下面的腳本可以保存或者讀取對象的擴(kuò)展數(shù)據(jù)。
復(fù)制代碼 代碼如下:
// 數(shù)據(jù)操作
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("name"));
$("#msg").removeData("name");
alert($("#msg").data("name"));
相關(guān)文章
JQuery實(shí)現(xiàn)簡單的服務(wù)器輪詢效果實(shí)例
這篇文章主要介紹了JQuery實(shí)現(xiàn)簡單的服務(wù)器輪詢效果,結(jié)合實(shí)例形式分析了jQuery的ajax交互結(jié)合.net處理實(shí)現(xiàn)輪詢效果的相關(guān)技巧,需要的朋友可以參考下2016-03-03
jQuery實(shí)現(xiàn)指定內(nèi)容滾動(dòng)同時(shí)左側(cè)或其它地方不滾動(dòng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定內(nèi)容滾動(dòng)同時(shí)左側(cè)或其它地方不滾動(dòng)的方法,可實(shí)現(xiàn)頁面滾動(dòng)的時(shí)候指定位置懸浮固定的效果,涉及jquery針對頁面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-08-08
使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼,使用jQuery UI Autocomplete的朋友可以參考下2012-04-04
jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件及頁面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
為jQuery增加join方法的實(shí)現(xiàn)代碼
正在做一個(gè)在線書簽管理的站點(diǎn),有需要這樣一個(gè)功能,把匹配節(jié)點(diǎn)的id或值拼合起來以用來傳遞參數(shù)。2010-11-11

