书签分享收藏举报版权申诉 / 25

立即下载加入VIP,免费下载

当前位置：首页 > 医药卫生 > 药学 > jQuery中数据缓存data的用法及源码完全解析.docx

jQuery中数据缓存data的用法及源码完全解析.docx

文档编号：25218303
上传时间：2023-06-06
格式：DOCX
页数：25
大小：22.11KB

《jQuery中数据缓存data的用法及源码完全解析.docx》由会员分享，可在线阅读，更多相关《jQuery中数据缓存data的用法及源码完全解析.docx（25页珍藏版）》请在冰豆网上搜索。

jQuery中数据缓存data的用法及源码完全解析.docx

jQuery中数据缓存data的用法及源码完全解析

　　这篇文章主要介绍了jQuery中的数据缓存$.data的用法及源码完全解析,深入解读了jQuery对缓存对象的读写和移除的实现,需要的朋友可以参考下

　　一、实现原理：

　　对于DOM元素，通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。

在读取、设置、移除数据时，将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除操作。

　　对于Javascript对象，数据则直接存储在该Javascript对象的属性jQuery.expando上。

在读取、设置、移除数据时，实际上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。

　　为了避免jQuery内部使用的数据和用户自定义的数据发生冲突，数据缓存模块把内部数据存储在数据缓存对象上，把自定义数据存储在数据缓存对象的属性data上。

　　二、总体结构：

　　//数据缓存Data

　　jQuery.extend（{

　　 //全局缓存对象

　　 cache:

{},

　　 //唯一id种子

　　 uuid:

0,

　　 //页面中每个jQuery副本的唯一标识

　　 expando:

"jQuery"+（jQuery.fn.jquery+Math.random（））.replace（/\D/g,""）,

　　 //是否有关联的数据

　　 hasData:

function（）{},

　　 //设置、读取自定数据或内部数据

　　 data:

function（elem,name,data,pvt）{},

　　 //移除自定义数据或内部数据

　　 removeData:

function（elem,name,pvt）{},

　　 //设置、读取内部数据

　　 _data:

function（elem,name,data）{},

　　 //是否可以设置数据

　　 acceptData:

function（elem）{}

　　}）;

　　jQuery.fn.extend（{

　　 //设置、读取自定义数据，解析HTML5属性data-

　　 data:

function（key,value）{},

　　 //移除自定义数据

　　 removeData:

function（key）{}

　　}）;

　　//解析HTML5属性data-

　　functiondataAttr（elem,key,data）{}

　　//检查数据缓存对象是否为空

　　functionisEmptyDataObject（obj）{}

　　jQuery.extend（{

　　 //清空数据缓存对象

　　cleanData:

function（elems）{}

　　}）;

　　三、$.data（elem,name,data）,$.data（elem,name）

　　$.data（elem,name,data）的使用方法：

　　如果传入参数name,data,则设置任意类型的数据

　　<!

doctypehtml>

　　<htmllang="en">

　　<head>

　　 <metacharset="utf-8">

　　 <title>jQuery.datademo</title>

　　 <style>

　　 div{

　　 color:

blue;

　　 }

　　 span{

　　 color:

red;

　　 }

　　 </style>

　　 <scriptsrc="//

　　</head>

　　<body>

　　<div>

　　 Thevaluesstoredwere

　　 and

　　</div>

　　vardiv=$（"div"）[0];

　　jQuery.data（div,"test",{

　　 first:

16,

　　 last:

"pizza!

"

　　}）;

　　$（"span:

first"）.text（jQuery.data（div,"test"）.first）;

　　$（"span:

last"）.text（jQuery.data（div,"test"）.last）;

　　</script>

　　</body>

　　</html>

　　$.data（elem,name）的使用方法：

　　如果传入key,未传入参数data,则读取并返回指定名称的数据

　　<!

doctypehtml>

　　<htmllang="en">

　　<head>

　　 <metacharset="utf-8">

　　 <title>jQuery.datademo</title>

　　 <style>

　　 div{

　　 margin:

5px;

　　 background:

yellow;

　　 }

　　 button{

　　 margin:

5px;

　　 font-size:

14px;

　　 }

　　 p{

　　 margin:

5px;

　　 color:

blue;

　　 }

　　 span{

　　 color:

red;

　　 }

　　 </style>

　　 <scriptsrc="//

　　</head>

　　<body>

　　<button>Get"blah"fromthediv</button>

　　<button>Set"blah"to"hello"</button>

　　<button>Remove"blah"fromthediv</button>

　　<p>The"blah"valueofthisdivis<span>?

</span></p>

　　$（"button"）.click（function（）{

　　 varvalue,

　　 div=$（"div"）[0];

　　 switch（$（"button"）.index（this））{

　　 case0:

　　 value=jQuery.data（div,"blah"）;

　　 break;

　　 case1:

　　 jQuery.data（div,"blah","hello"）;

　　 value="Stored!

";

　　 break;

　　 case2:

　　 jQuery.data（div,"blah",86）;

　　 value="Stored!

";

　　 break;

　　 case3:

　　 jQuery.removeData（div,"blah"）;

　　 value="Removed!

";

　　 break;

　　 }

　　 $（"span"）.text（""+value）;

　　}）;

　　</script>

　　</body>

　　</html>

　　$.data（elem,name,data）,$.data（elem,name）源码解析：

　　jQuery.extend（{

　　 //1.定义jQuery.data（elem,name,data,pvt）

　　 data:

function（elem,name,data,pvt/*InternalUseOnly*/）{

　　 //2.检查是否可以设置数据

　　 if（!

jQuery.acceptData（elem））{

　　 return;//如果参数elem不支持设置数据，则立即返回

　　 }

　　 //3定义局部变量

　　 varprivateCache,thisCache,ret,

　　 internalKey=jQuery.expando,

　　 getByName=typeofname==="string",

　　 //WehavetohandleDOMnodesandJSobjectsdifferentlybecauseIE6-7

　　 //can'tGCobjectreferencesproperlyacrosstheDOM-JSboundary

　　 isNode=elem.nodeType,//elem是否是DOM元素

　　 //OnlyDOMnodesneedtheglobaljQuerycache;JSobjectdatais

　　 //attacheddirectlytotheobjectsoGCcanoccurautomatically

　　 cache=isNode?

jQuery.cache:

elem,//如果是DOM元素，为了避免javascript和DOM元素之间循环引用导致的浏览器（IE6/7）垃圾回收机制不起作用，要把数据存储在全局缓存对象jQuery.cache中；对于javascript对象，来及回收机制能够自动发生，不会有内存泄露的问题，因此数据可以查收存储在javascript对象上

　　 //OnlydefininganIDforJSobjectsifitscachealreadyexistsallows

　　 //thecodetoshortcutonthesamepathasaDOMnodewithnocache

　　 id=isNode?

elem[internalKey]:

elem[internalKey]&&internalKey,

　　 isEvents=name==="events";

　　 //Avoiddoinganymoreworkthanweneedtowhentryingtogetdataonan

　　 //objectthathasnodataatall

　　 //4.如果是读取数据，但没有数据，则返回

　　 if（（!

id||!

cache[id]||（!

isEvents&&!

pvt&&!

cache[id].data））&&getByName&&data===undefined）{

　　 return;

　　 //getByName&&data===undefined如果name是字符串，data是undefined,说明是在读取数据

　　 //!

id||!

cache[id]||（!

isEvents&&!

pvt&&!

cache[id].data如果关联id不存在，说明没有数据；如果cache[id]不存在，也说明没有数据；如果是读取自动以数据，但cache[id].data不存在，说明没有自定义数据

　　 }

　　 //5.如果关联id不存在，则分配一个

　　 if（!

id）{

　　 //OnlyDOMnodesneedanewuniqueIDforeachelementsincetheirdata

　　 //endsupintheglobalcache

　　 if（isNode）{

　　 elem[internalKey]=id=++jQuery.uuid;//对于DOM元素，jQuery.uuid会自动加1，并附加到DOM元素上

　　 }else{

　　 id=internalKey;//对于javascript对象，关联id就是jQuery.expando

　　 }

　　 //6.如果数据缓存对象不存在，则初始化为空对象{}

　　 if（!

cache[id]）{

　　 cache[id]={};

　　 //AvoidsexposingjQuerymetadataonplainJSobjectswhentheobject

　　 //isserializedusingJSON.stringify

　　 if（!

isNode）{

　　 cache[id].toJSON=jQuery.noop;//对于javascript对象，设置方法toJSON为空函数，以避免在执行JSON.stringify（）时暴露缓存数据。

如果一个对象定义了方法toJSON（）,JSON.stringify（）在序列化该对象时会调用这个方法来生成该对象的JSON元素

　　 }

　　 //AnobjectcanbepassedtojQuery.datainsteadofakey/valuepair;thisgets

　　 //shallowcopiedoverontotheexistingcache

　　 //7.如果参数name是对象或函数，则批量设置数据

　　 if（typeofname==="object"||typeofname==="function"）{

　　 if（pvt）{

　　 cache[id]=jQuery.extend（cache[id],name）;//对于内部数据，把参数name中的属性合并到cache[id]中

　　 }else{

　　 cache[id].data=jQuery.extend（cache[id].data,name）;//对于自定义数据，把参数name中的属性合并到cache[id].data中

　　 }

　　 //8.如果参数data不是undefined,则设置单个数据

　　 privateCache=thisCache=cache[id];

　　 //jQuerydata（）isstoredinaseparateobjectinsidetheobject'sinternaldata

　　 //cacheinordertoavoidkeycollisionsbetweeninternaldataanduser-defined

　　 //data.

　　 if（!

pvt）{

　　 if（!

thisCache.data）{

　　 thisCache.data={};

　　 }

　　 thisCache=thisCache.data;

　　 }

　　 if（data!

==undefined）{

　　 thisCache[jQuery.camelCase（name）]=data;

　　 }

　　 //UsersshouldnotattempttoinspecttheinternaleventsobjectusingjQuery.data,

　　 //itisundocumentedandsubjecttochange.Butdoesanyonelisten?

No.

　　 //9.特殊处理events

　　 if（isEvents&&!

thisCache[name]）{//如果参数name是字符串"events",并且未设置过自定义数据"events",则返回事件婚车对象，在其中存储了事件监听函数。

　　 returnprivateCache.events;

　　 }

　　 //Checkforbothconverted-to-camelandnon-converteddatapropertynames

　　 //Ifadatapropertywasspecified

　　 //10.如果参数name是字符串，则读取单个数据

　　 if（getByName）{

　　 //FirstTrytofindas-ispropertydata

　　 ret=thisCache[name];//先尝试读取参数name对应的数据

　　 //Testfornull|undefinedpropertydata

　　 if（ret==null）{//如果未取到，则把参数name转换为驼峰式再次尝试读取对应的数据

　　 //TrytofindthecamelCasedproperty

　　 ret=thisCache[jQuery.camelCase（name）];

　　 }

　　 }else{//11.如果未传入参数name,data,则返回数据缓存对象

　　 ret=thisCache;

　　 }

　　 returnret;

　　 },

　　 //Forinternaluseonly.

　　 _data:

function（elem,name,data）{

　　 returnjQuery.data（elem,name,data,true）;

　　 },

　　}）;

　　四、.data（key,value）,.data（key）

　　使用方法：

　　$（"body"）.data（"foo",52）;//传入key,value

　　$（"body"）.data（"bar",{myType:

"test",count:

40}）;//传入key,value

　　$（"body"）.data（{baz:

[1,2,3]}）;//传入key,value

　　$（"body"）.data（"foo"）;//52//传入key

　　$（"body"）.data（）;//未传入参数

　　HTML5dataattriubutes:

　　<divdata-role="page"data-last-value="43"data-hidd

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: jQuery 数据缓存 data 用法源码完全解析

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：jQuery中数据缓存data的用法及源码完全解析.docx
链接地址：https://www.bdocx.com/doc/25218303.html

jQuery中数据缓存data的用法及源码完全解析.docx

热门标签