jQuery缓存数据——仿Map

最新推荐文章于 2022-01-16 15:55:30 发布

阅读量513

点赞数 1

文章标签： jquery

最近在工作中遇到了这样一个情景。有些数据是从后台读取的，但是我暂时不需要展示在页面上，那怎么办呀？——缓存呀。今天我就来分享一下我所了解的Jquery缓存数据的方法。

首先分享1篇博文——《读jQuery之六（缓存数据）》，还有2个文档：Jquery中的.data()方法，以及jQuery.data()方法。通过这些资料，你应该就会对缓存数据有了一定的了解。具体的介绍文档里已经说的很清楚了，我要分享的是自己写的一些js方法。

在JAVA开发中，我们需要缓存数据，一般都选择放在了Map中。就算是放在各种缓存框架，也基本上都是以Key/Value的方式存放起来的。既然现在要在页面上缓存数据，那么我们就模仿Map来实现缓存数据的功能吧。

jQuery.data()是一个底层的方法，所以我们尽量使用.data()的方法来完成这个功能。方法说明如下：

根据说明，进行存储数据。由于是做缓存的，属于页面全局所有的。所以元素就选择body。具体代码如下：

[javascript]view plaincopy 
    
 var map = {  
   
   /** 
    * 缓存数据 
    * 如果当前key已缓存了值，则抛出existed异常 
    */  
   put : function(key,value,override) {  
     if(!this.get(key)) {  
       var arr = new Array();  
       arr.push(value);  
       $("body").data(key, arr);  
     }else if(override){//覆盖  
       this.update(key, value);  
     }else{  
       throw new Error(key + " existed");  
     }  
   },  
     
   /** 
    * 更新缓存数据 
    */  
   update:function(key,value,idx,name){  
     if(!this.get(key)) {  
       throw new Error(key + " is non-existed");  
     }else{  
       var arr = this.get(key);  
       if(idx || idx>=0){  
         if(arr[idx] instanceof Array){//数组的话  
           this.remove(key);  
           this.put(key,value,true);  
         }else if(arr[idx] instanceof Object){  
           if(typeof(value)=='number'){  
             eval("arr["+idx+"]."+name+"="+value);  
           }else{  
             eval("arr["+idx+"]."+name+"='"+value+"'");  
           }  
         }  
       }else{  
         this.remove(key);  
         this.put(key,value,true);  
       }  
     }  
   },  
   
   /** 
    * 在同一个key中追加数据 
    */          
   append:function(key, value) {  
     if(!this.get(key)) {  
       var arr = new Array();  
       arr.push(value);  
       $("body").data(key, arr);  
     }else{//覆盖  
       var arr = this.get(key);  
       arr.push(value);  
       $("body").data(key, arr);  
     }  
   },  
   
   /** 
    * 移除缓存 
    * 如果当前key已缓存了值，则抛出non-existed异常 
    */  
   remove:function(key){  
     if(this.get(key)) {  
       $("body").removeData(key);  
     }else{  
       throw new Error(key + " is non-existed");  
     }  
   },  
     
   /** 
    * 移除所有缓存数据 
    */              
   removeAll:function(){  
     $("body").removeData();  
   },  
     
   /** 
    * 获取缓存数据 
    */        
   get:function(key) {  
     return ($("body").data(key) ? $("body").data(key) : undefined);  
   },  
   
   /** 
    * 获取缓存数据数组，结果为数组类型 
    */    
   getArray:function(key){  
     return $("body").data(key);  
   },  
   
   /** 
    * 获取所有缓存数据，结果为对象类型 
    */      
   getObject:function(){  
     return $("body").data();  
   }  
 }  

这段代码采用了面向对象的思想，提供了get、update、append、remove等方法，并对方法进行了封装，足够满足你的需求。测试代码如下：

[html]view plaincopy 
    
 <body>  
   <textarea id="scripts" row="3" style="width:800px;height:540px">  
     map.removeAll();//移除所有的缓存数据  
     map.put("user","zhangsan");//添加缓存  
     $("#result").text("姓名：" + map.get("user"));  
     $("#wait").text("  [1秒后会更新该值]");  
       
     setTimeout(function (){  
       $("#wait").text("");  
       $("#result").text("");  
       var user = {name:'lisi'};  
       map.update("user",user);//更新缓存  
       $("#result").text("姓名："+map.get("user")[0].name);      
         
       $("#wait").text("  [1秒后会更新该值]");        
       setTimeout(function(){  
         $("#wait").text("");  
         $("#result").text("");  
         map.update("user",22,"age",0);//更新缓存  
         map.update("user","xx市xx街xx号","addr",0);//更新缓存  
         var user = map.get("user")[0];  
         $("#result").text("姓名："+user.name+' 年方：'+user.age+" 家住："+user.addr);  
         $("#wait").text("  [1秒后会更新该值]");  
       },1000);  
         
         
       setTimeout(function(){  
         $("#wait").text("");  
         $("#result").text("");  
         var user2 = {name:'zhangsan'};  
         map.append("user",user2);//追加缓存  
         $("#result").text("姓名1："+map.get("user")[0].name+' ，姓名2：'+map.get("user")[1].name);    
         $("input").show();  
       },2000);  
       },1000);  
   </textarea><br/><br/>  
   执行结果：<span id="result" style="color:#ff0000"></span><span id="wait"></span><br/>  
   ---------------------------------------------------<br/>  
   预计结果：<br/>  
    姓名：zhangsan<br/>  
    姓名：lisi<br/>  
    姓名：lisi 年方：22 家住：xx市xx街xx号<br/>  
    姓名1：lisi ，姓名2：zhangsan   
   <br/><br/><input type="button" onclick="eval($('#scripts').val());" value="运行测试">   
   <input type="button" style="display:none;" onclick="alert(map.get('user')[0].name)" value="获取第一个缓存的name值">   
   <input type="button" style="display:none;" onclick="alert(map.getArray('user').length)" value="获取缓存的数量">   
   <input type="button" style="display:none;" onclick="alert(JSON.stringify(map.get('user')[0]))" value="获取第一个用户的详细信息">   
 </body>  