JavaScript设计模式 | 24-备忘录模式

1、模式定义

备忘录模式，在不破坏对象封装性的前提下，在对象之外捕获并保存该对象的内部状态，以便日后在该对象使用时恢复到之前的某个状态。

2、问题引入

// 事件：下一页
$('#next_page_btn').click(function() {
  // 获取新闻列表容器
  var $news = $('#news_content');
  // 获取当前页号
  var page = $news.data('page');
  // 从服务端获取下一页的列表数据并显示
  getPageDataFromServer(page, function() {
    $news.data('page', page+1);
  })
});
// 事件：上一页
$('#pre_page_btn').click(function() {
  // 获取新闻列表容器
  var $news = $('#news_content');
  // 获取当前页号
  var page = $news.data('page');
  // 从服务端获取上一页的列表数据并显示
  getPageDataFromServer(page, function() {
    $news.data('page', page-1);
  });
});

这段代码即是我们常见的上一页、下一页的翻页功能。实现逻辑当然是没有问题的，但存在性能问题，尤其当在移动端时，当用户不断地切换上一页和下一页时，由于数据没有缓存，会不断地向服务端请求数据并渲染页面，从而导致糟糕的用户体验，并且给移动用户造成不必要的流量浪费。

事实上，我们可以使用备忘录模式来缓存已经请求过的数据，从而解决这个性能问题。当用户频繁切换上一页、下一页时，先从缓存中查找指定页的数据，如果不存在时再向服务端发起请求。如此便大大地提升了数据加载的速度，并且节省了用户的手机流量。

3、备忘录模式：新闻翻页缓存器

使用备忘录模式，定义一个新闻缓存器，用于把用户已经请求过的列表数据缓存起来，以供下次使用，以减少从服务端的频繁请求。代码实现如下：

// Page备忘录
var Page = function() {
  // 缓存器
  var cache = {};
  return function(page, fn) {
    if (cache[page]) {
      // 1-如果缓存中存在指定页的数据，直接使用
      showPage(page, cache[page]);
      fn && fn();
    } else {
      // 2-如果缓存中不存在指定页的数据，则从服务端获取，并将其缓存下来
      $.post('server_api_url', {page: page}, function(res) {
        if (res.success) {
          showPage(page, res.data);
          cache[page] = res.data;
          fn && fn();
        } else {
          // ajax error
        }
      });
    }
  }
}();

现在我们使用上述定义的新闻缓存器，来优化“上一页”“下一页”事件。在翻页事件中，我们先从缓存器中查询指定页的数据，若存在则直接读取并渲染页面；若不存在，则从服务端请求，并将其加入到缓存器中供下次使用。优化代码如下：

// 事件：下一页
$('#next_page_btn').click(function() {
  // 获取新闻列表容器
  var $news = $('#news_content');
  // 获取当前页号
  var page = $news.data('page');
  Page(page, function() {
    $news.data('page', page+1);
  });
});
// 事件：上一页
$('#pre_page_btn').click(function() {
  // 获取新闻列表容器
  var $news = $('#news_content');
  // 获取当前页号
  var page = $news.data('page');
  Page(page, function() {
    $news.data('page', page-1);
  });
});

4、小结

事实上，备忘录模式的应用是非常广泛的。比如当你打开页面中的换肤设置时，第一次打开时要向服务端请求若干数据，但是在第二次打开时就不需要再次请求了，我们只需要把第一次获取到的数据缓存下来即可。

再者，在MVC架构中，我们常常把数据缓存在 M 中，以供视图和控制器来使用。这些思想，都是基于备忘录模式来设计的。

---

END 2019-03-22