手撕设计模式减少业务中冗余的请求——备忘录模式

Posted 2020-10-15 手撕黄油

备忘录模式——

　　在不破坏对象封装性的前提下，在对象之外捕获并保存对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态；

 

相信大家在工作中一定会遇到这样的情况，在不同的页面或逻辑中多次发送相同的请求。举个常见的情景，在实现页面翻页的逻辑中，我们经常在点击下一页或者上一页的时候向后台发送相同的请求（请求的页码不同）；

 

//这里我使用的是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;
            }
          )
        }
      },

 

这样，已经跳转过的页面再次点击的话就不会向后台发送请求了。

当然，这仅仅是个最简单的例子，不过我们可以用这个思路来处理很多问题，对减少冗余的代码会起到非常好的作用。