《前端实战总结》之设计模式的应用——备忘录模式

时间 2019-11-16

标签前端实战总结设计模式应用备忘录繁體版

原文原文链接

概念介绍

备忘录模式简单的说就是在不破坏已有逻辑的前提下，将往后须要获取的数据在第一次保存下来以避免形成重复且低效的操做。该设计模式最主要的任务就是对现有数据或者状态作缓存，为未来某个时刻使用或者恢复作准备。javascript

应用场景

首先在javascript编程中，咱们的应用每每是经过浏览器端向服务器发送请求来获取数据的，而请求的过程当中每每会消耗必定的时间和流量，对重复性数据反复请求不只增长了服务端的压力，还会形成浏览器端对数据请求的等待进而影响用户体验。所以做为一个有逼格的程序员，有比较对这块性能作出优化。接下来举一些常见的应用场景。css

1. 分页时的数据缓存

好比咱们请求一个长列表，须要作分页，那么咱们每次切换分页都会从新请求一次，为了优化咱们能够将第一次的分页请求数据缓存，当下次再切换到这一页的时候咱们会先判断缓存对象中是否有该数据，若是有就直接走缓存，没有就发起请求，并将当前的数据存入对应页数的缓存中。前端

2. 内容懒加载时的缓存

为了提升页面首屏渲染时间，咱们每每会使用懒加载的方式，好比图片懒加载，内容数据懒加载，其原理和分页很像，好比在用户下拉时显示更多数据等，当用户切换页面后又切换回来时，咱们能够将以前请求的数据缓存，这样就不用再次请求一次了，除非用户手动刷新。vue

3. 网站换肤

网站换肤也是目前比较经常使用的功能之一，好比可视化的网站，各类建站网站，目前都在走所见即所得的路子，这样能够更近一步的提升用户体验，须要平凡的改动用户的界面风格和样式，还须要提供用户撤销的功能，那么利用备忘录模式就更好不过了，他能够在用户保存以后能够不请求后端接口的状况下拿到上一步的配置参数，对于高频操做来讲，这无疑大大提升了用户体验和网站性能。java

4. 其余

好比系统的公共配置，用户浏览记录的缓存，路由的缓存等等，均可以用备忘录模式来提升性能，最经常使用的就是vue-router，咱们可使用keep-alive来缓存路由，其实原理也是相似的，如此种种，了解了备忘录模式，你的网站就有了更近一步的优化空间。node

基本实现

综合以上的场景分析和讨论，咱们能够抽象出一个公共的缓存方法来处理不一样情景下的数据缓存。代码以下：webpack

const baseOperateController = function() {
    // 缓存对象
    const cache = {};
    // 基础函数
    return function(params, fn, cb) {
        // 判断是否在缓存下
        if(cache[params]) {
            // 从缓存中读取并传递给业务函数
            fn(cache[params])
        }else {
            // 没有缓存则将控制权转移给外部回调函数，并传递相应参数
            cb && cb(params).then((res => {
                cache[params] = res.data;
            })).catch(err => console.log(err))
        }
    }
}()

// 使用
baseOperateController(params, showView, asyncFn)
复制代码

最后

若是想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知识和实战，欢迎在公众号《趣谈前端》加入咱们一块儿学习讨论，共同探索前端的边界。css3