文档章节

jQuery缓存数据——仿Map

白志华
 白志华
发布于 2015/10/18 10:56
字数 989
阅读 36
收藏 0

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


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


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


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



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

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等方法,并 对方法进行了封装,足够满足你的需求。测试代码如下:

<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>

       点击这个可以在线查看运行结果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/47057573

共有 人打赏支持
白志华
粉丝 31
博文 265
码字总数 57524
作品 0
长沙
程序员
私信 提问
jQuery最核心的基础设施之一——数据缓存模块进化史

数据缓存系统最早应该是jQuery1.2引入的,那时它的事件系统完成照搬DE大神的addEvent.js,而addEvent在实现有个缺憾,它把事件的回调都放到EventTarget之上,这会引发循环引用,如果EventTa...

modernizr
2014/05/30
236
3
第80天:jQuery插件使用

jQuery其他补充 + 4.1 链式编程: end()补充 补充五角星 评论案例 第一步:鼠标移入,当前五角星和前面的五角星变实体。后面的变空心五角星 第二步:鼠标点击的时候,为当前元素添加clicked...

半指温柔乐
2017/11/10
0
0
jQuery 3.0 的更新内容及使用方法

本文是一篇来自微软的 Web 开发系列文章的一部分。感谢您支持这位使 SitePoint 成为可能的合作伙伴。 jQuery,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器。自...

oschina
2016/01/22
10.2K
23
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
你的第一杯Web 2.0 —— 快速浏览jQuery、Spring MVC和XStream/J...

不再有页面刷新:使用jQuery 相关厂商内容 免费迷你书下载:Flex入门指南——PHP开发者 Flash Builder 4 Beta和FlexUnit下的测试驱动开发 下载Flex 4 SDK,构建超级棒的Flex应用 使用Pixel B...

李长春
2011/09/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
37分钟前
0
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
48分钟前
0
0
协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
57分钟前
5
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linux-tao
今天
2
0
在 Ubuntu 上为 CentOS 编译 Rust 程序

现在 CentOS 8 还没出来,最新的是 CentOS 7.6,上面搭载的 glibc 版本是 2.17,都已经是 2012 年那时候的版本了。 现在开发者比较常用的桌面 Linux 系统,比如 Ubuntu / Debian / Mint / A...

helloclia
今天
18
3

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部