大图片服务器文件缓存,文件和图片缓存机制分享

# 数据缓存+图片缓存

> 引自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.图片缓存的实现。

~~~

在需要图片缓存的页面，加上

然后在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的拼接

}

~~~