数据缓存是为了解决内存泄露，他的原理是，当我们将数据存储到一个对象上面，实际上是将所有的数据存到一个单独的数据对象里，而这个对象只提供一个接口，这个接口可以访问自己存在数据对象里自己的数据。
这是一个简单的数据缓存
var cache= {};
function set(obj,name,value){
//在对象上存储一个属性，用作访问数据的接口
obj.expando = 1;
//初始化对象，并在我们接口所提供的位置存放数据
cache[obj.expando] = {}
cache[obj.expando][name] = value
}
function get(obj,name){
//实际就是通过对象上的expando指定在数据中位置去访问的自己的数据。
return cache[obj.expando][name]
}
var obj2 = {};
set(obj2,"name","winder");
console.log(get(obj2,"name")) //winder
console.log(obj2) // Object { expando: 1}
console.log(cache[1]) // Object { name: "winder" }
由代码可以很清楚看到，我们实际访问的是数据对象中，1引用的对象；而如何找到数据的位置，则由存储在对象上的一个接口属性提供。
当我们把他运用在jQuery中
//mini的jQuery框架。
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
selector: "",
init: function(selector){
var result = document.querySelectorAll(selector);
for(var i = 0;i < result.length;i++){
this[i] = result[i]
}
this.length = result.length;
},
constructor : jQuery
}
jQuery.fn.init.prototype = jQuery.fn; //定义date构造函数
function Data(){
this.cache = {}
//默认带有随机数属性
this.expando = Math.random()
}
//设置在数据对象中的位置的辅助属性
Data.uid = 1;
Data.prototype = {
//判断对象是否有接口属性，
//没有接口时，新建接口
key: function( owner ) { var descriptor = {},
unlock = owner[ this.expando ];
if ( !unlock ) {
unlock = Data.uid++; descriptor[ this.expando ] = { value: unlock };
Object.defineProperties( owner, descriptor ); }
//确保在缓存中存在
if ( !this.cache[ unlock ] ) {
this.cache[ unlock ] = {};
}
return unlock;
},
//向缓存中添加数据
set: function( owner, data, value ) {
var unlock = this.key( owner );
var cache = this.cache[ unlock ];
cache[ data ] = value; return cache;
},
//获取数据
get: function( owner, key ) {
var cache = this.cache[ this.key( owner ) ]; return cache[ key ];
},
//access实际就是一个访问路由，根据参数判断是设置还是获取
access: function( owner, key, value ) {
//访问
if ((typeof key === "string") && value === undefined ) { return this.get( owner, key );
}
//设置
this.set( owner, key, value ); return value
},
}
var data_user = new Data()
jQuery.data = function( elem, name, data ) {
return data_user.access( elem, name, data );
}
//测试
var obj = {}
jQuery.data(obj,"name","winder")
console.log(jQuery.data(obj,"name")) //winder
console.log(obj) //里面的里面是0.6637197330750032：1
console.log(data_user.cache[1])//Object { name: "winder" }
采用向对象中添加随机数属性，是为了屏蔽除内部外任何访问，保证缓存中数据安全。
添加jQuery对象方法
//mini的jQuery框架。
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
selector: "",
init: function(selector){
var result = document.querySelectorAll(selector);
for(var i = 0;i < result.length;i++){
this[i] = result[i]
}
this.length = result.length;
},
constructor : jQuery
}
jQuery.fn.init.prototype = jQuery.fn; //定义date构造函数
function Data(){
this.cache = {}
//默认带有随机数属性
this.expando = Math.random()
}
//设置在数据对象中的位置的辅助属性
Data.uid = 1;
Data.prototype = {
//判断对象是否有接口属性，
//没有接口时，新建接口
key: function( owner ) { var descriptor = {},
unlock = owner[ this.expando ];
if ( !unlock ) {
unlock = Data.uid++; descriptor[ this.expando ] = { value: unlock };
Object.defineProperties( owner, descriptor ); }
//确保在缓存中存在
if ( !this.cache[ unlock ] ) {
this.cache[ unlock ] = {};
}
return unlock;
},
//向缓存中添加数据
set: function( owner, data, value ) {
var unlock = this.key( owner );
var cache = this.cache[ unlock ];
cache[ data ] = value; return cache;
},
//获取数据
get: function( owner, key ) {
var cache = this.cache[ this.key( owner ) ]; return cache[ key ];
},
//access实际就是一个访问路由，根据参数判断是设置还是获取
access: function( owner, key, value ) {
//访问
if ((typeof key === "string") && value === undefined ) { return this.get( owner, key );
}
//设置
this.set( owner, key, value ); return value
},
}
var data_user = new Data()
jQuery.data = function( elem, name, data ) {
return data_user.access( elem, name, data );
}
//简化的jQuery对象API方法
jQuery.fn.data = function( key, value ){
for(var i = 0;i < this.length; i++){
return jQuery.data(this[i],key,value)
}
}
//测试
var $emample = jQuery("#example")
$emample.data("name","winder");
console.log($emample.data("name")) //winder
这是一个极简化的API。而在原版jQuery当中，细致考虑了多种情况。