jQuery的實(shí)現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
更新時(shí)間:2010年08月01日 10:26:00 作者:
在 jQuery 中,可以對(duì)每一個(gè) DOM 對(duì)象保存私有的數(shù)據(jù)。
這個(gè)數(shù)據(jù)當(dāng)然要通過(guò)屬性來(lái)進(jìn)行存取,但是,有多個(gè)屬性怎么辦呢?,要定義多個(gè)屬性嗎?,屬性的名字叫什么呢?會(huì)不會(huì)與其他的屬性有沖突呢?
在 jQuery 中,針對(duì) DOM 對(duì)象擴(kuò)展的私有數(shù)據(jù)可以用一個(gè)對(duì)象來(lái)表示,多個(gè)數(shù)據(jù)就使用這個(gè)對(duì)象的多個(gè)屬性來(lái)表示。為了能夠通過(guò) DOM 對(duì)象找到這個(gè)擴(kuò)展數(shù)據(jù)對(duì)象,而不會(huì)與其他現(xiàn)有的屬性沖突,在 jQuery 中通過(guò) expando 這個(gè)常量表示擴(kuò)展對(duì)象的屬性名,這個(gè) expando 的值是計(jì)算出來(lái)的。而這個(gè)屬性的值就是用來(lái)找到擴(kuò)展對(duì)象的鍵值。
例如,我們可以定義 expando 的值為 "jQuery1234" ,那么,我們可以為每個(gè) DOM 對(duì)象增加這個(gè)名為 "jQuery1234" 的屬性,這個(gè)屬性的值可以是一個(gè)鍵,例如為 1000。
在 jQuery 對(duì)象上的 cache 用來(lái)保存所有對(duì)象擴(kuò)展的對(duì)象,這個(gè)對(duì)象可以看作一個(gè)字典,屬性名就是鍵值,所對(duì)應(yīng)的值就是擴(kuò)展數(shù)據(jù)對(duì)象。
也就是說(shuō),在 jQuery 對(duì)象的 cache 上,將會(huì)有一個(gè) 1000 的成員,這個(gè)成員引用的對(duì)象就是 1000 號(hào) DOM 對(duì)象的私有擴(kuò)展對(duì)象。1000 號(hào)成員的私有數(shù)據(jù)將被存在在這個(gè)對(duì)象上。
當(dāng)一個(gè) DOM 對(duì)象需要取得擴(kuò)展數(shù)據(jù)的時(shí)候,首先通過(guò)對(duì)象的 expando 屬性取得一個(gè)鍵值,然后通過(guò)這個(gè)鍵值到 jQuery.cache 中取得自己的擴(kuò)展對(duì)象,然后在擴(kuò)展對(duì)象上讀寫(xiě)數(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ù)管理,可以針對(duì) DOM 對(duì)象保存私有的數(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ù),刪除保存在對(duì)象上的數(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;
// 沒(méi)有 id 的情況下,無(wú)法取值
if (!id && typeof name === "string" && data === undefined) {
return null;
}
// Compute a unique ID for the element
// 為元素計(jì)算一個(gè)唯一的鍵值
if (!id) {
id = ++uuid;
}
// 如果沒(méi)有保存過(guò)
if (!cache[id]) {
elem[expando] = id; // 在元素上保存鍵值
cache[id] = {}; // 在 cache 上創(chuàng)建一個(gè)對(duì)象保存元素對(duì)應(yīng)的值
}
// 取得此元素的數(shù)據(jù)對(duì)象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if (data !== undefined) {
thisCache[name] = data;
}
// 返回對(duì)應(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];
}
}
// 檢查對(duì)象是否是空的
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]";
}
下面的腳本可以保存或者讀取對(duì)象的擴(kuò)展數(shù)據(jù)。
// 數(shù)據(jù)操作
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("name"));
$("#msg").removeData("name");
alert($("#msg").data("name"));
在 jQuery 中,針對(duì) DOM 對(duì)象擴(kuò)展的私有數(shù)據(jù)可以用一個(gè)對(duì)象來(lái)表示,多個(gè)數(shù)據(jù)就使用這個(gè)對(duì)象的多個(gè)屬性來(lái)表示。為了能夠通過(guò) DOM 對(duì)象找到這個(gè)擴(kuò)展數(shù)據(jù)對(duì)象,而不會(huì)與其他現(xiàn)有的屬性沖突,在 jQuery 中通過(guò) expando 這個(gè)常量表示擴(kuò)展對(duì)象的屬性名,這個(gè) expando 的值是計(jì)算出來(lái)的。而這個(gè)屬性的值就是用來(lái)找到擴(kuò)展對(duì)象的鍵值。
例如,我們可以定義 expando 的值為 "jQuery1234" ,那么,我們可以為每個(gè) DOM 對(duì)象增加這個(gè)名為 "jQuery1234" 的屬性,這個(gè)屬性的值可以是一個(gè)鍵,例如為 1000。
在 jQuery 對(duì)象上的 cache 用來(lái)保存所有對(duì)象擴(kuò)展的對(duì)象,這個(gè)對(duì)象可以看作一個(gè)字典,屬性名就是鍵值,所對(duì)應(yīng)的值就是擴(kuò)展數(shù)據(jù)對(duì)象。
也就是說(shuō),在 jQuery 對(duì)象的 cache 上,將會(huì)有一個(gè) 1000 的成員,這個(gè)成員引用的對(duì)象就是 1000 號(hào) DOM 對(duì)象的私有擴(kuò)展對(duì)象。1000 號(hào)成員的私有數(shù)據(jù)將被存在在這個(gè)對(duì)象上。
當(dāng)一個(gè) DOM 對(duì)象需要取得擴(kuò)展數(shù)據(jù)的時(shí)候,首先通過(guò)對(duì)象的 expando 屬性取得一個(gè)鍵值,然后通過(guò)這個(gè)鍵值到 jQuery.cache 中取得自己的擴(kuò)展對(duì)象,然后在擴(kuò)展對(duì)象上讀寫(xiě)數(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ù)管理,可以針對(duì) DOM 對(duì)象保存私有的數(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ù),刪除保存在對(duì)象上的數(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;
// 沒(méi)有 id 的情況下,無(wú)法取值
if (!id && typeof name === "string" && data === undefined) {
return null;
}
// Compute a unique ID for the element
// 為元素計(jì)算一個(gè)唯一的鍵值
if (!id) {
id = ++uuid;
}
// 如果沒(méi)有保存過(guò)
if (!cache[id]) {
elem[expando] = id; // 在元素上保存鍵值
cache[id] = {}; // 在 cache 上創(chuàng)建一個(gè)對(duì)象保存元素對(duì)應(yīng)的值
}
// 取得此元素的數(shù)據(jù)對(duì)象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if (data !== undefined) {
thisCache[name] = data;
}
// 返回對(duì)應(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];
}
}
// 檢查對(duì)象是否是空的
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]";
}
下面的腳本可以保存或者讀取對(duì)象的擴(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)簡(jiǎn)單的服務(wù)器輪詢(xún)效果實(shí)例
這篇文章主要介紹了JQuery實(shí)現(xiàn)簡(jiǎn)單的服務(wù)器輪詢(xún)效果,結(jié)合實(shí)例形式分析了jQuery的ajax交互結(jié)合.net處理實(shí)現(xiàn)輪詢(xún)效果的相關(guān)技巧,需要的朋友可以參考下2016-03-03jQuery實(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)頁(yè)面滾動(dòng)的時(shí)候指定位置懸浮固定的效果,涉及jquery針對(duì)頁(yè)面元素屬性的動(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-05jQuery UI Autocomplete 1.8.16 中文輸入修正代碼
jQuery UI Autocomplete 1.8.16 中文輸入修正代碼,使用jQuery UI Autocomplete的朋友可以參考下2012-04-04jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08為jQuery增加join方法的實(shí)現(xiàn)代碼
正在做一個(gè)在線(xiàn)書(shū)簽管理的站點(diǎn),有需要這樣一個(gè)功能,把匹配節(jié)點(diǎn)的id或值拼合起來(lái)以用來(lái)傳遞參數(shù)。2010-11-11