最近做个人项目的时候,有一个需求:用户在页面进行各种编辑操作,但是却不必显示的保存修改,下次打开页面时依然可以看到修改后的内容。
看到这个需求第一反应就是,前端无感知,后端自动保存修改。具体怎么做呢?我的思路是:
1、在前端有修改时,写一个jquery函数(命名为:storeChange)——通过ajax将修改的内容传输到后端,由后端进行操作,比如保存数据库等。下次访问时,从数据库读取数据。
2、为了防止用户在刷新/关闭页面不丢失数据,因此需要通过jquery在这两个事件的时候调用storeChange函数。
第一个版本代码如下:
//页面关闭时调用
$(window).unload(function()
{
storeChange();
});
//页面刷新时调用
$(window).on('beforeunload', function(event) {
storeChange();
});
//前端页面内容修改触发
function haveModified()
{
//做一些事情
storeChange();
}
function storeChange()
{
//做一些事情
$.ajax({
type:"POST",
dataType:"json",
data:{projectId:projectId,projectLists:arrProjectNodes},
url:'Project/Project/modifyProject',
success:function (data) {
if (data.errno == 0) {
//do something
} else {
console.log('there are some errors in project.js:storeChange ajax' + data.errno + ': ' + data.msg);
}
},
error:function (er) {
console.log('some error in project.js:storeChange ajax');
}
});
}
但是经检验这个版本有诸多问题:
第一、也是最严重的就是在刷新和关闭页面的时候,经常丢失数据(chrome)甚至部分浏览器完全不起作用(遨游-极速模式,兼容模式未试,这里不是黑遨游浏览器,本人是遨游浏览器的忠实用户,从初中用到现在,十多年了,个人感觉还是非常好用的);
第二、如果操作非常频繁,会频繁调用后端接口,浪费资源、加大后端压力。
因此针对这两个问题进行解决,方案如下:
针对第一个问题:
【原因】
由于ajax默认是异步调用,这样就有一个问题:document的内容是先被销毁,还是先被传输到后端?如果是后者则符合项目需求,而如果是前者就会出现问题。
【解决方案】
将刷新和关闭页面时调用的storeChange函数中的ajax改为同步方式。
针对第二个问题:
【原因】
每一个修改(会点击一些按钮等进行新增、删除、编辑等)意味着监听修改的函数都会被调用。
【解决方案(前端)】
设置定时器,默认每过10秒调用一次storeChange函数来异步请求后端接口,这样可以减少请求次数,而且对于覆盖型(后面的修改会将前面的修改覆盖掉,实际上只保存后面的修改即可)的编辑,效果最好。
【解决方案(后端)】
这里就不具体讨论后端的解决方案了,大体思路就是缓存/消息队列等。本文只看前端解决方案。
【具体实现】
上述前端的解决方案并不完整,单纯使用定时器不能满足我们的需求,因为多次修改(10秒内)会产生多个定时器,因此需要设置一个cookie来记录是否被修改,如果被修改,清除上一次的定时器,重新计时。(提醒,使用cookie需要引入jquery对应的文件)
针对以上两个问题,修改后的代码如下:
//页面关闭时调用
$(window).unload(function()
{
storeChangeRealTime();
});
//页面刷新时调用
$(window).on('beforeunload', function(event) {
storeChangeRealTime();
});
//前端页面内容修改触发
var timerId = null;//记录定时器名称
function haveModified()
{
//做一些事情
$.cookie('projectlist_modify_flag', 1);//重新设置cookie,1表示:有修改
//定时器
clearTimeout(timerId);//清除之前的定时器(为了重新计时,否则会有多个定时器同时进行,传递多次数据)
timerId = setTimeout(storeChangeDelay, 10000);//设置定时器
}
function storeChangeDelay()
{
//做一些事情
$.ajax({
type:"POST",
dataType:"json",
data:{projectId:projectId,projectLists:arrProjectNodes},
url:'Project/Project/modifyProject',
success:function (data) {
if (data.errno == 0) {
$.cookie('projectlist_modify_flag', 0);//修改的内容已经保存,将该cookie置为0
} else {
console.log('there are some errors in project.js:storeChange ajax' + data.errno + ': ' + data.msg);
}
},
error:function (er) {
console.log('some error in project.js:storeChange ajax');
}
});
}
function storeChangeRealTime()
{
//做一些事情
$.ajax({
async:false,//这是与storeChangeDelay不同的地方,表示使用同步方式传输数据
type:"POST",
dataType:"json",
data:{projectId:projectId,projectLists:arrProjectNodes},
url:'Project/Project/modifyProject',
success:function (data) {
if (data.errno == 0) {
$.cookie('projectlist_modify_flag', 0);//修改的内容已经保存,将该cookie置为0
} else {
console.log('there are some errors in project.js:storeChange ajax' + data.errno + ': ' + data.msg);
}
},
error:function (er) {
console.log('some error in project.js:storeChange ajax');
}
});
}
代码是精简过的,只是提供个解决这类问题的思路。
PS:当然,这种方法还是有弊端的,比如在刷新页面时,由于使用的是ajax同步方式,因此数据量过大或连接慢的话,可能会造成卡顿、甚至假死。如有更好方法请告知,将不胜感激。
水平有限,欢迎指正~
如需转发,请注明出处,3q~
参考:
http://www.iteye.com/problems/63413
http://blog.csdn.net/andy1219111/article/details/6914942