您的位置：首页 > 其它

设计模式知识连载（34）---备忘录模式:

2017-12-28 21:14 387 查看

<body>

<h3>设计模式知识连载（34）---备忘录模式:</h3>
<p>
在不破坏对象的封装性的前提下，在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态。
</p>

<hr>
<div>
<div>
<ul>
<li>1111111111111111111111</li>
</ul>
</div>
<div>
<span id = 'pre_page'>上一页</span>
<span id = 'next_page'>下一页</span>
</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

/**
*   案例一：新闻展示，方式一：初始
*/
// 下一页按钮点击事件
$('#next_page').on('click', function() {
// 获取新闻内容元素
var $news = $('#news_content') ;
// 获取新闻内容元素当前页数据
var page = $news.data('page') ;
// 获取并显示新闻
getPageDate(page, function() {
// 修正新闻内容元素当前页面数据
$news.data('page', page + 1) ;
}) ;
}) ;
// 上一夜按钮点击事件
$('#pre_page').on('click', function() {
// 显示上一页
}) ;
/***
*   请求某一页新闻
*   参数page ：当前页
*   参数fn : 成功回调函数
****/
function getPageDate(page, fn) {
// post请求数据
$.post('./data/getNewsData.php', {
// 数据：页面
page : page
}, function(res) {
if(res.errNo == 0) {
// 显示当前页
showPage(page, res.data) ;
fn && fn() ;
}
}) ;
}
// 显示某页逻辑
function showPage(page, data) {
console.log('执行了showPage()方法') ;
} ;

/**
*   案例一：新闻展示，方式二：新闻缓存器
*/
// Page备忘录类
var Page = (function() {
// 信息缓存对象
var cache = {} ;
/***
*   主函数
*   参数 page     页码
*   参数 fn   成功回调函数
****/
return function(page, fn) {
// 判断该页数据是否在缓存中
if(cache[page]) {
// 恢复到该页状态，显示该页内容
showPage(page, cache[page]) ;
// 执行成功回调函数
fn && fn() ;
}else {
// 若缓存Cache中无该页数据
$.post('./data/getNewsData.php', {
// 请求携带数据page页码
page : page
}, function(res) {
// 成功返回
if(res.errNo == 0) {
// 显示该页数据
showPage(page, res.data) ;
// 将该页数据种入缓存中
cache[page] = res.data ;
// 执行回成功回调函数
fn && fn() ;
}else {
// 处理异常
}
}) ;
}
}
})() ;

// 单元测试
// 下一页按钮点击事件
$('#next_page').on('click', function() {
// 获取新闻内容元素
var $news = $('#news_content') ;
// 获取新闻内容元素当前页数据
var page = $news.data('page') ;
// 获取并显示新闻
Page(page, function() {
// 修正新闻内容元素当前页数据
showPage('page', page + 1) ;
}) ;
}) ;
</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 设计模式备忘录模式

相关文章推荐

新的分享

章节导航