前言：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"