读Zepto源码之Data模块

ZeptoData 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据。

读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

GitBook

reading-zepto

内部方法

attributeData

var data = {}, dataAttr = $.fn.data, camelize = $.camelCase,
    exp = $.expando = 'Zepto' + (+new Date()), emptyArray = []
function attributeData(node) {
  var store = {}
  $.each(node.attributes || emptyArray, function(i, attr){
    if (attr.name.indexOf('data-') == 0)
      store[camelize(attr.name.replace('data-', ''))] =
        $.zepto.deserializeValue(attr.value)
  })
  return store
}

这个方法用来获取给定 node 中所有 data-* 属性的值,并储存到 store 对象中。

node.attributes 获取到的是节点的所有属性,因此在遍历的时候,需要判断属性名是否以 data- 开头。

在存储的时候,将属性名的 data- 去掉,剩余部分转换成驼峰式,作为 store 对象的 key

DOM 中的属性值都为字符串格式,为方便操作,调用 deserializeValue 方法,转换成对应的数据类型,关于这个方法的具体分析,请看 《读Zepto源码之属性操作

setData

function setData(node, name, value) {
  var id = node[exp] || (node[exp] = ++$.uuid),
      store = data[id] || (data[id] = attributeData(node))
  if (name !== undefined) store[camelize(name)] = value
  return store
}

更多时候,储存数据不需要写在 DOM 中,只需要储存在内存中即可。而且读取 DOM 的成本非常高。

setData 方法会将对应 DOM 的数据储存在 store 对象中。

var id = node[exp] || (node[exp] = ++$.uuid)

首先读取 nodeexp 属性,从前面可以看到 exp 是一个 Zepto 加上时间戳的字符串,以确保属性名的唯一性,避免覆盖用户自定义的属性,如果 node 尚未打上 exp 标记,表明这个节点并没有缓存的数据,则设置节点的 exp 属性。

store = data[id] || (data[id] = attributeData(node))

data 中获取节点之前缓存的数据,如果之前没有缓存数据,则调用 attributeData 方法,获取节点上所有以 data- 开头的属性值,缓存到 data 对象中。

store[camelize(name)] = value

最后,设置需要缓存的值。

getData

function getData(node, name) {
  var id = node[exp], store = id && data[id]
  if (name === undefined) return store || setData(node)
  else {
    if (store) {
      if (name in store) return store[name]
      var camelName = camelize(name)
      if (camelName in store) return store[camelName]
    }
    return dataAttr.call($(node), name)
  }
}

获取 node 节点指定的缓存值。

if (name === undefined) return store || setData(node)

如果没有指定属性名,则将节点对应的缓存全部返回,如果缓存为空,则调用 setData 方法,返回 node 节点上所有以 data- 开头的属性值。

if (name in store) return store[name]

如果指定的 name 在缓存 store 中,则将结果返回。

var camelName = camelize(name)
if (camelName in store) return store[camelName]

否则,将指定的 name 转换成驼峰式,再从缓存 store 中查找,将找到的结果返回。这是兼容 camel-name 这样的参数形式,提供更灵活的 API

如果缓存中都没找到,则回退到用 $.fn.data 查找,其实就是查找 data- 属性上的值,这个方法后面会分析到。

DOM方法

.data()

$.fn.data = function(name, value) {
  return value === undefined ?
    $.isPlainObject(name) ?
    this.each(function(i, node){
    $.each(name, function(key, value){ setData(node, key, value) })
  }) :
  (0 in this ? getData(this[0], name) : undefined) :
  this.each(function(){ setData(this, name, value) })
}

data 方法可以设置或者获取对应 node 节点的缓存数据,最终分别调用的是 setDatagetData 方法。

分析这段代码,照例还是将三元表达式一个一个拆解,来看看都做了什么事情。

value === undefined ? 三元表达式 : this.each(function(){ setData(this, name, value) })

先看第一层,当有传递 namevalue 时,表明是设置缓存,遍历所有元素,分别调用 setData 方法设置缓存。

$.isPlainObject(name) ?
    this.each(function(i, node){
    $.each(name, function(key, value){ setData(node, key, value) })
  }) : 三元表达式

data 的第一个参数还支持对象的传值,例如 $(el).data({key1: 'value1'}) 。如果是对象,则对象里的属性为需要设置的缓存名,值为缓存值。

因此,遍历所有元素,调用 setData 设置缓存。

0 in this ? getData(this[0], name) : undefined

最后,判断集合是否不为空( 0 in this ), 如果为空,则直接返回 undefined ,否则,调用 getData ,返回第一个元素节点对应 name 的缓存。

.removeData()

$.fn.removeData = function(names) {
  if (typeof names == 'string') names = names.split(/\s+/)
  return this.each(function(){
    var id = this[exp], store = id && data[id]
    if (store) $.each(names || store, function(key){
      delete store[names ? camelize(this) : key]
    })
  })
}

removeData 用来删除缓存的数据,如果没有传递参数,则全部清空,如果有传递参数,则只删除指定的数据。

names 可以为数组,指定需要删除的一组数据,也可以为以空格分割的字符串。

if (typeof names == 'string') names = names.split(/\s+/)

如果检测到 names 为字符串,则先将字符串转换成数组。

return this.each(function(){
  var id = this[exp], store = id && data[id]
 ...
})

遍历元素,对所有的元素都进行删除操作,找出和元素对应的缓存 store

if (store) $.each(names || store, function(key){
  delete store[names ? camelize(this) : key]
})

如果 names 存在,则删除指定的数据,否则将 store 缓存的数据全部删除。

.remove()和.empty()方法的改写

;['remove', 'empty'].forEach(function(methodName){
  var origFn = $.fn[methodName]
  $.fn[methodName] = function() {
    var elements = this.find('*')
    if (methodName === 'remove') elements = elements.add(this)
    elements.removeData()
    return origFn.call(this)
  }
})

原有的 removeempty 方法,都会有 DOM 节点的移除,在移除 DOM 节点后,对应节点的缓存数据也就没有什么意义了,所有在移除 DOM 节点后,也需要将节点对应的数据也清空,以释放内存。

var elements = this.find('*')
if (methodName === 'remove') elements = elements.add(this)

elements 为所有下级节点,如果为 remove 方法,则节点自身也是要被移除的,所以需要将自身也加入到节点中。

最后调用 removeData 方法,不传参清空所有数据,在清空数据后,再调用原来的方法移除节点。

工具方法

$.data

$.data = function(elem, name, value) {
  return $(elem).data(name, value)
}

data 最后调用的也就是 DOMdata 方法。

$.hasData

$.hasData = function(elem) {
  var id = elem[exp], store = id && data[id]
  return store ? !$.isEmptyObject(store) : false
}

判断某个元素是否已经有缓存的数据。

首先通过从缓存 data 中,取出对应 DOM 的缓存 store ,如果 store 存在,并且不为空,则返回 true ,其实情况返回 false

系列文章

  1. 读Zepto源码之代码结构
  2. 读Zepto源码之内部方法
  3. 读Zepto源码之工具函数
  4. 读Zepto源码之神奇的$
  5. 读Zepto源码之集合操作
  6. 读Zepto源码之集合元素查找
  7. 读Zepto源码之操作DOM
  8. 读Zepto源码之样式操作
  9. 读Zepto源码之属性操作
  10. 读Zepto源码之Event模块
  11. 读Zepto源码之IE模块
  12. 读Zepto源码之Callbacks模块
  13. 读Zepto源码之Deferred模块
  14. 读Zepto源码之Ajax模块
  15. 读Zepto源码之Assets模块
  16. 读Zepto源码之Selector模块
  17. 读Zepto源码之Touch模块
  18. 读Zepto源码之Gesture模块
  19. 读Zepto源码之IOS3模块
  20. 读Zepto源码之Fx模块
  21. 读Zepto源码之fx_methods模块
  22. 读Zepto源码之Stack模块
  23. 读Zepto源码之Form模块

附文

参考

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

作者:对角另一面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

jQuery的事件模型

前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓...

3308
来自专栏吴伟祥

Shell脚本学习总结(二) 流程控制 转

Shell case语句为多选择语句。可以用case语句匹配一个值与一个模式,如果匹配成功,执行相匹配的命令。case语句格式如下:

542
来自专栏CodingToDie

java 代理

java 代理 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额...

3324
来自专栏腾讯IVWEB团队的专栏

yeoman-generator 中的 run loop 实现

yeoman genenrator 的 run loop,每一个添加进去的方法都会在 generator 调用的时候被调用,而且通常来讲,这些方法是按照顺序调用...

1150
来自专栏Java学习网

Java中使用栈实现一个队列,实用代码

本功能提供下面四个方法: push(x) ——添加元素x到队列。 pop()——从队列中删除前面的元素。 peek()——得到前面的元素。 empty()——返...

2419
来自专栏对角另一面

lodash源码分析之缓存方式的选择

每个人心里都有一团火,路过的人只看到烟。 ——《至爱梵高·星空之谜》 本文为读 lodash 源码的第八篇,后续文章会更新到这个仓库中,欢迎 star:po...

3219
来自专栏好好学java的技术栈

【通知】+ java基础提升篇:Java 序列化的高级认识

902
来自专栏我的博客

php命名空间详解

1、命名空间概述 从广义上来说,命名空间是一种封装事物的方法。在很多地方都可以见到这种抽象概念。例如,在操作系统中目录用来将相关文件分组,对于目录中的文件来说,...

2848
来自专栏Python攻城狮

Python-time模块一、python time模块的简介 二、python time模块函数

注意:时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量。我们运行“type(time.tim...

783
来自专栏python爬虫日记

转载:python的编码处理(一)

最近业务中需要用 Python 写一些脚本。尽管脚本的交互只是命令行 + 日志输出,但是为了让界面友好些,我还是决定用中文输出日志信息。 

652

扫码关注云+社区