# 数据缓存+图片缓存
> 引自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的拼接
}
~~~
- 关于我们
- ApiCloud
- 支付模块
- 微信支付--wxPay（客户端）
- 微信支付--wxPay(服务端)
- 支付宝支付--aliPay（客户端配置）
- 支付宝支付--aliPay（服务端配置）
- DoT模板
- 缓存模块
- 监听模块
- 百度定位模块
- 设置状态栏字体颜色
- 选择城市插件
- 跨页面执行方法
- 安卓-点击返回事件
- 上传图片模块
- 点击弹出放大图片层
- 魅族手机apiready问题
- 分享
- 跨win或frm执行脚本
- 关于ios数字自动识别成手机号
- 百度地图bMap
- 语音识别模块
- tabBarMenu底部导航
- 第三方登录
- QQ网站和appQQ账号的统一问题解决
- 微信登录
- QQ登录
- 微博登录
- 上拉加载、下拉刷新模块
- 图片缓存
- 文件和图片缓存机制分享
- PHP
- 支付宝及时到账
- no input file specified报错解决
- thinkphp 整合kindeditor
- 整合tpshop微信模块到thinkcmf中
- thinkphp3.1.3整合支付宝
- 网站接入QQ OAuth2.0登录教程
- ThinkPHP整合百度编辑器Ueditor
- PHP加快执行效率的写法规范
- ThinkPHP操作大全
- PHP操作大全
- Thinkphp中SQL操作返回值
- php5.3 foreach 使用&(与运算符)引用赋值要注意的问题
- mysql给字段追加值
- 阿里大鱼短信平台接入
- Navicat 导出 Mysql 数据字典
- php 面向对象全面教程
- PHP5下调用SOAP
- PHP处理时间格式添加空格
- 伪装URL请求（.htaccess）
- url请求参数加解密
- JS插件
- artDialog弹窗-页面传值
- jQuery点击遮罩弹出层固定居中
- jeBox原生弹窗
- bxslider轮播
- js生成指定位数随机数
- 发送短信倒计时
- js调试
- jQuery.validator 表单验证规则
- Swiper 轮播
- 获得焦点时-图片抖动
- uploadify无刷新上传图片
- 导航下拉隐藏上拉显示
- 获得焦点时-加黑色蒙版
- jquery.qrcode.js生成二维条形码(支持中文)
- jquery.qrcode.js生成二维条形码(官方不支持中文)
- nth-child 选择器
- 无刷新点击实现加载更多数据
- 刷新页面方法
- 判断滚动条向上向下
- 跨浏览器复制jQuery-zclip
- js校验表单后提交表单的三种方法
- 用JS判断下拉框是否选中
- div中滚动
- 提交时弹出模态框
- 当图片不显示时替换方法
- 前端
- CSS3
- HTML5
- css技巧
- 移动端rem
- Flex布局
- 电商详情滚动条监听
- VueCircleMenu圆环按钮
- iframe自适应页面高度
- 百度Echart
- input:radio改变选中颜色
- Jquery
- 响应式布局基本实现Media Query
- 循环输出只输出新内容
- 小程序
- wx.request坑
- 概要
- git操作
- 本地记住密码
- 操作
- 生成ssh公钥 记住密码
- git避坑
- ES6学习手札
- 调试小插件
- 谷歌插件Postman
- PHP调试助手
- WordPress
- 缓存服务器Redis
- 在线代码运行 Docker
- 在ubuntu下怎样安装https
- BrowserSync 浏览器同步测试工具
- getmarkman高效的设计稿标注、测量工具
- PHPstrom软件
- 服务器
- linux 安装搭建服务器配置及nginx配置
- tpshop的nginx 服务器配置方法
- （服务器访问文件404解决办法）IIS 之 添加MIME扩展类型及常用的MIME类型列表
- mysql部分
- mysql缓存
- MySql监控工具--mytop
- MySql主从搭建
- mysql优化
- Mysql 复制 （主从复制）
- iOS开发笔记 - 上线流程
- VUE避坑指南
- 从零开始学Vue
- Vue-cli
- Webpack
- VUE小记
- npm打包空白
- 打包背景图片/项目图片不显示
- VUE避坑指南/elementUI upload 自定义http-request上传
- 关于watch监听路由重复加载方法
- 解决加载内容的时候闪动问题
- vuecli没有network访问地址
- python学习
- python初始
- pytho内置函数大全
- win10 播放器播放TS文件问题
- 设计网站
- VUE避坑指南/VUE-CLI部署空白
- swiper使用问题
- uni-app学习手册
- 目录结构
- layUI
- nodesass版本sassloader版本问题