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

徐小夕 等级 614 0 0

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

概念介绍

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

应用场景

首先在javascript编程中,我们的应用往往是通过浏览器端向服务器发送请求来获取数据的,而请求的过程中往往会消耗一定的时间流量,对重复性数据反复请求不仅增加了服务端的压力,还会造成浏览器端对数据请求的等待进而影响用户体验。因此作为一个有逼格的程序员,有比较对这块性能做出优化。接下来举一些常见的应用场景。

1. 分页时的数据缓存

比如我们请求一个长列表,需要做分页,那么我们每次切换分页都会重新请求一次,为了优化我们可以将第一次的分页请求数据缓存,当下次再切换到这一页的时候我们会先判断缓存对象中是否有该数据,如果有就直接走缓存,没有就发起请求,并将当前的数据存入对应页数的缓存中。

2. 内容懒加载时的缓存

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

3. 网站换肤

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

4. 其他

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

基本实现

综合以上的场景分析和讨论,我们可以抽象出一个公共的缓存方法来处理不同情景下的数据缓存。代码如下:

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等前端知识和实战,欢迎在公众号《趣谈前端》加入我们一起学习讨论,共同探索前端的边界。

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

更多推荐

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
使用Intersection Observer API实现视频队列自动播放
前言 笔者利用空余时间研究了一下javascript的Intersection Observer API,发现其有很大的应用场景,比如图片或者内容的懒加载,视差动画等。笔者也在之前的文章中详细介绍了3种Observer(观察者)的用法,包括位置监听,dom变化监听以及窗口变化监听,它们有非常多的应用场景,所以很有必要研究明白, 感兴趣的可以读完本片文章之后学
Java乱码
1.Javascript传参乱码: 在浏览器端对要传递的中文参数进行编码处理.代码如下: xmlhttp.open("POST",url,true); //请求参数初始化 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //因为请求方式为PO
20155211 网络攻防技术 Exp08 Web基础
20155211 网络攻防技术 Exp08 Web基础 =========================== 实践内容 ---- 1. Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。 2. Web前端javascipt,理解JavaScript的基本功能,理解DOM。
20155211 网络攻防技术 Exp08 Web基础
20155211 网络攻防技术 Exp08 Web基础 =========================== 实践内容 ---- 1. Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。 2. Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Curl之Post Json
curl Post Json $ curl -i -X POST -H "'Content-type':'application/x-www-form-urlencoded', 'charset':'utf-8', 'Accept': 'text/plain'" -d 'json_data={"a":"aaa","b":"bbb","data
JavaScript——图片懒加载
前言 == 有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~ `github` | [https://github.com/wangyang0210/bky/tree/picLoadLazy](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fwan
Python 与 Javascript 之比较
最近由于工作的需要开始开发一些Python的东西,由于之前一直在使用Javascript,所以会不自觉的使用一些Javascript的概念,语法什么的,经常掉到坑里。我觉得对于从Javascript转到Python,有必要总结一下它们之间的差异。 ### **基本概念** [Python](https://www.oschina.net/action/G
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"
TCP、UDP、HTTP、HTTPS之前的区别
网络由下往上分为: 物理层--- 数据链路层--- 网络层 --  IP协议 传输层 --  TCP协议 会话层 -- 表示层和应用层 --  HTTP协议 ![](https://oscimg.oschina.net/oscnet/aeb8a94598094caf8c377e1277ba95948ea.png) 1、TCP/IP连接 TC
vue 路由 懒加载
原文链接: [vue 路由 懒加载](https://my.oschina.net/ahaoboy/blog/1618024) 路由懒加载 ===== 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的[异步组
vue 路由懒加载
原文链接: [vue 路由懒加载](https://my.oschina.net/ahaoboy/blog/1796979) 路由懒加载 ===== 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 结合 Vue 的[异步组件