1.读Zepto源码之Data模块
读Zepto源码之Data模块
Zepto的Data模块主要负责处理DOM节点的数据,包括获取和存储与DOM相关的信息。本文将深度解析Data模块的工作机制,以Zepto1.2.0版本的源码为例。《reading-zepto》在GitHub上开源,欢迎star。bbs的java源码
在内部方法中,attributeData负责获取节点中所有data-*属性的值,并将它们存储到store对象中。node.attributes获取的是所有属性,所以遍历时需要判断属性名是否以"data-"开头。存储时,去掉"data-"并转换为驼峰式,作为store对象的键。属性值默认为字符串,奇闻趣事源码为方便操作,通过deserializeValue方法转换成对应的数据类型。
setData方法用于存储数据,通常不需要写入DOM,而是在内存中进行操作。它首先读取node的exp属性,以确保属性名的图片抽奖 源码唯一性,避免覆盖用户自定义属性。如果node尚未标记exp,则设置数据存储。从data中获取缓存数据,如果为空,则调用attributeData获取所有data-*属性的值并缓存。
getData方法根据指定的同花顺 颜色 源码属性名获取缓存值。没有指定名则返回所有缓存,缓存为空则调用setData。如果指定name在store中,则返回结果。兼容camel-name参数形式,提供更灵活的API。如果store中未找到,婚礼定制源码则返回通过$.fn.data查找的结果。
data方法能设置或获取节点的缓存数据,调用setData或getData。当传递name和value时,设置缓存,遍历所有元素进行设置。对于对象传值,遍历设置缓存。最后返回第一个元素的name缓存。
removeData方法用于删除缓存数据。若无参数,则清空所有,若有参数则仅删除指定数据。names为字符串时先转换为数组,遍历元素进行删除操作,根据names删除指定数据或清空store缓存。
.remove和.empty方法在移除DOM节点后,需要清空对应节点的数据以释放内存。elements包含所有子节点,如果是.remove方法,自身也被移除,因此加入到要删除的节点中。最后调用removeData方法清空数据,再移除节点。
$.data方法最终调用DOM的.data方法。$.hasData判断元素是否有缓存数据。通过从缓存中获取对应DOM的缓存store,若store存在且不为空,则返回true,反之返回false。
所有文章在微信公众号上同步发布,欢迎关注和提出宝贵意见。