读Zepto源码之Data模块

时间 2019-11-16

标签 zepto 源码 data 模块繁體版

原文原文链接

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

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

源码版本

本文阅读的源码为 zepto1.2.0node

GitBook

《reading-zepto》git

内部方法

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 对象中。github

node.attributes 获取到的是节点的全部属性，所以在遍历的时候，须要判断属性名是否以 data- 开头。segmentfault

在存储的时候，将属性名的 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 。

系列文章

附文

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

参考

License

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

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

做者：对角另外一面