问题：

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. Javascript基础示例：用JS写简易版贪吃蛇（面向对象）

    废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. Php5.3的lambda函数以及closure(闭包)

    从php5.3以后,php也可以使用lambda function(可能你会觉得是匿名函数,的确是但不仅仅是)来写类似javascript风格的代码: $myFunc = function() { e ...

  3. hdu 5726 GCD 倍增+ 二分

    题目链接 给n个数, 定义一个运算f[l,r] = gcd(al, al+1,....ar). 然后给你m个询问, 每次询问给出l, r. 求出f[l, r]的值以及有多少对l', r' 使得f[l, ...

  4. [MATLAB] 利用遗传算法函数求目标函数的最优解

    最近接触到了遗传算法以及利用遗传算法求最优解,所以就把这些相关的内容整理记录一下. 一.遗传算法简介(摘自维基百科) 遗传算法(英语:genetic algorithm (GA))是计算数学中用于解决 ...

  5. Linux 网络编程基础(4) -- Ping 的C代码实现

    1.背景 在进行网络编程的时候,通常使用的协议有TCP协议,UDP协议.这些协议在简历套接字之初需要制定套接字的类型,比如TCP应当设置为 SOCK_STREAM, UDP对应的套接字应当设置为SOC ...

  6. 查看oracle数据库的大小和空间使用情况

    查看oracle数据库的大小和空间使用情况 (2012-06-19 14:44:30) 转载▼ 标签: 杂谈 分类: oracle 1.查看表空间的使用状况 SELECT upper(f.tables ...

  7. centos6.5vpn搭建

    centos6.5vpn搭建整个搭建流程,服务端,客户端安装及测试. 达到的效果: 在安装vpn客户端的机器可通过vpn(virtual private network)专用线路(vpn主配置文件中定 ...

  8. CVTE 嵌入式软件工程师 二面

    昨天晚上收到了二面的通知,激动啊-第二天提前20分钟到达指定地点,然后一起做大巴去到CVTE总部,发现笔试刷掉的人好像并不是很多.我们一下车被带到了公司的电影院,听演唱会.呵呵,挺有意思的,有一个漂亮 ...

  9. uva 639 Don't Get Rooked 变形N皇后问题 暴力回溯

    题目:跟N皇后问题一样,不考虑对角冲突,但考虑墙的存在,只要中间有墙就不会冲突. N皇后一行只能放一个,而这题不行,所以用全图暴力放棋,回溯dfs即可,题目最多就到4*4,范围很小. 刚开始考虑放一个 ...

  10. css滤镜(转载)

    STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername为滤镜的名称,fparameter1.fpara ...