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实现发送文章到手机的代码
Dec 26 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
如何用threejs实现实时多边形折射
May 07 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迭代器的内部执行过程详解
2013/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
js输出列表实现代码
2010/09/12 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python文档生成工具pydoc使用介绍
2015/06/02 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
企业出纳岗位职责
2014/03/12 职场文书
五年级学生期末评语
2014/12/26 职场文书
会议主持词通用版
2019/04/02 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
Python实现对齐打印 format函数的用法
2022/04/28 Python