jQuery 中 data 方法的实现原理
前言: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"
jQuery 中 data 方法的实现原理的更多相关文章
- 关于JQuery中$.data绑定数据原理或逻辑
问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个 ...
- jQuery中ready方法的实现
https://blog.csdn.net/major_zhang/article/details/80146674 先普及一下jquery.ready()和window.onload,window. ...
- jquery中on/delegate的原理
jquery中on/delegate的原理 早期版本中叫delegate, 后来有过live函数,再后来统一用on.下面的方法等效: // jQuery 1.3 $(selector).(events ...
- jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
- JVM源码分析之深入分析Object类finalize()方法的实现原理
原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 “365篇原创计划”第十篇. 今天呢!灯塔君跟大家讲: 深入分析Object类finalize()方法的实现原理 finalize 如果 ...
- Python描述符以及Property方法的实现原理
Python描述符以及Property方法的实现原理 描述符的定义: 描述符是什么:描述符本质就是一个新式类,在这个新式类中,至少实了__get__(),__set__(),__delete__()中 ...
- 详解JS中 call 方法的实现
摘要:本文将全面的,详细解析call方法的实现原理 本文分享自华为云社区<关于 JavaScript 中 call 方法的实现,附带详细解析!>,作者:CoderBin. 本文将全面的,详 ...
- Atitit paip.对象方法的实现原理与本质.txt
Atitit paip.对象方法的实现原理与本质.txt 对象方法是如何实现的1 数组,对象,字典1 对象方法是如何实现的 这显然是一个对象方法调用.但对象方法是如何实现的呢?在静态语言中,因为有编译 ...
随机推荐
- Java中的HashSet和TreeSet
1:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法:hashCode()和eq ...
- linux命令:whereis
1.命令介绍: whereis用来查找二进制文件,源代码文件和帮助说明文件,whereis是在系统的数据库文件中查找,所以速度非常快,但是系统的文件数据库不是实时更新的,默认一个星期更新一次. 2.命 ...
- SDK、MFC、QT界面生成的机制
1.SDK进行界面设计的机制 (1)设计窗口类 (2)注册窗口类 (3)创建窗口 (4)显示及更新窗口 (5)消息循环,操作系统接收到应用程序的窗口消息,将消息投递到队列中,通过GetMessage( ...
- 关于relative和absolute的总结
对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...
- unity中全屏背景图缩放
using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...
- BlackJack Strategy
GAME SPEC: 2-deck, 104 cards total. Bellagio has 2-deck and 6-deck games. based on hard 17, dealer h ...
- C#编程语言与面向对象——核心
面向对象的核心 (1).封装 封装的类=数据+对此数据所进行的操作(即算法) 封装起外界不必需要知道的东西,指向外界展现可供展示的东西. 小到一个简单的数据结构,大到一个完整的软件子系统.静态的如某软 ...
- oracle日期操作
日期操作:ADD_MONTHS(date,i) 作用 返回在自定日期上添加的月份 i是整数 如果i是小数,则截取整数部分 i是负数 原有日期减去相应部分 例子: SQL> select add_ ...
- 二叉排序树(BST)的建立
给一个非递归的吧. /* 已知,二叉树存储结构定义见bstree.h,请编写一个算法函数bstree creatBstree(int a[],int n), 以数组a中的数据作为输入建立一棵二叉排序树 ...
- JavaScript中“typeof”运算符与“instanceof”运算符的差异
在JavaScript中,运算符“typeof”和“instanceof”都可以用来判断数据的类型,那么这两个运算符有什么不同之处呢? 差异一:使用方式不同. 最明显的差异就是这两个运算符的使用方式了 ...