文件和圖片緩存機制分享 · 從零開始的避坑指南

# 數據緩存+圖片緩存 > 引自tcld2269 ## **demo下載地址**：http://pan.baidu.com/s/1i5JqPFZ * * * * * > 設計思路：1.先從本地文件讀取數據，如果讀取到則直接返回 2.如果本地沒有緩存，則前往服務器取數據，然后存到本地 3.如果本地緩存過期（服務器端數據進行了更新），則更新本地緩存文件 * * * * * > 1.通用js，存放在common.js，每個頁面都要引用。 var serverurl = "http://xxx.xxx.com/appservice.asmx";//服務器接口路徑 var machineurl = "http://xxx.xxx.com";//服務器路徑，用于圖片顯示 ~~~ //緩存方法 function doCache(folder, id, url, callback) { readFile('/' + folder + '/' + id + '.json', function(ret, err) { if (ret.status) { //如果成功，說明有本地存儲，讀取時轉換下數據格式 //拼裝json代碼 //alert('取到緩存') var cacheData = ret.data; callback(JSON.parse(cacheData)); iCache($('.cache')); //再遠程取一下數據，防止有更新 ajaxRequest(url, 'GET', '', function(ret, err) { if (ret) { if (cacheData != JSON.stringify(ret)) { //有更新處理返回數據 //alert('更新緩存') callback(ret); //緩存數據 writeFile(ret, id, folder); iCache($('.cache')); } } else { alert('數據獲取失敗！'); } }) } else { //如果失敗則從服務器讀取，利用上面的那個ajaxRequest方法從服務器GET數據 ajaxRequest(url, 'GET', '', function(ret, err) { if (ret) { //處理返回數據 //alert('沒取到緩存') callback(ret); //緩存數據 writeFile(ret, id, folder); iCache($('.cache')); } else { alert('數據獲取失敗！'); } }) } }) } //ajax請求 function ajaxRequest(url, method, datas, callBack) { var serverUrl = serverurl; var now = Date.now(); api.ajax({ url : serverUrl + url, method : method, cache : false, timeout : 30, dataType : 'json', data : { values : datas } }, function(ret, err) { if (ret) { callBack(ret, err); } else { api.alert({ msg : ('錯誤碼：' + err.code + '；錯誤信息：' + err.msg + '網絡狀態碼：' + err.statusCode) }); } }); } //讀文件 function readFile(path, callBack) { var cacheDir = api.cacheDir; api.readFile({ path : cacheDir + path }, function(ret, err) { callBack(ret, err); }); } //寫文件 function writeFile(json, id, path) { //緩存目錄 var cacheDir = api.cacheDir; api.writeFile({ //保存路徑 path : cacheDir + '/' + path + '/' + id + '.json', //保存數據，記得轉換格式 data : JSON.stringify(json) }, function(ret, err) { }) } //緩存圖片 function iCache(selector) { selector.each(function(data) {! function(data) { var url = selector.eq(data).attr("src"); var img = this; var pos = url.lastIndexOf("/"); var filename = url.substring(pos + 1); var path = api.cacheDir + "/pic/" + filename; var obj = api.require('fs'); obj.exist({ path : path }, function(ret, err) { //msg(ret); if (ret.exist) { if (ret.directory) { //api.alert({msg:'該路徑指向一個文件夾'}); } else { //api.alert({msg:'該路徑指向一個文件'}); //selector.eq(data).src=path; selector.eq(data).attr('src', null); path = api.cacheDir + "/pic/" + filename; selector.eq(data).attr('src', path); //console.log(selector.eq(data).attr("src")); } } else { api.download({ url : url, savePath : path, report : false, cache : true, allowResume : true }, function(ret, err) { //msg(ret); if (ret) { var value = ('文件大小：' + ret.fileSize + '；下載進度：' + ret.percent + '；下載狀態' + ret.state + '存儲路徑: ' + ret.savePath); } else { var value = err.msg; }; }); } }); }(data); }); }; ~~~ > 2.調用方法。 ~~~ //緩存ID var id = api.pageParam.typeId; //緩存目錄，存儲地址為 Caches/folder/id.json var folder = "cartype"; //請求地址 var url = "/getCategoryByParentId?parentId=" + id + "&key=" + key; //讀取執行 doCache(folder, id, url, function(data) { //處理拼接html //圖片樣式加上cache }); ~~~ * * * * * > 3.圖片緩存的實現。 ~~~ 在需要圖片緩存的頁面，加上<script src="../../js/zepto.min.js"></script> 然后在doCache回調里面的圖片的class加上cache即可自動實現圖片緩存 ~~~ ### **備注：需要云模塊中添加fs文件模塊。** * * * * * * * * * * # 上劃翻頁的實現 > 自動加載下10條，沒有數據的話就顯示暫無內容。頁數為0的話是用的緩存讀取數據，保證了第一次的加載速度。由于也用到了上面的緩存，所以也需要引用common.js和zepto.min.js ### 1）在apiready中定義當前頁碼 ~~~ $api.setStorage("resou_index", 0); load(); //上拉翻頁 api.addEventListener({ name : 'scrolltobottom' }, function(ret, err) { $api.setStorage("resou_index", $api.getStorage("resou_index") - 0 + 1); load(); }); ~~~ ### 2）數據加載方法 ~~~ //數據加載，first是判斷是否重新刷新，index2是傳入的當前頁碼 function load(first, index2) { var index = $api.getStorage("resou_index"); if (index2 != null) { index = index2; } var id = "resou"; var url = "/getGoodsTagList?tag=" + id + "&pageIndex=" + index + "&pageCount=20&key=" + key; if (index == 0) { //默認加載緩存 var folder = "getGoodsTagList"; doCache(folder, id, url, function(data) { dealWithHtml(data, first, index); }); } else { //分頁后不加載緩存 ajaxRequest(url, 'get', '', function(data) { dealWithHtml(data, first, index); }); } } ~~~ ### 3）處理回調數據 > 可以使用doT模板 ~~~ function dealWithHtml(data, first, index) { //處理數據html的拼接 } ~~~