前言：jQuery 作为前端使用最多最广泛的 JS 库，其源码每个 JSer 都应该研究一下。早就打算看却一直被各种事拖着，上次某公司面试时被问到 jQuery 中 data 方法是如何实现的，结果答不上来懊悔不已。现在终于下决心开始看 jQuery 的源码，就从 data 方法开始。本人也是前端新手，如果文章中有理解不当或者错误之处，欢迎留言指出，3Q~ jQuery 版本为 1.8.2

data() 的使用方法

//向一个 dom 元素绑定数据
$("#header").data("aaa", 123); //给 header 绑定了一个数据其key为"aaa"，value为123
$("#header").data({"name": "xiaoming", "age": 20}); //也可以将所有数据作为一个对象直接整体绑定在元素上//获取绑定的数据
$("#header").data("aaa"); //获取 header 上绑定的 key 为"aaa"的值，如果没有在 cache 对象(下面分析源码时会讲到)中找到，会解析元素的 html 5 标签 data-*，并将值存入 cache 对象
$("#header").data(); //获取 header 上绑定的所有数据//移除绑定的数据
$("#header").removeData("name"); //移除 header 上绑定的 key 为 name 的数据
$("#header").removeData(); //移除 header 上绑定的所有数据

源码中 data() 方法相关的代码

jQuery.extend({//全局变量，负责保存给每个 dom 元素绑定的数据
cache: {},//全局变量，当已经绑定的数据被 cleanData 方法清除以后，回收的 id保存在改变量中
deletedIds: [],//当前版本没有用到 在(1.9/2.0)版本中将移除uuid: 0,//为 jQuery实例 添加一个唯一标示，区别不同的 jQuery 实例（比如同一工程内不同版本的 jQuery）绑定的数据，比如:  jQuery164018232414545491338，前缀+版本号+随机数expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, ""),//下面几类元素是不给绑定数据的，如果绑定会报错
noData: {"embed": true,//除了 flash 之外的 object 对象"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000","applet": true},//判断一个元素是否已经绑定有数据hasData: function( elem ) {   },//绑定数据 ( pvt 为 false 时，数据会添加到 cache 中元素对应 id 下的data 属性中，pvt 为 true 则把绑定的数据直接添加到 cache 中元素对应的id 下，与 data 属性并列。jQuery 绑定内部数据 events、handle 等都是通过 _data 方法将 pvt 设置为 true )data: function( elem, name, data, pvt /*该参数内部使用*/) {   },//移除数据removeData: function( elem, name, pvt /*该参数内部使用*/) {   },//仅限内部调用，添加内部数据_data: function( elem, name, data ) {   },//判断一个 dom 节点是否可以绑定数据acceptData: function( elem ) {    },//清除节点上绑定的事件和节点的 jQuery 实例标识属性cleanData: function( elems, /*internal*/acceptData ) {    }
});jQuery.fn.extend({//提供给开发者调用的绑定数据方法data: function( key, value ) {    },//提供给开发者调用的移除数据方法removeData: function( key ) {    }
});//解析元素中 html5 标签 data-* 的值。如果在 cache 对象当中已经获取到对应值则直接返回不解析 data-* 属性，否则解析 data-* 属性并且将数据添加至 cache 对象中存储。
functiondataAttr( elem, key, data ) {    }//判断cache 下保存的数据对象是否为空，当且仅当数据对象只有一个 data 属性，且值为空时才为空
function isEmptyDataObject( obj ) {    }

jQuery.extend 与 jQuery.fn.extend 的区别在于：

jQuery.extend 是在 jQuery 这个构造函数上扩展的方法，调用的时候写成 $.xxx 或者 jQuery.xxx

jQuery.fn.extend 是在 jQuery 原型上扩展的方法，原型上的方法被所有 jQuery 对象共享，调用的时候为 $().xxx

给元素绑定的数据的保存格式

$("#header").data("title", "hello world");//执行后打印 $.cache 结果为
{1: {data: {title :"hello world"}}
}//并且查看 header 元素，发现属性中多了一行 "jQuery18102873769768048078: 1" 其中 key 值那一长串为 jQuery 实例唯一标识，1 是 header 元素绑定的数据在 cache 对象中对应的属性名，该值每次增加 1，
$("#footer").data("foot", "goodbye");//执行后打印 $.cache 结果为
{1: {data: {title :"hello world"}},2: {data: {foot :"goodbye"}}
}//同样 footer 元素的属性中多了一行 "jQuery18102873769768048078: 2"

给元素绑定的事件处理程序也会保存在 cache 对象中

$("#header").click(function(){});//绑定点击事件后，$.cache 的内容为
{1: {data : {title :"hello world"},events : {click : []//click 对应的数组内容省略
},handle :function(){ }  //function 的内容及属性省略
}2: {data : {foot :"goodbye"}}
}//可见给 dom 元素绑定事件处理程序后，多了 events 和 handle 两个属性，jQuery 自动将这些数据绑定到 cache 对象中元素对应的数据对象中

通过全局对象 cache 来保存 dom 元素上绑定的数据，可以避免 dom 对象和 js 对象之间互相引用导致的循环引用问题。

data() 方法相关事件

与 data() 方法相关的事件有 getData、setData、changeData，使用方法见代码

$("#header").bind("getData" ,function(){console.log("getData");}).bind("setData" , function(){console.log("setData");}).bind("changeData" , function(){console.log("changeData");});
$("#header").data("name" , "Austin"); //打印  "setData" "changeData"
$("#header").data("name");            //打印"getData"