数据缓存是为了解决内存泄露,他的原理是,当我们将数据存储到一个对象上面,实际上是将所有的数据存到一个单独的数据对象里,而这个对象只提供一个接口,这个接口可以访问自己存在数据对象里自己的数据。
这是一个简单的数据缓存
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")) //winderconsole.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")) //winderconsole.log(obj) //里面的里面是0.6637197330750032:1console.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当中,细致考虑了多种情况。