问题：

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. 使用runOnUiThread更新UI

    android中更新UI的方式比较多,这里就不一一介绍了,比较常用的Thread+Handler,但是这种方式较繁琐,如在使用ProgressDialog创建进度对话框一文中就是使用的这种方式更新UI ...

  2. CSS 技术关键字

    CSS 技术关键字 元素 替换元素 非替换元素------替换元素和非替换元素的分类是CSS范畴内的,其它的分类都不属于CSS定义的                替换元素和非替换元素的定义是出于“我 ...

  3. C# JSON各种查找法

    http://blog.csdn.net/yangxiaojun9238/article/details/8490319

  4. Linux下安装QT和OpenGL后QT无法使用OpenGL的解决方法

    我的系统为Ubuntu14.04,用apt-get安装了实现了OpenGl的mesa,QT则是用官网下载的run文件来安装的. 好了,现在两个都分别有了,所以要在qt下尝试写OpenGl代码. 之前试 ...

  5. android 获取http网络图片保存png

    1.android 获取网络图片的方式很多,普通网络通信的方式都可以用在获取网络图片上. android   http获取数据常用的方式: 1.Apache接口(HttpClient) 2.标准Jav ...

  6. [LeetCode][Python]Roman to Integer

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/roman-t ...

  7. mongodb的 或 查询，实践总结

    PostcardRecord.findOne({user:userid, $or : [ { at:{$gte:start.valueOf(), $lte:end.valueOf()} } , { i ...

  8. S3C6410嵌入式应用平台构建（五）——linux-3.14.4移植到OK6410-(Nand分区问题)

    前一篇文章,我们的Linux能后启动了,只是在识别nand时候,没有获取到时钟源,导致后面的分区没哟进行. 我们从启动的log发现: [06/08-11:25:41:371]s3c24xx-nand ...

  9. 一道java面试题-方法静态分派

    一道面试题,以下程序的输出是? public class StaticDispatch { static abstract class Human{ } static class Man extend ...

  10. 开源ceph管理平台inkscope部署手册

    一.前情提要 关于inkscope就不做过多介绍了,就是ceph的一个开源管理控制平台,跟ceph官方的calamary以及intel的VSM差不多一类,只是各自侧重点不一样. 相对而言,因为inks ...