基于backbone和zepto用户缓存json请求数据,
基本作用是:增加localstorage存储中转;
后台数据--》localstorage-》页面。。
每次数据去localstorage取,然后把后台数据更新到localstorage里面
用到的库:zepto.js和Backbone.js,当然稍微改一下就不需要基于这2个库的,我就直接张贴来了。懒得改了
(function($){
var getValue = function(object, prop) {
if (!(object && object[prop])) return null;
return _.isFunction(object[prop]) ? object[prop]() : object[prop];
},
isCache = true,
requestSteps= [];
try {
localStorage.setItem('cache','test');
} catch (e) {
isCache = false;
}
var Store = $.localStorage = function(name, uptime) {
var minutes = 1000*60;
this.name = name;
this.uptime= ((typeof (+uptime)==='number' && uptime > 0 && uptime ) || 1500) * minutes;
var store = localStorage.getItem(this.name);
this.data = (store && JSON.parse(store)) || {};
},
vessels = {},
myStore;
_.extend(Store .prototype,{
// Save the current state of the **Store** to *localStorage*.
save: function() {
// console.log(this.name,'中更新了来自 ',decodeURIComponent(_.map(this.data,function(val,key){return key})[0]),'的缓存数据');
localStorage.setItem(this.name, JSON.stringify(this.data));
},
// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
// have an id of it's own.
create: function(model) {
//if (!model.id) model.set(model.idAttribute, guid());
model.__time= Date.now();
this.data[model.__id] = model;
// $.cookie(model.__id, this.name+Date.now() , {expires: date});
this.save();
return model;
},
// Update a model by replacing its copy in `this.data`.
update: function(model) {
model.__time= Date.now();
this.data[model.__id] = model;
this.save();
return model;
},
// Retrieve a model from `this.data` by id.
find: function(id) {
var model= this.data[id],
time= Date.now(),
uptime= this.uptime;
return $.isObject(model) && (typeof (+model.__time) ==='number') && (time - model.__time < uptime) ? model : false;
},
// Return the array of all models currently in storage.
findAll: function() {
return _.values(this.data);
},
// Delete a model from `this.data`, returning it.
destroy: function(model) {
delete this.data[model.__id];
this.save();
return model;
}
});
var sync= function(method, model, options){
var options = options ? _.clone(options) : {},
url= options.url,
success= options.success,
id,
resp,
ajaxtime = 500,
setTime = null,
self = this;
if(!url){
url= getValue(model, 'url');
}
id= encodeURIComponent(url);
//将success添加一段代码将起保存在localStorage里面
options.success = function(resp, status, xhr) {
resp.__id= id;
myStore.create(resp);
//执行backbone fetch定义的success
success.apply(options , arguments);
};
$.later(function(){
if(id && $.isObject(resp= myStore.find(id)) ){
//修改正在请求的ajax的success方法,仅保存到localStorage里面
options.success = function(resp, status, xhr){
resp.__id= id;
myStore.create(resp);
}
// console.log('读取自缓存数去');
success.call(options , resp, 'success' , null);
}
Backbone.sync.call(self, 'read', self, options);
},10);
}
$.sync= function(name,date){
if(isCache){
myStore= vessels[name] || (vessels[name]= new Store(name, date));
return sync;
}else{
return function(method, model, options){
Backbone.sync.call(this, method, this, options);
}
}
}
})(Zepto);
使用方法很简单:
1 var collection =new Backbone.Collection.extend({ 2 sync : $.sync('zhangnan',100)//参数1保存在localstorage里面的key值,参数2过期时间 3 });