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

最新推荐文章于 2019-11-18 18:16:00 发布

宇智波幽助

最新推荐文章于 2019-11-18 18:16:00 发布

阅读量149

点赞数

分类专栏：设计模式文章标签：设计模式备忘录模式

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78926482

版权

设计模式专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<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>

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式知识连载（34）---备忘录模式:

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

扫一扫