jQuery 中 data 方法的实现原理

浏览数：20 / 时间：2015年06月09日

前言：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 对象中元素对应的数据对象中