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

相关文章

来自专栏Python

linux每日命令(13):more命令

more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上。 more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(s...

1041
来自专栏前端小作坊

原型链上的DOM Attributes

Chrome开发小组最近发表声明他们正在將DOM properties移动到原型链中。这个更新将会在Chrome 43(2015年4月发布beta版本)中实现。...

1143
来自专栏前端小叙

js粘贴事件paste简单解析及遇到的坑

在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题。 目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支...

7136
来自专栏大内老A

我所理解的Remoting(1):Marshaling & Activation[上篇]

什么是Marshaling &Activation 对任何一项分布式技术(Distributed Technology),比如Remoting,XML Web ...

1928
来自专栏赵俊的Java专栏

无限级菜单/权限树该如何设计

常用的树形显示插件有: JsTree, zTree, Layui Tree, Bootstrap Tree View 等。

6993
来自专栏一“技”之长

Xcode中修改变量名、类名及字符串的替换操作

        在做iOS开发代码优化的工作时,优化代码结构之前,我们应该先整理好工程的外貌,将文件和类的命名进行规范,在Xcode中为我们提供了方便而强大的名...

902
来自专栏JetpropelledSnake

Django学习笔记之Django Form表单详解

这是一个非常简单的表单。实际应用中,一个表单可能包含几十上百个字段,其中大部分需要预填充,而且我们预料到用户将来回编辑-提交几次才能完成操作。

881
来自专栏林德熙的博客

WPF 触摸到事件

在 WPF 界面框架核心就是交互和渲染,触摸是交互的一部分。在 WPF 是需要使用多个线程来做触摸和渲染,触摸是单独一个线程,这个线程就是只获得触摸,而将触摸转...

2932
来自专栏极客猴

Django 学习笔记之模板

本文是自己 Django 学习笔记系列的第四篇原创文章。主要接着篇文章的视图内容,讲解模板的用法。另外也说下 Django 学习笔记系列的安排。自己计划大概 1...

440
来自专栏自由而无用的灵魂的碎碎念

Tips in Visual Studio 2008

.NET几乎程序员都在使用visual studio 2008进行开发。可是,你通过它达到最大的开发效率了吗?

1262

扫码关注云+社区

领取腾讯云代金券