深入解读jquery的数据存储相关(data)序2
前言：
先回顾一下上一篇：深入解读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嘛！！！