对 jQuery 中 data 方法的误解分析

今天 谢亮 兄弟和我讨论一个东西的时候，谈到了性能，他用的是 attr 操作自定义属性 data-uid，我说用 data 好，因为是 dataset 实现，然后他去翻了下 jQuery 源码和我说，没有发现这个东西，我就纳闷了。于是我去仔细读了下 data 方法的源码，才发现我一直误会了，再此，向之前问我 data 方法的群友道歉，我 "骗" 了你们，你们来打我吧。

今天我就重新解释下 data 方法，先看下 jQuery 1.11.0 的手册里肿么说的吧，请移步至http://shouce.jb51.net/jquery/data.html、
用法这里说的很清楚了，但是内部是怎么实现的呢？ 戳我看源码  (看不懂没关系，我会简单分析下他的流程)

其实是这样的，当我们执行例如这样的语句时 $("#id").data("test"); (简化后的过程)
第一步: jQuery 会获取到 $("#id") 元素，对吧、
第二步: 执行到 data方法 的时候，他会通过 attributes 取我们要的对应值。
第三步: 返回结果给我们，然后 jQuery 把值缓存到内部对象里
第一次取的时候，我们可以得到的 undefined，字符串，数字或者解析后的json。 

那有人会说这个和 attr 有什么区别呢？
当我们第二次执行 $("#id").data("test"); 的时候：
第一步: jQuery 会获取到 $("#id") 元素，和上面一样。
第二步: 执行到 data方法 的时候，从 jQuery 的缓存中取值
第三步: 返回结果给我们 

发现第二步不同了，对吧，为什么不是从 attributes 取值，而是从缓存中取呢？
缓存其实是js的对象，简单说就类似 var cache = {}; jQuery 在第一次取值之后就会保存到这个缓存对象中，这样我们再次操作的时候就非常快了、
往往性能的损耗都是在 dom 操作上，所以避免重复操作 dom 是非常必要的。 

到这，也能看出他和 attr 最大的区别了，比如 <div id="id" data-test="hehe"></div>
$("#id").data("test", "123"); 执行后依然是 data-test="hehe"
$("#id").attr("data-test", "123"); 执行后会是 data-test="123"

那么我们要给一个元素赋值值，或者对象的时候他们有什么区别呢？比如 <div id="id" data-test="hehe"></div>
$("#id").data("test", {str: "hehe"}); 会把 {str: "hehe"} 赋值给 缓存，元素节点上依然是 data-test="hehe"
$("#id").attr("data-test", {str: "hehe"}); 执行后会是 data-test="[object Object]"
这个应该也有不少人遇到，至少群里有不少人问过这个问题。

其实我之前也没骗你们，自定义属性没必要老是 attr 他，data 是 jQuery 赋予我们的一把瑞士军刀，非常锋利的。

好了，我是懒人，懒的配图，已经写了不少字了，如果有什么说的不对的地方，你们来打我吧

赞 (0)

相关推荐

  • jQuery 3.0 的变化及使用方法

    jQuery 3.0 的变化及使用方法

    jQuery ,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器.自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松. 时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. •jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本 •jQuer

  • jquery操作HTML5 的data-*的用法实例分享

    阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. jquery 里已经内置这个方法. 通过 $('#content').data('list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性. <!DOCTYPE HTML> <html> <

  • jQuery中使用data()方法读取HTML5自定义属性data-*实例

    主要的方法如下: 复制代码 代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码 代码如下: <div data-role = "page" data-last-value = "43" data-hidden = "true" data-options

  • 浅析jQuery 3.0中的Data

    浅析jQuery 3.0中的Data

    jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery.这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一路走来,颇为不易. 一.Data浅析 jQuery 3.0 中的 Data 是内部使用的,定义为一个"类".一共用它创建了两个对象,dataPriv 和 dataUser.Data 有 1 个对象属性(expando)和类属性(uid),有 6 个方法,如下 下面分别解读 1.Data.ui

  • jQuery表格插件datatables用法总结

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 使用方

  • 解决3.01版的jquery.form.js中文乱码问题的解决方法

    网上搜了很多方法,可能因为我用的这jquery.form.js是3.01版,也就是今年3月6日才发布的版本(汗...就是前天),所以普遍不太管用.至于低版本的是否管用,这个我没有去考证,但大部分还是不负责任的Copy Copy Copy .还有一些方法是在提交前对所有的值先编码,我觉得这个太麻烦,额外增加了不少的前端代码量,也就没有采取. 好吧,那还是自己来处理吧.首先我们要找到切入点,也就是解决问题的入口.既然我们是要对JS传递的数据进行编码,那么首先肯定要从数据的传递函数开始.我调用的是aj

  • jquery datatable后台封装数据示例代码

    1.数据转换类 public class DataTableReturnObject { private int iTotalRecords; private int iTotalDisplayRecords; private String sEcho; private String[][] aaData; public DataTableReturnObject(int totalRecords, int totalDisplayRecords, String echo, String[][]

  • JQuery中dataGrid设置行的高度示例代码

    复制代码 代码如下: columns:[[ {field:"activitycontent",title:'活动内容',width:fixWidth(0.18),align:"center",halign:"center", formatter:function(value,rec){ if(value.indexOf("src")<0){ if(rec.activitycontent.length>Math.ce

  • bootstrap data与jquery .data

    jquery官网对.data函数描述是:在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值. 存储键值(key/value): $("body").data("foo", 52); $("body").data("bar", { myType: "test", count: 40 }); $("body").data({ baz: [ 1, 2,

  • jquery用data方法获取某个元素上的事件

    jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的a

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

随机推荐