在前端瀏覽器中,有些資料(例如資料字典中的資料),可以在第一次要求的時候全部拿過來保存在js物件中,以後需要的時候就不用每次都去請求伺服器了。對於那些大量使用資料字典來填入下拉框的頁面,這種方法可以大幅減少對伺服器的存取。這種方法特別適用於使用iframe的框架。
具體實作想法與方法:
建立一個cache.js檔案:
1、前端頁面,定義那些資料需要一次拿到前端緩存,定義一個物件來保存這些資料:
/** * 定义需要在用户登录的时候获取到本地的数据字典类别 */ var clsCodes = {"clsCodes" : ["BOOL", "STATUS", "USER_TYPE", "REPORT_STATUS" ] }; /** * 获取数据字典到本地 */ var dicts;
2、前端頁面,定義一個函數來呼叫後台介面取得數據,然後儲存到本機快取物件(dicts)中。
function getDicts() { $.post(getContextPath() + "/api/sys/getDictList", clsCodes, function(resultBean, status, xhRequest) { if (resultBean.data != undefined) { dicts = resultBean.data; } }, 'json'); }
#在主頁面載入的時候呼叫這個方法一次取得資料並快取起來。這樣,以後需要同樣的數據,就直接從本地物件dicts中取得了。
後端Controller:
3、定義一個接口,根據前端的請求,查詢資料庫(或查詢伺服器緩存,如下面範例)取得資料返回給前端:
/** * 根据多个分类编号获取多个字典集合 * @param clsCodes * @return {{"clsCode" : {"code1":"name1,"code2":"name2"...}}, ...} */ @SuppressWarnings({ "unchecked", "rawtypes" }) @ResponseBody @RequestMapping("getDictList") public ResultBean getDictList(@RequestParam(value = "clsCodes[]", required = true) String[] clsCodes) { ResultBean rb = new ResultBean(); Map<String, Map<String, String>> dictCache = (Map<String, Map<String, String>>) CacheManager.getInstance().get(CacheConstants.DICT); Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序 if(dictCache != null){ for(String clsCode: clsCodes){ dictMap.put(clsCode, dictCache.get(clsCode)); } }else{ rb.setMessage("缓存中拿不到字典信息!"); rb.setSuccess(false); } rb.setData(dictMap); return rb; }
相關推薦:
以上是JavaScript如何實現前端快取的詳細內容。更多資訊請關注PHP中文網其他相關文章!