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

145 阅读 0 评论 96 点赞

我是靠谱客的博主神勇日记本，这篇文章主要介绍学习设计模式——缓存模式(备忘录模式)学习设计模式——缓存模式(备忘录模式)，现在分享给大家，希望可以做个参考。

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

文章目录

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

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

原始代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * 获取数据
 * @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 () {
  //
})

采用缓存模式优化

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 缓存构造函数
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)
  })
})