位置: 编程技术 - 正文

浅析jQuery 3.0中的Data(jquery1.11.3)

编辑:rootadmin

推荐整理分享浅析jQuery 3.0中的Data(jquery1.11.3),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery3.6,jquery3.6,jquery3.5.1,jquery3.5.1,jquery3.5.1,jquery3.2.1,jquery3.6,jquery3.3.1,内容如对您有帮助,希望把文章链接给更多的朋友!

jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery。这个版本从年月开始,其中发布过一次beta 版(/1/,)和候选版(//)。一路走来,颇为不易。

一、Data浅析

jQuery 3.0 中的 Data 是内部使用的,定义为一个“类”。一共用它创建了两个对象,dataPriv 和 dataUser。Data 有 1 个对象属性(expando)和类属性(uid),有 6 个方法,如下

下面分别解读

1、Data.uid

这是一个从 1 开始用来自增的数字。

2、expando

由 jQuery.expando 和 uid 组合而成,它用来作为元素(如DOM元素)的key,是唯一的。jQuery.expando 的生成如下

即 'jQuery' + (版本号 + 随机数),然后把非数字的都去掉,比如

去掉非数字变为

jQuery 3.0 内部变量 dataPriv 和 dataUser 生成 expando 如下

第三部分是随机数,每次刷新都会变,其它部分的不变。

3、cache

cache 方法会给 owner 上绑定一个对象作为存储,owner 必须满足 acceptData 的,cache 会以 this.expando 为线索 key。owner 有两种,一中是DOM元素(nodeType为1和9),另一种则是普通的JS对象。诸如 文本节点(nodeType=3)、注释节点(nodeType=8) 一律不添加。

acceptData 的定义如下

acceptData 在 3.0 中一共有 3 处使用,分别为

Data 类的 cache 方法,为私有方法不提供给程序员使用。$.cleanData 方法,清空元素关联的所有缓存数据。为公开方法,但很少使用。该方法被用在 empty、html、replaceWith、remove 方法中。$().trigger 方法,主动派发事件,为公开方法。

如果是 DOM 元素,则直接使用点操作符赋值,如果是普通 JS 对象则使用 ES5 的 Object.defineProperty 方法,这也是 jQuery 3.0 会使用新 API 的体现。

转换成如下代码

cache 方法就是这样,传入 owner,只有第一次会 set ,返回 value (一个空对象),之后取到 value 后直接返回。

源码

4、set

上面的 cache 方法为 owner 建立一个以 expando 为 key 的空对象,后面所有的方法都围绕这个空对象来展开,这个空对象就被称为缓存对象,后面所有的数据都添加到它上面。set 就是给这个对象来添砖加瓦,set 每次都是先取回 cache ,再给其添加新的属性及数据。如果 data 是字符串,则以它为 key 添加,如果是对象,则遍历它添加。只需注意一点,横线连接符内部会被转成驼峰格式,这也是为了对 H5 data-xxx 的兼容 。

源码

5、get

get 简单至极,传 key 则从 cache 上取回该 key 的值,无则取回整个 cache。

源码

6、access

这个方法即时 getter,也是 setter,如此而已。

getter 条件

key 是 undefined,这时取整个 cachekey 是字符串且value 是undefined,这是取指定 key 的值

setter 条件

浅析jQuery 3.0中的Data(jquery1.11.3)

owner、key、value 这三个参数都传

源码

7、remove

清空绑定元素(owner)上面的缓存对象,依然需要先通过 this.expando 拿到 cache,如果传了 key 则删除指定key的值(key自身也被删除)。当然 jQuery API 保持已有的方便性,key 可以为一个数组,这样可以批量删除多个 key。如果 key 没传则将整个 cache 删除,这里区分了 DOM 和普通 JS 对象,DOM 对象使用undefined赋值,JS 对象则使用 delete。

源码

8、hasData

用来判断 owner 上是否有缓存数据,返回 true 或 false。

源码

二、Data在jQuery内部的使用

以上解读完了 Data 的所有方法,上面也提到 Data 类是在 jQuery 内部使用的,一共创建了它的两个对象:dataPriv 和 dataUser。

这两个对象在 3.0.0 中有着明确的分工,dataPriv 可以猜测到是 “data” 和 “private” 两个单词的组合后简写。即 dataPriv 是私有的用来服务 jQuery 内部方法,dataUser 用来服务那些公开给用户使用的方法。

下面看下这两个对象分布在哪些模块中使用。

完整版点击展开可查看

以上可以看到,除了“公共”,DataPriv 用在了 jQuery 的 队列、动画、事件等模块;dataUser 用在了数据缓存及dataAttr模块。

“公共” 是指这三个方法内都用到了 dataPriv 和 dataUser

$.hasData(elem)

用来判断 elem 上是否绑定了相关的数据缓存,返回 true 和false,只有 dataPriv 和 dataUser 上都没有才返回 false

源码

$.cleanData(elems)

清空 elem 上绑定的所有数据缓存,理所当然的需要同时清空 dataPriv 和 dataUser 上的。注意:虽然这个方法在公开暴露在了 $ 上, 但官网API上却没有该方法的介绍。另使用不当会造成严重后果,比如绑定了事件后(.on),调用该方法,绑定的事件将全部失效。因为会清空 dataPriv 内的所有数据。

cloneCopyEvent(src, dest)

这是一个内部方法,$.clone 会使用到它。克隆元素时除了会克隆node节点外,绑定在node上的数据也会被克隆过去。比如

把 elem 克隆给 cloneNode,此时 elem 上添加的事件 cloneNode 上也会有。

三、1.x.x 和 2.x.x 的比较

jQuery 1.x 系列 和 2.x 系列的版本对 数据缓存模块的实现差异还是很大的。大家可以对比我年的这篇文章

1. 缓存的数据结构

1.x (直到1..2) 缓存都是存储在 jQuery.cache 上的,2.x(包括3.x) 则使用了一个内部类 Data 做缓存,其主要用到了两个对象 dataPriv 和 dataUser。很明显 2.x 做的更好,它所有的缓存数据都是私有的,不会存在被误写的风险,而 1.x 的 jQuery.cache 是公开的,如果被误写(比如某个同学想当然的给$上添加一个cache对象)后果不堪设想。

2. jQuery._data

看到这个下划线就知道是私有的(约定式),在 1.x 中是仅在内部使用的,不提供给开发者。以 1..2 示例、这个方法被事件模块、队列模块、动画模块、setGlobalEval、cloneCopyEvent、fixCloneNodeIssues、domManip、showHide、defaultPrefilter、toggleClass 使用。3.x 则使用 dataPriv 和 dataUser 替代,大家可以对比看看。

(2/3).x 相比 1.x 明显更优,dataPriv 和 dataUser 是真正的私有的(封装的更好,更安全),比起 1.x 约定式的私有 jQuery._data。虽然 3.0.0 还保守的兼容了 jQuery._data,相信过不了多久的后续版本就会剔除。

3. 重构

1.x 以 $._data 为中心,以它来辅助实现其它 API, (2/3).x 以 dataPriv/dataUser 为中心来实现。(2/3).x 将代码重构后提取出了 Data 类,更加清晰。

以上所述是小编给大家介绍的jQuery 3.0中的Data的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

简单实现的JQuery文本框水印插件 采用JQuery实现文本框的水印效果非常容易,效果如下:代码片段,定义要应用水印效果的文本框的样式:.watermark{color:#cccccc;}将JavaScript代码封装成JQuery

jQuery.Callbacks()回调函数队列用法详解 本文实例讲述了jQuery.Callbacks()回调函数队列用法。分享给大家供大家参考,具体如下:1、jQuery.CallbacksThejQuery.Callbacks()function,introducedinversion1.7,returnsamulti

jQuery实例—选项卡的简单实现(js源码和jQuery) 分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤。!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

标签: jquery1.11.3

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

上一篇:jQuery中的一些常见方法小结(推荐)(jquery技巧)

下一篇:简单实现的JQuery文本框水印插件(jquery简单吗)

  • 出口退税分类管理办法最新
  • 适用增值税零税率的有
  • 公司为员工报销的医药费
  • 法人怎么从公账上转账
  • 购入不动产进项税额抵扣
  • 企业的所得税
  • 哪些进项税额可以转出
  • 银行端查询缴税凭证怎么盖章
  • 简易计税项目税金要计入成本吗
  • 少收的应收和应付账款怎么处理?
  • 员工出差住宿费计入什么科目
  • 可变股权转让对价会计处理怎么做?
  • 结转安装费用的会计分录
  • 应征消费税的汽车为啥不能抵扣
  • 网上纳税申报怎么填
  • 商业保险税前扣除限额
  • 收到专票未抵扣,销售方作废怎么处理
  • 打印出来的明细账怎么装订
  • 税率开错的增值税发票怎么办
  • 软件企业超税负率怎么算
  • 应付票据属于什么类账户
  • 运输公司购买机票怎么买
  • 进项税转出如何申报纳税
  • 企业固定资产清单表格
  • 增值税销售额怎么看
  • 资产减值损失怎么计提
  • win10锁屏界面windows聚焦什么意思
  • win7如何调出浏览器
  • git pull远程
  • 小规模纳税人的企业所得税税率
  • 财务处理程序的方法
  • 收购农产品进项税抵扣税率是多少
  • php的用处
  • 北极熊睡觉图片卡通
  • 公司车辆缴纳车船税需要什么资料
  • 弃置费用预计负债递延所得税怎么处理
  • php语言之面向对象编程 educoder
  • 应收账款与预收账款重分类表怎么做
  • 如何测试php
  • 工会经费缴纳后会返还吗
  • phpcms安装
  • 二房东开票需要哪些资料
  • 为什么盈余公积减少,未分配利润增加
  • 劳务报酬包括哪些
  • 补缴以前年度的印花税会计分录
  • 企业营业外收入有哪些
  • 进项税额转出是借方科目还是贷方科目
  • 清算期间发生的利息支出应计入
  • 个人独资企业进行委托管理要签订劳动合同
  • 工会经费为0是不用申报的?
  • 职工薪酬费用属于什么费用
  • 电子缴税付款凭证是什么结算方式
  • 预交企业所得税税率
  • 个人交五险一金多少钱一个月
  • 债务抵消的构成要件
  • sql查询使用临时表
  • windows server 2003 sp1.
  • windows2008 iis7如何取消目录执行权限的详细图文介绍
  • mac内存管理在哪里
  • 安装win7/Win10双系统,磁盘如何分区?
  • win7怎么下到u盘
  • windows 8/10whql
  • opengl画曲线
  • python条件语句的基本结构
  • opengl超级宝典pdf
  • 一个简单的防偷技巧
  • 利用python读取文件
  • angularjs1.5
  • 扩展坞哪个牌子比较好
  • 网页过关类游戏
  • javascript学习指南
  • 陌陌2021年最近事件
  • JavaScript中的math.pi
  • Python中使用装饰器来优化尾递归的示例
  • 甘肃税务局电子税务局app
  • 美国买东西邮寄怎么寄
  • 江苏国税电子税务局开票流程
  • 税纳税申报表
  • 微观经济学的十大原理
  • 年报基础数据怎么查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设