前言:
先回顾一下上一篇:深入解读jquery的数据存储相关(data)开篇,本篇继续下一个版本。。。
正文:
上一篇其实已经简单地介绍了一个比较关键的地方:
- 节点如何和数据仓库(cache)直接的映射关系
- 如何区别处理window节点绑定数据
- expando生成的规则
- 。。。。
本文先看一下
jquery-1.3版本吧:
其实变化有
大有
小:
1、内部很多场景下用到 new Date相关的,抽离了一个方法
now:
function now(){ return +new Date; } //expando的微小变化 var expando = "jQuery" + now();
2、有用的来了:在fn里面扩展了,方便jQuery对象之间使用data方法进行数据存储操作。
jQuery.fn.extend({ /* *@name data *@param key *@param value */ data:function(key,value){ var parts = key.split("."); parts[1] = parts[1] ? "." + parts[1] :""; if(value === undefined){ //获取数据 //@info 这段代码很有风格,非“一般人”会这样写 //如果你在调用之前注册了一个getData的方法,会先触发,回调给用户代理 var data = this.triggerHandler("getData"+parts[1]+"!",[parts[0]]); if(data === undefined && this.length){ data = jQuery.data(this[0],key); } return data === undefined && parts[1] ? this.data(parts[0]) : data; }else{ //设置数据 //@info 这段代码很有风格,非“一般人”会这样写 //如果你在调用之前注册了一个setData的方法,会先触发,回调给用户代理 return this.trigger("setData"+parts[1]+"!",[parts[0],value]).each(function(){ //还是核心jQuery.data jQuery.data(this,key,value); }); } }, /* *@name removeData *@param key */ removeData:function(key){ //核心还是转向jQuery.removeData jQuery.removeData(this,key); } })
how to use??
<div id="out1"></div>
1、设置数据
//绑定自定义setData $('#out1').bind('setData',function(e){ console.log('开始setData'); }); $('#out1').data('name','zhangyaochun');
看一下setData句柄里面的arguments吧:
2、获取数据:
//绑定自定义getData的事件 $('#out1').bind('getData',function(e){ console.log('开始getData'); }); console.log($('#out1').data('name'));
看一下getData句柄里面的arguments吧:
结语:
按司徒的话说,这两个用户自定义入口,给了也是白给,使用率比较低,或者N多的人基本不知道。。。。
- 比较赞的地方还是这种给用户回调的设计,个人比较喜欢和推崇,也是lib和plugin设计的一个必杀技
- 还一个就是终于在jQuery对象绑上data和removeData了,这样才像jQuery嘛!!!