读jQuery源码之六(Data缓存和Queue队列)

源码3523-3706 Data对象及原型定义

1.accessData方法和Data函数。

1.1 accessData判断传入的节点类型是否属于:元素节点和document节点

1.2 Data函数:给Data添加了一个cache对象,并且给这个对象添加了一个属性0,默认值为{}

这里有一个地方需要注意,Data函数里面使用了Object.defineProperty和Object.defineProperties方法。descriptor里面定义get或set等。如果没有定义enumerable的值默认情况下为false。这就回导致你定义了一个熟悉,for in遍历的时候获取不到这个属性。这里需要注意下,可以直接读取,但是无法for in。2.Data.prototype:这里面定义了一些方法包含key,set,get,remove,access,hasData,discard.这里值得说的是key,这个机制是我个人觉得非常优秀。通过data给Dom元素和javascript对象提供了统一的数据设置,读取,移除等入口。

2.1这里通过key来映射存放到cache里面的数据,而不是直接把设置的属性放到元素里面。我觉得有如下优点:提高性能,针对一个元素如果添加多个自定义属性,操作和读取会触发多次DOM操作。使用key在中间映射,大大提高性能。

源码3707-3879 声明自定义和内部使用的两个data对象进行扩展,以及对HTML5里的data-属性,封装jQuery里面的data方法对外提供

源码3882-4013 队列部分

3.队列是基于Data数据缓存和异步队列Deferred:1.7的版本里面使用Data是使用的存放内部数据的方式,但是我在2.1.4的版本里面并没有看到使用,而是统一使用了跟key来关联的方式。与给元素设置数据无异。内部声明的data_user和data_priv用法是一样,没有差别。

4.queue方法:添加方法到Data缓存队列里面。dequeue:出队并且函数调用,通过.call的方式。

待续…

作者:张雪飞
出处:https://zhangxuefei.site/p/10
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注