jQuery缓存数据——仿Map
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
? ? ? ?最近在工作中遇到了這樣一個(gè)情景。有些數(shù)據(jù)是從后臺讀取的，但是我暫時(shí)不需要展示在頁面上，那怎么辦呀？——緩存呀。今天我就來分享一下我所了解的Jquery緩存數(shù)據(jù)的方法。
? ? ? ?首先分享1篇博文——《讀jQuery之六（緩存數(shù)據(jù)）》，還有2個(gè)文檔：Jquery中的.data()方法，以及jQuery.data()方法。通過這些資料，你應(yīng)該就會對緩存數(shù)據(jù)有了一定的了解。具體的介紹文檔里已經(jīng)說的很清楚了，我要分享的是自己寫的一些js方法。
? ? ? ?在JAVA開發(fā)中，我們需要緩存數(shù)據(jù)，一般都選擇放在了Map中。就算是放在各種緩存框架，也基本上都是以Key/Value的方式存放起來的。既然現(xiàn)在要在頁面上緩存數(shù)據(jù)，那么我們就模仿Map來實(shí)現(xiàn)緩存數(shù)據(jù)的功能吧。
? ? ? ?jQuery.data()是一個(gè)底層的方法，所以我們盡量使用.data()的方法來完成這個(gè)功能。方法說明如下：
? ? ? ?根據(jù)說明，進(jìn)行存儲數(shù)據(jù)。由于是做緩存的，屬于頁面全局所有的。所以元素就選擇body。具體代碼如下：
var map = {/*** 緩存數(shù)據(jù)* 如果當(dāng)前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");}},/*** 更新緩存數(shù)據(jù)*/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){//數(shù)組的話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);}}},/*** 在同一個(gè)key中追加數(shù)據(jù)*/ 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);}},/*** 移除緩存* 如果當(dāng)前key已緩存了值，則拋出non-existed異常*/remove:function(key){if(this.get(key)) {$("body").removeData(key);}else{throw new Error(key + " is non-existed");}},/*** 移除所有緩存數(shù)據(jù)*/ removeAll:function(){$("body").removeData();},/*** 獲取緩存數(shù)據(jù)*/ get:function(key) {return ($("body").data(key) ? $("body").data(key) : undefined);},/*** 獲取緩存數(shù)據(jù)數(shù)組，結(jié)果為數(shù)組類型*/ getArray:function(key){return $("body").data(key);},/*** 獲取所有緩存數(shù)據(jù)，結(jié)果為對象類型*/ getObject:function(){return $("body").data();}}
? ? ? ?這段代碼采用了面向?qū)ο蟮乃枷?#xff0c;提供了get、update、append、remove等方法，并 對方法進(jìn)行了封裝，足夠滿足你的需求。測試代碼如下：
<body><textarea id="scripts" row="3" style="width:800px;height:540px">map.removeAll();//移除所有的緩存數(shù)據(jù)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/>執(zhí)行結(jié)果：<span id="result" style="color:#ff0000"></span><span id="wait"></span><br/>---------------------------------------------------<br/>預(yù)計(jì)結(jié)果：<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="運(yùn)行測試">?<input type="button" style="display:none;" onclick="alert(map.get('user')[0].name)" value="獲取第一個(gè)緩存的name值">?<input type="button" style="display:none;" onclick="alert(map.getArray('user').length)" value="獲取緩存的數(shù)量">?<input type="button" style="display:none;" onclick="alert(JSON.stringify(map.get('user')[0]))" value="獲取第一個(gè)用戶的詳細(xì)信息">? </body>
? ? ? ?點(diǎn)擊這個(gè)可以在線查看運(yùn)行結(jié)果。
版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
轉(zhuǎn)載于:https://my.oschina.net/u/2260184/blog/518490
總結(jié)
以上是生活随笔為你收集整理的jQuery缓存数据——仿Map的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Axure9激活码
- 下一篇： [Leetcode][第347题][JA