这个数据当然要通过属性来进行存取,但是,有多个属性怎么办呢?,要定义多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有冲突呢?
在 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"));
在 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"));
标签:
jQuery,实现原理
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“jQuery的实现原理的模拟代码 -2 数据部分”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。