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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
Jquery解析json数据详解
Dec 26 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
微信小程序实现签到弹窗动画
Sep 21 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基础知识:类与对象(5) static
2006/12/13 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
jQuery 遍历函数详解
2015/07/05 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
用Python实现随机森林算法的示例
2017/08/24 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python实现换位加密算法的示例
2018/10/14 Python
python读取图片任意范围区域
2019/01/23 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python输出数学符号实例
2020/05/11 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Python configparser模块应用过程解析
2020/08/14 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
警示教育观后感
2015/06/17 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang