jQuery的实现原理的模拟代码 -2 数据部分


Posted in Javascript onAugust 01, 2010

这个数据当然要通过属性来进行存取,但是,有多个属性怎么办呢?,要定义多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有冲突呢?
在 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"));
Javascript 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 #Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
jQuery对象[0]是什么含义?
Jul 31 #Javascript
动态调用CSS文件的JS代码
Jul 29 #Javascript
date.parse在IE和FF中的区别
Jul 29 #Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 #Javascript
jquery中对表单的基本操作代码
Jul 29 #Javascript
You might like
php session和cookie使用说明
2010/04/07 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python基础之入门必看操作
2017/07/26 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
让世界充满爱演讲稿
2014/05/24 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
培训后的感想
2015/08/07 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL