问题：

JQuery中，对于.data([key],[value])函数，当使用其进行数据绑定时，假设要绑定的数据是“引用数据类型”，也就是对象；那么.data函数绑定的是该对象的副本还是该对象的一个引用？下面通过以下小例子来测试下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Test</title>

     <style type="text/css">

         div{

             min-height: 40px;

             width: 70%;

             text-align: center;

             padding: 10px;

             border: 1px solid green;

         }

     </style>

     <script src="jquery-1.11.1.js" type="text/javascript"></script>

 </head>

 <body>

     <h3>测试$.data函数</h3>

     <h4>

         <li>当绑定的数据是有多层嵌套的JSON对象时，</li>

         <li>给第一层DIV绑定第一层的JSON对象</li>

         <li>给第二层DIV绑定第二层的JSON对象</li>

         <li>......</li>

         <li>那么，如果修改了第N层DIV绑定的JSON对象，则上层、上上层、。。。绑定的JSON对象会不会更新对应修改层的JSON对象？</li>

         <li>---------</li>

         <li>测试一：取数据 - 改取出的数据，不重新绑定 - 打印该元素的绑定数据</li>

         <li>测试二：取数据 - 改取出的数据，重新绑定给该元素 - 打印该元素的绑定数据</li>

         <li>测试三：取数据 - 改取出的数据，重新绑定给该元素 - 更新上级、上上级、...元素绑定的数据 - 打印该元素的绑定数据 和 上级、上上级、...元素绑定的数据</li>

         <li>---------</li>

         <li>测试一：已更新， 并且包括上级、上上级、...元素绑定的数据都更新了</li>

         <li>测试二：OK</li>

         <li>测试三：OK</li>

     </h4>

     <div class="first">

         <div class="second">

             <div class="third"></div>

         </div>

     </div>

     <script type="text/javascript">

         var data = {

             name: "first",

             next: {

                 name: "second",

                 next: {

                     name: "third",

                     next: false

                 }

             }

         };

         $('.first').data('test', data);

         $('.second').data('test', data["next"]);

         $('.third').data('test', data["next"]["next"]);

         //测试一

         var td = $('.third').data('test');

         td["name"] = td["name"] + "-modify";

         //打印

         console.log($('.first').data('test'));

         console.log($('.second').data('test'));

         console.log($('.third').data('test'));

     </script>

 </body>

 </html>

使用Chrome打开该网页后，并查看页面的控制台打印如下：

由上图，可以推断出：$.data函数绑定给元素的对象时引用了该对象，而不是将对象“复制了一份”的副本绑定给元素；

也就是说，把一个对象绑定给A元素，再把该对象的子对象绑定给B元素，然后取出B元素绑定的对象，并修改这个取出的对象，之后，即使我们不把修改后的对象重新绑定给B元素；下次取B对象绑定的该数据时，他也已经被修改了；并且取A元素绑定的对象时，该对象中的绑定给B元素的子对象也显示被修改了；如以上代码：

我们在第55行、56行修改了.third的绑定的数据，之后第59行、60行、61行直接打印的当前对象、父对象、父父对象，显示都被修改了（也就是third变成了third-modify）；

结论：

$.data函数绑定的对象是对源对象的一个引用，当我们修改该源对象时，绑定到元素上的对象也会“随之而修改（其实引用并未变，只是源对象发生了改变）”；

这下，只要我们绑定的数据是引用数据类型，大可放心、任意修改之了！

关于JQuery中$.data绑定数据原理或逻辑的更多相关文章

  1. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  2. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  3. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

  4. 05 HTML字符串转换成jQuery对象、绑定数据到元素上

    1 要求 将一段 HTML脚本 封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤 定义字符串 var str = '<div i ...

  5. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  6. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  7. 【 D3.js 入门系列 — 2 】 绑定数据和选择元素

    1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...

  8. 【菜鸟学习jquery源码】数据缓存与data()

    前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...

  9. jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

随机推荐

  1. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  2. JS倒计时器一只，顺便复习javascript时间相关函数

    window.onload = function(){ var uS = 604800; //后台提供 : 秒 var day=hour=minute=second=0, timer; var dem ...

  3. php程序员的弱点

    今天在在知乎上看到一个问题,题目是<看了laravel的php框架怎么感觉很不靠谱?>,我最近也在想学习一下laravel,laravel听说是受到很大ruby on rails的影响. ...

  4. Arduino当avr开发板

    原理并不复杂,因为arduino本来就是avr+一堆的库,找个能编译出hex的工具下载到板子就行. 但实际做起来还是碰到很多问题. 先是尝试eclipse+avr plugin 编译时出现make: ...

  5. Apache开启expires响应头，优化缓存

    apache开始expires响应头输出 expires是什么 指示资源什么时候过期的时间值(GMT时间),在指定的过期时间前,浏览器可以直接使用自身缓存的版本,而不用向服务器发请求,大大减轻服务器压 ...

  6. XCode破解真机调试

    XCode破解真机调试  3.0 一.这样做以后能怎样 以device模式编译出app 可以再越狱后的设备上运行 二.要会点什么 命令行,也就是terminal.终端.控制台... vim 三.开始吧 ...

  7. 高效的SQLSERVER分页查询(推荐)

    Sqlserver数据库分页查询一直是Sqlserver的短板,闲来无事,想出几种方法,假设有表ARTICLE,字段ID.YEAR...(其他省略),数据53210条(客户真实数据,量不大),分页查询 ...

  8. 一步一步学c#（四）：继承

    继承 1·继承的类型 在面向对象的编程中,有两种截然不同的继承类型,实现继承和接口继承. 实现继承:表示一个类型派生于一个基类型,它拥有该基类型的所有成员字段和函数. 接口继承:表示一个类型只继承了函 ...

  9. org.openqa.selenium.SessionNotCreatedException: A new session could not be created.

    解决方案 1. 重新插拔手机. 2. 检查appium端口是否被占用,如是,杀掉占用了改端口的进程,然后重启appium. 3.

  10. CSS蒙版

    蒙版:就是在图片上添加一个图层,用于美化页面,增加页面的可读性 <!DOCTYPE html><html><head lang="en"> &l ...