前言: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 对象之间互相引用导致的循环引用问题。