JavaScript设计格局
分类:业界快讯

1、模式定义

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

2、问题引入

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

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

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

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

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

// Page备忘录var Page = function() { // 缓存器 var cache = {}; return function { if (cache[page]) { // 1-如果缓存中存在指定页的数据,直接使用 showPage(page, cache[page]); fn && fn(); } else { // 2-如果缓存中不存在指定页的数据,则从服务端获取,并将其缓存下来 $.post('server_api_url', {page: page}, function { 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, function() { $news.data('page', page+1); });});// 事件:上一页$('#pre_page_btn').click(function() { // 获取新闻列表容器 var $news = $('#news_content'); // 获取当前页号 var page = $news.data; Page(page, function() { $news.data('page', page-1); });});

4、小结

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

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

END 2019-03-22

本文由六和开奖现场发布于业界快讯,转载请注明出处:JavaScript设计格局

上一篇:没有了 下一篇:运行特定单元测试类的方法
猜你喜欢
热门排行
精彩图文