前言:
周六看了司徒的一篇文章,觉得这个topic不错,觉得效仿一下,深入剖析一下jQuery的data相关的实现。主要还是对页面的某些元素进行数据绑定及存储相关的操作,本topic是以一个专题的形式呈现,因为会比较多个版本之间的差异和优化。
正文:
还是老规矩吧,我喜欢在研究之前先问几个问题:
- 哪些节点(或者说是标签)不能存储数据?
- 如何设计这个对应关系,一个元素多份数据的时候,多份数据多个节点的时候?
- 如果节点是window呢,数据存储有区别吗?
- jQuery每一个版本的实现是否有差异?
- 参数的优化,比如对应一个key,存多个value或者一个对象等
- 。。。。。。。。
呵呵,好像还挺多问题的,慢慢地我一个一个解答。
确切地讲,从jquery-1.2就开始有data相关的api实现!
//1.2版本的expando是前缀jQuery+时间戳 var expando = "jQuery" + (new Date()).getTime(), uuid = 0, //uuid从0开始 win = {}; //window绑数据都是扔到这边 //扩展jquery的api实现方式 jQuery.extend({ cache:{}, //数据存储的集合 /* @name data @param elem 绑定存储数据的节点对象 @param name 数据的key @param data 数据 @info 元素和数据之间挂接的关联关系:元素有一个属性expando对应id id是uuid自加的结果 */ data:function(elem,name,data){ //判断节点是否是window elem = elem== window ? win : elem; var id = elem[expando]; if(!id){ //新绑定的uuid自加 id = elem[expando] = ++ uuid; } //如果有name而且没有被cache注册数据过 if(name && !jQuery.cache[id]){ //cache是按照id来对应数据的 jQuery.cache[id][name] = data; } return name ? jQuery.cache[id][name] : id; }, /* @name removeData @param elem 绑定存储数据的节点对象 @param name 数据的key */ removeData:function(elem,name){ //判断节点是否是window elem = elem == window ? win : elem; var id = elem[expando]; //删除特定name的数据 if(name){ if(jQuery.cache[id]){ delete jQuery.cache[id][name]; name = ""; for(name in jQuery.cache[id]) break; if(!name){ jQuery.removeData(elem); } } }else{ //删除elem的绑定的所有数据 try{ delete elem[expando]; }catch(e){ if(elem.removeAttribute){ elem.removeAttribute(expando); } } delete jQuery.cache[id]; } } });
很多人关注:咋使用?
<div id="out1"></div>
var elem = document.getElementById("out1"); //设置 $.data(elem,'name','zhangyaochun'); console.log($.data(elem,'name')); //删除 $.removeData(elem); console.log($.data(elem,'name'));
结果一次输出zhangyaochun,一次输出undefined
我们再看一下对应关系:
先看看$.cache咋存的?
再看看elem里面咋对应的?
为了不让各位视觉疲劳,下篇来讲哪个版本开始那些标签不能存储数据!!
@ 理想国际大厦 -------------- 地方换了,晚走的习惯还是没有变。。。。。。。。。。
相关推荐
资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...
《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...
非常详细的jquery文档,其全称是锋利的jquery
jquery中data的案例,获取同一标签内的数据,以及移除标签内的数据
jQuery源码解读,jQuery源码解读
《深入PHP与jQuery开发》是PHP与jQuery结合的经典之作。书中首先概括了jQuery和PHP的经典特性,随后详细阐述了如何高效地结合两种技术为应用构建高度交互的用户界面。《深入PHP与jQuery开发》共讲述4部分内容,分别...
深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...
深入PHP与jQuery开发是PHP 与jQuery 结合的经典之作。《深入PHP与jQuery开发》首先概括了jQuery 和PHP 的经典特性,随后详细阐述了如何高效地结合两种技术为应用构建高度交互的用户界面。《深入PHP与jQuery开发》共...
jQuery数据列表新增或修改删除代码
Jquery数据绑定分页源码
解读jQuery插件开发流程_.docx
jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性,提高了读取的效率,比读xml文件更加方面
深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...
程序员必备:Jquery数据分页,实现数据库中的数据的分页。这种分页技术可以实现无刷新更新页面。用起来方便灵活。用户体验较好。
深入理解JavaScript系列,超实用的jQuery代码段,jQuery源码分析系列。
table 绑定数据 jquery 分页 table 绑定数据 jquery 分页 table 绑定数据 jquery 分页
jQuery数据加载进度条代码基于jquery.2.1.0.min.js制作,有四种进度条特效。
一个配合jquery库使用的数据验证js jquery库在1.4以上即可 只需引用一个js,如没有引用jquery库的需引用 如验证input或textbox中输入的时候email只需: 在input或textbox中加入属性ValidDataForEmail='default'即刻...