读Zepto源码之Data模块

Zepto 的 Data 模块用来获取 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)

首先读取 node 的 exp 属性，从前面可以看到 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 节点的缓存数据，最终分别调用的是 setData 和 getData 方法。

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

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

先看第一层，当有传递 name 和 value 时，表明是设置缓存，遍历所有元素，分别调用 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)
  }
})

原有的 remove 和 empty 方法，都会有 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 最后调用的也就是 DOM 的 data 方法。

$.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模块

附文

• 译：怎样处理 Safari 移动端对图片资源的限制

参考

• Zepto中数据缓存原理与实现
• Element.attributes

License

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

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面