博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery.data()为元素保存数据(性能上不错)
阅读量:6604 次
发布时间:2019-06-24

本文共 2554 字,大约阅读时间需要 8 分钟。

hot3.png

demo

(function(){	var $ul = $("
    "); for(var i=0; i<10; i++){ var $li = $("
  • "); var $a = $("按钮"+i+""); $a.data("num",i); $li.append($a); $ul.append($li); } $("body").append($ul); $("a").click(function(e){ console.log($(this).data("num")); });}());

    学习这篇博客

    jQuery源码(加上自己备注)

    function internalData( elem, name, data, pvt /* Internal Use Only */ ) {	if ( !acceptData( elem ) ) {		return;	}	var ret, thisCache,		internalKey = jQuery.expando,		isNode = elem.nodeType,		cache = isNode ? jQuery.cache : elem,  		//若elem是DOM元素,将jQuery下的cache赋值给cache;反之,可能是一个普通的js对象,那么将这个对象赋值给cache,这种赋值方式,jQuery.cache或elem会随着cache变化而变化		id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;	if ( ( !id || !cache[ id ] || ( !pvt && !cache[ id ].data ) ) &&		data === undefined && typeof name === "string" ) {		return;	}	if ( !id ) {		if ( isNode ) {			id = elem[ internalKey ] = deletedIds.pop() || jQuery.guid++;			//若这个DOM元素第一次缓存数据,则新建一个id,并顺带赋值elem[ internalKey ]		} else {			id = internalKey; 		}	}	if ( !cache[ id ] ) {		cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };  //给cache添加一个key为id的属性	}	if ( typeof name === "object" || typeof name === "function" ) {		if ( pvt ) {			cache[ id ] = jQuery.extend( cache[ id ], name );		} else {			cache[ id ].data = jQuery.extend( cache[ id ].data, name );			//为cache[id]添加一个key为data的属性,用jQuery.extend()将以前的缓存和新传入的“object或者function”合并		}	}	thisCache = cache[ id ];	// data.	if ( !pvt ) {		if ( !thisCache.data ) {			thisCache.data = {};		}		thisCache = thisCache.data;	}	if ( data !== undefined ) {		thisCache[ jQuery.camelCase( name ) ] = data;	}	if ( typeof name === "string" ) {  //传入key为字符串		ret = thisCache[ name ];  //先看以前有没有传过		if ( ret == null ) {  //没传过			ret = thisCache[ jQuery.camelCase( name ) ];  //现在传		}	} else {		ret = thisCache;	}	return ret;}

    可以做个测试,检验附加给dom元素的数据是否添加到jQuery的$.cache对象(jQuery缓存)

    var mydiv = document.getElementById("mydiv");$.data(mydiv,"name","mike");console.log($.cache)   //可以敲一下看看,如果是附加到dom元素,那么$.cache对象就会按照附加顺序,key值从1开始,依次递增,对应key值保存对应valuevar div2 = document.getElementById("div2");$.data(div2,"name","mike");//再加一个,console.log($.cache)出来的的结果通过JSON.stringify()方法得到一下字符串{"1":{"data":{"name":"mike"}},"2":{"data":{"name":"mike"}}}

    总结: jQuery实现将数据与相应dom绑定的思路,以《jquery-1.12.3.js》源码为例,先用jQuery.expando方法生成一个随机字符串(大可不必在乎生成过程,够复杂,避免重复就可),下面以str表示这个随机字符串,实现与dom数据绑定后,将会给这个dom对象添加一个键值对,key等于str,value等于一个jQuery内部递增的整数,也就是与这个dom所关联的$.cache的ID。 也就是说,你在获取这个与这个dom元素相绑定的数据的时候,会通过s对应tr找到唯一的ID值,然后通过ID值可以访问附加在$.cache上面的对应dom元素的数据

    转载于:https://my.oschina.net/daladida/blog/904002

    你可能感兴趣的文章
    nginx 报错
    查看>>
    负载均衡七层 Haproxy
    查看>>
    大数据下基于Tensorflow框架的深度学习示例教程
    查看>>
    Linux性能测试top衍生命令atop/htop/slaptop
    查看>>
    Nginx配置文件详细说明
    查看>>
    写给iOS程序员的命令行使用秘籍
    查看>>
    数据加密解密初探
    查看>>
    DAVINCI DM365-DM368开发攻略——开发环境搭建(DVSDK4.02)
    查看>>
    我的友情链接
    查看>>
    jSearch 上码云推荐啦(@红薯 大大亲推)!!!
    查看>>
    Laravel学习笔记
    查看>>
    ×××的老板,苦逼的程序员
    查看>>
    python虚拟环境virtualenv下安装MySQL-python
    查看>>
    OpenStack安装部署
    查看>>
    ELK部署实战
    查看>>
    android面试题
    查看>>
    【原】nginx均衡多tomcat环境配置,及这种环境下的remoteIp及ServerName获取方式
    查看>>
    chosen.jquery.min.js 使用js手动更新选项
    查看>>
    spring mvc 视频资料
    查看>>
    Android系统耗电普遍判断逻辑
    查看>>