跟着月影学javascript(三) | 青训营笔记

86 阅读3分钟

这是我参与「第五届青训营 」笔记创作活动的第12天

如何实现过期的localStorage数据

1. 惰性删除

它是指键值在过期时,不会马上被删除,而是等到下一次获取该键值对时,才会被检测到过期,才会被删除。

实现:存储数据时,存储的是一个对象,对象中包含了两个键值对,一个value保存需要存储的数据,另一个value保存存储时的时间,获取数据时,拿到数据设置时的时间,并与当前时间做对比,如果超出了过期时间,则删除该键值对

2. 定时删除

每隔一段时间,进行一次删除操作,并通过控制删除的间隔时间和删除个数来减少执行删除操作对CPU的长期占用,也可以减少因惰性删除带来的不能及时删除键值而导致的localStroage空间的浪费。

实现:定期遍历localStroage,获取设置了固定过期时间的键值对,将过期的键值对的键值对放入数组中,每隔固定时间删除数组中固定的个数,直至数组为空。

事件循环Event loop和宏任务和微任务

JS是一门单线程语言,任务分为了同步任务和异步任务两种。当JS解释器执行到异步任务时,会把异步任务放进任务队列中,待同步任务全部执行完毕后,再去检查微任务队列中是否有需要执行的认为,待微任务队列为空时,再从任务队列中依次取异步任务来执行。

异步任务又分为了宏任务和微任务,宏任务包括异步ajax、计时器和文件操作等等,微任务包括Promise.then(),promise.catch()和promise.finally等。

异步任务中宏任务先执行,宏任务执行完毕后,会去微任务队列查看是否有需要执行的微任务,如果没有,则直接进行下一个宏任务,如果有,则执行完所有的微任务后,再执行下一个宏任务,直到所有的宏任务执行完毕,这就是一个事件循环event loop。

es6的模块化

可以将一个大的并且包含多个功能的程序文件拆分成拥有具体代码功能的小文件,然后这些小文件可以轻松实现组合和相互引用

es6模块化的关键字有两个: export:用于规定模块的对外接口 import: 用于输入其他模块

expost有三种导出方式:

  1. 分别暴露,就是写多个export
  2. 统一暴露,它会暴露一个对象,对象里面有需要暴露的方法或变量
  3. 默认暴露,export defalt,默认暴露一个对象或者一个方法或者一个变量等等

import也有三种导入方式:

  1. 通用的引入方式,就是导入整个模块,然后再调用模块中的一些方法或者变量
  2. 解构赋值方式的导入
  3. 只针对默认暴露的导入