学习设计模式——缓存模式(备忘录模式)

场景：有一个新闻列表数据的翻页功能，目前的实现方式是点击上下页翻页请求服务器数据渲染，如果多次点击，出现重复请求数据问题。可以采用缓存模式优化设计

原始代码

/**
 * 获取数据
 * @param {*} page 页数
 * @param {*} fn 回调函数
 */
var getPageData = function (page, fn) {
  $.post('data/getNewsData.php', {
    page: page
  }, function (res) {
    // 正常数据
    if (res.errNo == 0) {
      // 显示页面内容
      showPage(page, res.dta)
      fn && fn()
    } else {
      // 处理异常
    }
  })
}

// 页面渲染逻辑
var showPage = function (page, data) {
  // 渲染页面内容
}

// 下一页
$('#next_page').click(function () {
  // 新闻内容选择器对象
  var $news = $('#news_contents')
  // 当前页数
  var page = $news.data('page')
  // 获取数据方法
  getPageData(page, function () {
    $news.data('page', page + 1)
  })
})
// 上一页
$('#prev_page').click(function () {
  //
})

采用缓存模式优化

// 缓存构造函数
var Page = function () {
  // 数据缓存对象
  var cache = {}

  return function (page, fn) {
    // 有缓存数据则从缓存中取
    if (cache[page]) {
      showPage(page, cache[page])
      fn && fn()
    } else {
      // 没有缓存数据从服务器获取
      $.post('data/getNewsData.php', {
        page: page
      }, function (res) {
        // 正常数据
        if (res.errNo == 0) {
          showPage(page, res.dta)
          // 获取的数据缓存起来
          cache[page] = res.data
          fn && fn()
        } else {
          // 处理异常
        }
      })
    }
  }
}

// 使用，把Page替换原来的getPageData
$('#next_page').click(function() {
  var $news = $('#news_contents')
  var page = $news.data('page')
  Page(page, function() {
    $news.data('page', page + 1)
  })
})

这样就完成了缓存数据的优化。不过当数据量过大时，会导致消耗大量资源，降低系统性能，复用率地的数据缓存下来是不值得的。因此资源空间的限制是缓存模式的一大障碍。

最后

以上就是神勇日记本为你收集整理的学习设计模式——缓存模式(备忘录模式)学习设计模式——缓存模式(备忘录模式)的全部内容，希望文章能够帮你解决学习设计模式——缓存模式(备忘录模式)学习设计模式——缓存模式(备忘录模式)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。