读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 条评论
登录 后参与评论

相关文章

来自专栏前端儿

编写高质量 JavaScript -- 知识点小记

此番改善之后,匿名function里面的变量作用域不再是window,而是局限在函数内。

1661
来自专栏Golang语言社区

GO语言标准库概览

在Go语言五周系列教程的最后一部分中,我们将带领大家一起来浏览一下Go语言丰富的标准库。 Go标准库包含了大量包,提供了丰富广泛的功能特性。这里提供了概览仅仅是...

3846
来自专栏進无尽的文章

编码篇-继承+通知看方法的实现和delloc方法的调用

UITableViewCell B继承自 UITableViewCell A, UITableViewCell A 注册了名为A的通知,通知绑定的方法为 方...

812
来自专栏Golang语言社区

GO语言标准库概览

在Go语言五周系列教程的最后一部分中,我们将带领大家一起来浏览一下Go语言丰富的标准库。 Go标准库包含了大量包,提供了丰富广泛的功能特性。这里提供了概览仅仅是...

36210
来自专栏Java Web

Java 面试知识点解析(四)——版本特性篇

735
来自专栏安恒信息

一次开发的意外逆向之旅

笔者最近从事windows内核开发的时候因为功能需要,所以需要对PspSetCreateProcessNotifyRoutine回调函数数组进行遍历,于是笔者照...

571
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

843
来自专栏平凡文摘

JDK 10 的 109 项新特性

772
来自专栏Java成长之路

函数重构之道

以下代码做了好几件事情。它创建缓冲区、获取页面、搜索继承下来的页面、渲染路径、添加神秘的字符串、生产HTML等等。

772
来自专栏达摩兵的技术空间

当JSON.parse”遇上”非键值对

在json大行其道并作为前后端主要通讯的数据格式之一时,对json本身的使用和了解多少人都会有些概念,当然随之而来的也是对json的对象以及其字符串形式的互相转...

762

扫码关注云+社区