首页 / 脚本样式 / JavaScript / jQuery的实现原理的模拟代码 -2 数据部分

这个数据当然要通过属性来进行存取，但是，有多个属性怎么办呢？，要定义多个属性吗？，属性的名字叫什么呢？会不会与其他的属性有冲突呢？
在 jQuery 中，针对 DOM 对象扩展的私有数据可以用一个对象来表示，多个数据就使用这个对象的多个属性来表示。为了能够通过 DOM 对象找到这个扩展数据对象，而不会与其他现有的属性冲突，在 jQuery 中通过 expando 这个常量表示扩展对象的属性名，这个 expando 的值是计算出来的。而这个属性的值就是用来找到扩展对象的键值。
例如，我们可以定义 expando 的值为 "jQuery1234" ，那么，我们可以为每个 DOM 对象增加这个名为 "jQuery1234" 的属性，这个属性的值可以是一个键，例如为 1000。
在 jQuery 对象上的 cache 用来保存所有对象扩展的对象，这个对象可以看作一个字典，属性名就是键值，所对应的值就是扩展数据对象。
也就是说，在 jQuery 对象的 cache 上，将会有一个 1000 的成员，这个成员引用的对象就是 1000 号 DOM 对象的私有扩展对象。1000 号成员的私有数据将被存在在这个对象上。
当一个 DOM 对象需要取得扩展数据的时候，首先通过对象的 expando 属性取得一个键值，然后通过这个键值到 jQuery.cache 中取得自己的扩展对象，然后在扩展对象上读写数据。
复制代码 代码如下:
/// <reference path="jQuery-core.js" />
// 常用方法
function now（） {
return （new Date）.getTime（）;
}
// 扩充数据的属性名，动态生成，避免与已有的属性冲突
var expando = "jQuery" + now（）, uuid = 0, windowData = {};
jQuery.cache = {};
jQuery.expando = expando;
// 数据管理，可以针对 DOM 对象保存私有的数据，可以读取保存的数据
jQuery.fn.data = function （key, value） {
// 读取
if （value === undefined） {
return jQuery.data（this[0], key）;
}
else { // 设置
this.each（
function （） {
jQuery.data（this, key, value）;
}
）;
}
}
// 移除数据，删除保存在对象上的数据
jQuery.fn.removeData = function （key） {
return this.each（function （） {
jQuery.removeData（this, key）;
}）
}

// 为元素保存数据
jQuery.data = function （elem, name, data） { // #1001
// 取得元素保存数据的键值
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
// 为元素计算一个唯一的键值
if （！id） {
id = ++uuid;
}
// 如果没有保存过
if （！cache[id]） {
elem[expando] = id; // 在元素上保存键值
cache[id] = {}; // 在 cache 上创建一个对象保存元素对应的值
}
// 取得此元素的数据对象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if （data ！== undefined） {
thisCache[name] = data;
}
// 返回对应的值
return typeof name === "string" ？ thisCache[name] : thisCache;
}
// 删除保存的数据
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;
}
// 检查是否是一个函数
jQuery.isFunction = function （obj） {
var s = toString.call（obj）;
return toString.call（obj） === "[object Function]";
}


下面的脚本可以保存或者读取对象的扩展数据。

复制代码 代码如下:
// 数据操作
$（"#msg"）.data（"name", "Hello, world."）;
alert（$（"#msg"）.data（"name"））;
$（"#msg"）.removeData（"name"）;
alert（$（"#msg"）.data（"name"））;