前言：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 对象中存储。
function dataAttr( 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"