HTML5数据存储方案data与jQuery数据存储方案$.data()的区别

我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法。主要有data()和removeData()这2个实例方法。通过下面的例子和执行结果可以看到:$.fn.data()和$.fn.removeData()跟$.data的使用方式没有什么差别。

// 支持任何数据类型
  2. $( "body" ).data( "name", "xx" );
  3. $( "body" ).data( "sex", "male" );
  4. $( "body" ).data( "foo", 100 );
  5. $( "body" ).data( "object", {myType: "test", count: 40 } );
  6. $( "body" ).data("array", [ 1, 2, 3 ]);
  7. // data()获取单个属性console.log($( "body" ).data( "foo" ));
  8. // 获取所有属性console.log($( "body" ).data());
  9. // 删除属性$( "body" ).removeData("foo");console.log($( "body" ).data());
  10. // 批量修改属性$( "body" ).data({"new" : 123, "name":"yy", "sex" : "female"});console.log($( "body" ).data());  

接着我们看下:jquery数据缓存方案与HTML5中data-的关系。如果html元素有自定义属性data-,那么调用$.fn.data()的时候会获取这些属性的值。

  1. <div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
  2. <script>  console.log($("#one").data("role" ) === "page");
  3.  console.log($("#one").data("lastValue" ) === 43);
  4. console.log($("#one").data("hidden" ) === true);
  5. console.log($("#one").data("options" ).name === "John");
  6. </script>  

  1. 可以看到:jQuery获取data-*属性的时候,会自动进行数据类型转换,支持数字、对象和数组等类型。如果我们不想做这种自动类型转换,那么可以使用attr()函数获取原始值。
<div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
<script>  var domOne = $("#one")[0];    console.log($.data(domOne));
         console.log($("#one").data("role" ) === "page");  console.log($.data(domOne));
  console.log($("#one").data("lastValue" ) === 43);   console.log($.data(domOne));        console.log($("#one").data("hidden" ) === true);    console.log($.data(domOne));        console.log($("#one").data("options" ).name === "John");    console.log($.data(domOne));
</script>

通过代码1的执行结果,可以得出2点结论:

1.HTML5中的data-*属性,会被jQuery附加到HTMLElement对象上,这就是为什么我们可以通过$.data()获取HTML5自定义属性值的原因。

2.jQuery获取data-*是懒惰的、按需的。如果代码中没有使用这些HTML5自定义属性,那么jQuery是不会附加这些属性到HTMLElement对象上的。

代码2:

view plaincopy to clipboardprint?

 1. <div id="one" data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
  2. <script>  var domOne = $("#one")[0];
  3.  console.log($("#one").data("role" ) === "page");
  4.   console.log($.data(domOne));
  5.   console.log($.data($("#one")[0]));
  6. console.log($.data($("#one")));</script>  

更加可以证实:data-*是被绑定到HTMLElement对象上的,而不是jQuery封装后的对象上。

代码3:

view plaincopy to clipboardprint?

 1. <div id="b" data-name="b" data-hobby="swim"></div>
  2. <script>
  3. // 试图使用jQuery修改name属性
  4. $("#b").data("name","newb");
  5. // 使用DOM修改
  6. $("#b")[0].dataset.hobby = "run";
  7. console.log(document.getElementById("b").dataset.name);
  8.  console.log(document.getElementById("b").dataset.hobby);</script>  

可以看到:使用jQuery修改属性只是在内存中的操作,并不会刷新dom。但是通过js中的dataset修改时候,会刷新DOM,这是两者最大的不同。

代码4:

view plaincopy to clipboardprint?

  1. <div id="a" data-name="a" data-hobby="books"></div>
  2. <script>
  3. var domA = document.getElementById("a");
  4.  console.log(domA.dataset.name);//a
  5. console.log($("#a").data("name"));//a
  6. // 修改name
  7.  domA.dataset.name = "aty";
  8.  console.log(domA.dataset.name);//aty
  9.  console.log($("#a").data("name"));//结果是a,不是我们期望的aty
  10. // 修改hobby
  11.  domA.dataset.hobby = "run";
  12.  console.log(domA.dataset.hobby);//run
  13.  console.log($("#a").data("hobby"));//run
  14. </script>  

这里需要特别注意:jQuery只会在第一次访问data-的时候,将属性值加载到内存中;之后就和data-无关了。The data-attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)。也就是说:data-*属性只是起初始化的作用。

至此:jQuery数据缓存和HTML5 data-属性介绍完毕,简单总结下比较关键的几点:

1.jQuery读取data-会自动做数据类型转换,如果不想要这种转换只能使用attr()去获取原始的属性值。

2.jQuery读取data-属性是懒惰的、按需的,只有真正使用这些属性的时候,jQuery才会将其加载到内存。

3.jQuery修改属性值,都是在内存中进行的,并不会修改 DOM。

4.data-会被jQuery绑定到HTMLElement对象上,而不是jQuery封装后的对象上。

5.最重要的一点:jQuery只会在data-*第一次被访问的时候将其加载到内存,之后再也不会重新读取了。

原文地址:https://www.cnblogs.com/both-eyes/p/10093456.html

时间: 2024-10-14 19:37:21

HTML5数据存储方案data与jQuery数据存储方案$.data()的区别的相关文章

jQuery源代码学习之六——jQuery数据缓存Data

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解

jQuery数据缓存方案详解:$.data()的使用

我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是jQuery实现方式更优雅.为了更好地使用jQuery数据缓存方案,我们需要掌握$.data().$.cache.$.expando.$.hasData().$.removeData(). $.hasData()用来判断某个对象是否有附加的属性,可以给任何JavaScript对象和HTMLElemen

jQuery中的$.fn.data数据缓存

$.fn.data.$.fn.attr.$.fn.prop区别 $.fn.data.$.fn.attr.$.fn.prop的使用方法都差不多,但是他们的用法不一样. 1 <script src="jQuery.js"></script> 2 <div id="div"></div> 3 <script> 4 $(function(){ 5 var $div = $('#div'), 6 oDiv = doc

数据存储方案评估标准RDBMS or KV

作者:zhanhailiang 日期:2014-12-11 本文主要介绍常见的数据存储方案及相应选型的评估标准的介绍. Guideline:针对不同应用场景,针对性选择存储方式. 1. 数据存储方案 SQL: MySQL 5.5/5.6/MariaDB(对于Dev绝大多数场景下透明): Oracle|MS SQL暂不考虑: NoSQL: Memcached 1.4.21: Redis 2.8: MongoDB 2.6.6: Hbase 0.96/0.98: 2. 评估标准 RDBMS:(MySQ

Android Learning:数据存储方案归纳与总结

前言 最近在学习<第一行android代码>和<疯狂android讲义>,我的感触是Android应用的本质其实就是数据的处理,包括数据的接收,存储,处理以及显示,我想针对这几环分别写一篇博客,记得我的学习心得,也希望跟各位新手同学相互努力促进.今天这篇博客,我想介绍一下数据的存储,因为数据的接收,存储,处理以及显示这几环环环相扣,而数据的存储直接关系到数据的处理和显示,所以显得尤为重要. 所以本文针对数据存储的常见方案和其使用进行了归纳.分为程序内存储和程序间数据访问,程序内存储

jQuery对象数据缓存Cache原理及jQuery.data详解

网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别,所以我用到了,研究下分享给大家.$("").data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在使用

海量小文件存储最优解决方案,杉岩数据MOS完美解决

面对千亿量级的小文件,存储系统压力山大 所谓小文件,指的是存储占用空间相对较小的文件,一般来说低于64MB的文件就可以被认定为小文件,而大量的小文件大小则在几KB到几十KB之间.在云计算.大数据业务中,文本.图片.音乐等是典型的小文件应用场景. 随着数字化创新的加速,组织内部的数据呈现出指数级增长的趋势,特别是小文件更是随着业务增长到一个巨大的量级.与大文件的存储不同的是,大量磁盘在小文件存储场景中的性能极低,单块企业级SATA磁盘如果全部存储4KB左右的小文件,带宽只有520KB/s,远远小于

rac ORA-001157 数据文件误创 本地盘 共享存储 ASM cannot identify/lock data file

误将数据文件创建在本地盘而不是共享存储 错误原因: 不是共享存储中的数据文件,其他实例不能访问 解决思路和办法: 把本地的数据文件移到共享存储中. 步骤; 1. offline 表空间或数据文件 2. 复制数据文件 3. 重命名数据文件 4. 恢复数据文件(表空间不用) 5. online 表空间或数据文件 复制方案 1. RMAN copy datafile 2. dbms_file_transfer.copy_file 3. ASMCMD cp 详细步骤: 一: alter tablespa

【大数据处理】高效能,大数据量存储方案SqlBulkCopy

前些日子,公司要求做一个数据导入程序,要求将Excel数据,大批量的导入到数据库中,尽量少的访问数据库,高性能的对数据库进行存储.于是在网上进行查找,发现了一个比较好的解决方案,就是采用SqlBulkCopy来处理存储数据.SqlBulkCopy存储大批量的数据非常的高效,就像这个方法的名字一样,可以将内存中的数据表直接的一次性的存储到数据库中,而不需要一次一次的向数据库Insert数据.初次实验,百万级别的数据表,也只需几秒时间内就可以完全的存入数据库中,其速度,比传统的Insert方法不止快