位置: 编程技术 - 正文

深入理解jQuery.data() 的实现方式(深入理解中国式现代化论文)

编辑:rootadmin

推荐整理分享深入理解jQuery.data() 的实现方式(深入理解中国式现代化论文),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:深入理解中国式现代化,深入理解新发展理念,推进供给侧结构性改革 的题目,深入理解中国式现代化论文,深入理解中国式现代化论文,深入理解中国式现代化,深入理解新发展理念,深入理解新发展理念,推进供给侧结构性改革,深入理解计算机系统,内容如对您有帮助,希望把文章链接给更多的朋友!

jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据。

下面将分三个部分分析其实现方式:

1. 用name和value为对象附加数据;即传入三个参数,第一个参数为需要附加数据的对象,第二个参数为数据的名称,第三个参数为数据的值。当然,只是获取值的话,也可以不传入第三个参数。

2. 用另一个对象为对象附加数据;即传入两个参数,第一个参数为需要附加的数据对象(我们称之为“obj”),第二个参数也是一个对象(我们称之为“another”);“another”中包含的键值对将会被复制到 “obj” 的数据缓存(我们称之为“cache”)中。

3. 为 DOM Element 附加数据;DOM Element 也是一种 Object ,但 IE6、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题;因此我们将这些数据存放在全局缓存(我们称之为“globalCache”)中,即 “globalCache” 包含了多个 DOM Element 的 “cache”,并在 DOM Element 上添加一个属性,存放 “cache” 对应的 uid 。

用name和value为对象附加数据

使用 jQuery.data() 为普通对象附加数据时,其本质是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。

存放数据的 “cache” 也是一个 object,我们为 “obj” 附加的数据实际上成为了 “cache” 的属性。而 “cache” 又是 “obj” 的一个属性,在 jQuery 1.6中,这个属性的名称是 “jQuery”加上一个随机数(如下面提到的 “jQuery” )。

我们可以用下面的代码来测试 jQuery.data() 的功能:

显示结果为:

在这段代码中,我们首先在 “obj” 上附加了一个属性(名称为“name”,值为“value”),然后通过 $.data(obj, 'name') 来获取所附加的数据。为了深入了解其中的实现机制,我们有使用了一个循环来获取 “obj” 的属性,实际上是取出了在 “obj” 上附加的 “cache”对象。

可以看到,jQuery.data() 实际上为 “obj” 附加到了名为 “jQuery” (这个名称是随机的)的对象,也就是 “cache” 上。用 jquery.data() 方式为对象附加的属性实际上成为了这个 “cache” 的属性。

我们可以用下面的代码实现类似的功能:

function 中的第一行代码定义了 “expando” ,即 "jQuery1.6" 加上一个随机数(0.xxxx),并将其中非数字的部分去掉;这种格式将在jQuery的其他地方用到,这里不做探讨;只需要知道这是一个特殊的名称,并且可以用于标识不同的页面(比如不同 iframe 中的 “expando” 就会有所不同)。

接下来定义了获取数据的函数 getData(), 即从 “cache” 中获取一个属性;实际上也就是返回 cache[name] 。

然后是 setData() 函数,用于设置 “cache” 的属性;实际上也就是设置 cache[name] 的值。

之后是 getCache() , 获取 “obj” 上的 “cache”,即 obj[expando];如果 obj[expando] 为空,则进行初始化。

深入理解jQuery.data() 的实现方式(深入理解中国式现代化论文)

最后公开了 data 方法,先根据传入的 “obj”,获取附加在 “obj” 上的 “cache”; 当传入两个参数时,调用 getData()方法;当传入三个参数时,则调用 setData() 方法。

用另一个对象为对象附加数据

除了以提供 name 和 value 的方式进行赋值,我们还可以直接传入另一个对象( “another” )作为参数。这种情况下,“another” 的属性名称和属性值将被视为多个键值对,从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。

功能测试代码如下:

显示结果如下:

上面的测试代码中,我们先将一个带有两个键值对的 “another” 对象传入,然后分别用 $.data(obj, 'name1') 和 $.data(obj, 'name2') 获取附加的数据;同样,为了深入了解其中的机制,我们通过遍历 “obj” 的方式取出了隐藏的 “cache” 对象,并获得了 “cache” 对象的 “name1” 属性和 “name2” 属性的值。

可以看到,jQuery.data() 实际上为 “obj” 附加了名为 “obj.jQuery” 的对象,也就是 “cache” 上。用 jquery.data() 方式传入的键值对都被复制到了 “cache” 中。

我们可以用下面的代码实现类似的功能:

这段代码是在之前的代码的基础上进行修改的。首先增加了内部函数 setDataWithObject() ,这个函数的实现是遍历 “another” 的属性,并复制到 “cache” 中。

然后,在对外开放的 data 函数中,先判断传入的第二个参数的名称,如果这个参数是一个 Object 类型的实例,则调用 setDataWithObject() 方法。

为 DOM Element 附加数据

由于 DOM Element 也是一种 Object,因此之前的方式也可以为 DOM Element 赋值;但考虑到 IE6、IE7 中垃圾回收的问题(不能有效回收 DOM Element 上附加的对象引用),jQuery采用了与普通对象有所不同的方式附加数据。

测试代码如下:

显示结果如下:

测试代码中,首先通过 document.getElementById 方法获取了一个 DOM Element (当然,也可以用 jQuery 的选择器),然后在这个 DOM Element 上附加了一个属性,随后就从 DOM Element 上取出了附加的属性并输出。

因为考虑到 IE6、IE7 对 DOM Element 上的对象引用的垃圾回收存在问题,我们不会直接在 DOM Element 上附加对象;而是使用全局cache,并在 DOM Element 上附加一个 uid。

实现方式如下:

这段代码与之前的代码相比,增加了 globalCache 和 uuid,并修改了 getCache() 方法。

globalCache 对象用于存放附加到 DOM Element 上的 “cache”,可以视为 “cache” 的“容器”。uuid 表示 “cache” 对应的唯一标识,是唯一且自增长的。uuid 或被存放在 DOM Element 的 “expando” 属性中。

getCache() 函数中增加了一个判断,即 “obj” 具有 “nodeType” 属性,就认为这是一个 DOM Element;这种情况下,就先取出附加在 “obj” 上的 id ,即 obj[expando] ;如果 obj[expando] 未定义,则先用 ++uuid 对其进行初始化;取出 id 之后,就到 globalCache 中找到对应的 “cache” ,即 globalCache[id], 并返回。

到此为止,jQuery.data() 函数的实现就介绍完了;但是,这里还有一个需要思考的问题:为什不都统一用 “globalCache” 存储,而要将 “cache” 直接附加到普通对象上?我认为这应该是一种性能优化的方式,毕竟少一个引用的层次,存取速度应该会略快一些。 jQuery 中这刻意优化的地方非常多,在许多原本可以统一处理的对方都进行了特殊处理。但这在一定程度上,也造成了阅读源码的障碍。当然这是作者(及其他代码贡献者)本身的编程哲学,这里就不加评论了。

标签: 深入理解中国式现代化论文

本文链接地址:https://www.jiuchutong.com/biancheng/376271.html 转载请保留说明!

上一篇:jquery.Callbacks的实现详解

下一篇:获取jqGrid中选择的行的数据(jqgrid获取选中行)

  • 中型企业的标准是什么 划分标准
  • 自查补报以前年度收入可以补在当前属期吗
  • 销售并提供安装的税率
  • 政府补助确认递延所得税
  • 报表的应交税费都包含什么
  • 收到的其他与筹资活动有关的现金包括
  • 土地转让的税费怎么算
  • 结转损益后损益类科目为0吗
  • 防洪基金减免的会计分录怎么写?
  • 企业接到银行通知,借入长期借款的应付利息为15000
  • 税收分类编码如何添加
  • 月底结转应交税费怎么弄
  • 福利性补贴包括哪些
  • 工资薪金个税税率表
  • 出口的增值税到底怎么算的
  • 电商平台收取的手续费
  • 历年亏损企业开什么发票
  • 餐查账征收企业所得税会计分录?
  • 营改增后一般纳税人税率是多少
  • Windows无法启动服务
  • 出售土地印花税怎么计算
  • 税金及附加怎么登明细账
  • 民间非营利组织有哪些
  • 新成立的公司需要报残保金吗
  • 不动产在建工程领用原材料的分录
  • 承租集体土地如何确权
  • PHP:Memcached::decrement()的用法_Memcached类
  • 预付购买材料款会引起会计等式
  • PHP:iconv_mime_decode()的用法_iconv函数
  • 退回已修改是什么意思
  • 成本法的优点是计算较为简便,缺点是
  • 营业费用这个科目还在用吗
  • 与取得收入无关的成语
  • 怎么算土地增值税
  • php抓取网页图片
  • acpi disabled
  • 大屏制作教程视频
  • 库存亏损要缴纳增值税吗
  • 汽车进项税什么时候抵扣
  • 会计中财务费用为负
  • opengl环境光参数
  • 开票是否享受优惠
  • 企业增值税的征收方式
  • 企业拆迁补偿款
  • 收到房租的租金怎么做账
  • 租来的厂房如何交税
  • 货运代理的公司
  • 置换房产流程
  • 收到技术服务费的账务处理
  • 个体工商户怎样为员工缴纳社保
  • 单位车辆保险费
  • 不动产经营租赁属于什么服务
  • 资产减值损失是费用吗
  • 办理营业执照需要什么条件
  • winxp文件夹选项在哪
  • linux添加新硬盘后网卡无法启动
  • linux删除后恢复
  • WIN7系统怎么安装 注音输入法
  • linux操作系统root
  • windows7开始菜单
  • win8 开机
  • javascript折叠菜单
  • 如何执行perl脚本
  • 怎样用在js中使用css的内容
  • python进阶视频
  • nodejs来一打c++扩展
  • jqueryui dialog
  • javascript的dom
  • javascript 二维数组搜索
  • jquery属性选择器,选取所有带href
  • jquery attr和prop
  • no android facet found
  • 烟叶处理
  • 研发费用加计扣除75%还是100%
  • 对税务稽查工作的意见和建议
  • 党建服务中心属于哪个区
  • 法国进囗红酒
  • 福建税务局电子税务局电话多少
  • 税务绩效管理4+4+4+n
  • 先进单位表彰发言稿
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设