【手撕设计模式】减少业务中冗余的请求——备忘录模式
备忘录模式——
//这里我使用的是vue框架,第一个参数当前页码,第二个参数是一页展示多少个数据 fetch: function(curPage,pageNum) { var self = this; Vue.http({ method: 'GET', url:'/api/......', params: { 'search': this.search, //搜索内容 'page': { current: curPage, //当前页数 limit: pageNum //每页展示项目数 } } }) .then( function(res){ //获取数据执行逻辑,渲染列表 } ) },
事实上,每次点击下一页(或上一页)向后台发送请求是非常影响服务器性能和用户体验的,所以为了减少客户端向后台发送重复且不必要的请求,我们可以尝试使用【备忘录模式】。
我们再通过【备忘录模式】来优化一下上述的代码。
data(){ return{ ...... cache:{},//声明一个缓存对象 } } fetch: function(curPage,pageNum) { var self = this; if(self.cache[curPage]){ //缓存对象中是否存在某次跳转的属性 //如果存在则使用缓存的内容 self.Lists = self.cache[curPage].data; //渲染列表 }else{ //如果不存在某次跳转的缓存对象则向后台发送请求 Vue.http({ method: 'GET', url:'/api/......', params: { 'search': self.search, 'page': { current: self.curPage, limit: self.pageNum } } }) .then( function(res){ //渲染列表并把这次请求的内容缓存在缓存独享中 self.Lists = res.data.data; self.cache[curPage] = res.data; } ) } },
当然,这仅仅是个最简单的例子,不过我们可以用这个思路来处理很多问题,对减少冗余的代码会起到非常好的作用。