基于uni-app的缓存器
在前端开发应用程序中,性能一直都是被大家所重视的一点,然而判断一个应用程序的性能最直观的就是看页面打开的速度。其中提高页页面反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短页面请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 前端常用缓存技术在这里我就不再描述,下面基于Storage对其进行增强,采用Map 基本相同的api。 阅读以下内容时遇到不懂的,请先科普阮一峰老师的ECMAScript 6 入门 下面是基本代码,会在此基础上进行增强class MinCache {
// 将数据存储在本地缓存中指定的 name 中
set (name,data) {
try {
uni.setStorageSync(name,data)
} catch (e) {
console.log(e)
}
}
// 从本地缓存中获取指定 name 对应的内容
get (name) {
let data
try {
data = uni.getStorageSync(name)
} console.log(e)
}
return data
}
// 从本地缓存中移除指定 key
delete (name) {
try {
uni.removeStorageSync(name)
} // 返回一个布尔值,表示 name 是否在本地缓存之中
has (name) {
const value
try {
const res = uni.getStorageInfoSync()
value = res.keys.includes(name)
} return value
}
// 清理本地数据缓存
clear () {
try {
uni.clearStorageSync()
} console.log(e)
}
}
}
export default MinCache复制代码
我们知道缓存往往是有危害的,那么我们最好规定个时间来去除数据。class CacheCell {
constructor (data,timeout) {
this.data = data
// 设置超时时间,单位秒
this.timeout = timeout
// 对象创建时候的时间
this.createTime = Date.now()
}
}复制代码
使用了过期时间进行缓存的方式,已经可以满足绝大部分的业务场景。
除此之外,H5端还支持websql、indexedDB、sessionStorage;App端还支持SQLite、IO文件等本地存储方案。 我们可以看出来Storage在一些端中是有大小限制的,其实我们的数据只是想要缓存,不一定要持久化。 也就是说在应用程序生命周期内使用就行,而且直接操作Storage也不是很好。 我们知道ES6中有Map可以做缓存 下面代码时基于Map封装的let cacheMap = new Map()
let instance = null
let timeoutDefault = 1200
function isTimeout (name) {
const data = cacheMap.get(name)
true
if (data.timeout === 0) false
const currentTime = Date.now()
const overTime = (currentTime - 1000
data.timeout) {
cacheMap.delete(name)
true
}
false
}
data
this.timeout = timeout
this.createTime = Date.now()
}
}
Cache {
return cacheMap.set(name,cachecell)
}
return isTimeout(name) ? null : cacheMap.get(name).data
}
delete (name) {
return cacheMap.delete(name)
}
has (name) {
return !isTimeout(name)
}
clear () {
return cacheMap.clear()
}
setTimeoutDefault (num) {
if (timeoutDefault === 1200) {
return timeoutDefault = num
}
throw Error('缓存器只能设置一次默认过期时间')
}
}
ProxyCache {
constructor () {
return instance || (instance = new Cache())
}
}
export default ProxyCache复制代码
对Storage和Map封装的缓存进行整合我们来分析一下
)) {
try {
uni.removeStorageSync(name)
} catch (e) {
console.log(e)
}
}
constructor (data,51); font-weight: 700;">this.data = data
this.createTime = Date.now()
}
}
MinCache {
constructor (timeout) {
const res = uni.getStorageInfoSync()
res.keys.forEach(name => {
try {
const value = uni.getStorageSync(name)
cacheMap.set(name,value)
} catch (e) {
console.log(e)
}
})
} console.log(e)
}
timeoutDefault = timeout
}
set (name,data,timeout = timeoutDefault) {
const cachecell = new CacheCell(data,51); font-weight: 700;">let cache = try {
uni.setStorageSync(name,cachecell)
cache = cacheMap.set(name,cachecell)
} console.log(e)
}
} else {
cache = cacheMap.set(name,cachecell)
}
return cache
}
get (name) {
null : cacheMap.get(name).data
}
let value = false
try {
uni.removeStorageSync(name)
value = cacheMap.delete(name)
} else {
value = cacheMap.delete(name)
}
return value
}
has (name) {
try {
uni.clearStorageSync()
cacheMap.clear()
value = true
} return value
}
}
MinCache.install = function (Vue,{timeout = 1200} = {}) {
Vue.prototype.$cache = new MinCache(timeout)
}
|
// 注册缓存器
Vue.use(MinCache)
// 设置默认缓存时间
// Vue.use(MinCache,{timeout: 600})复制代码
this.$cache.set('name','MinCache')
// 过期时间设置为0表示不会过期
// 注意:'test'并不是以下划线命名表示在程序生命周期永久缓存
'test',0);">'testdemo',0)
// 注意:'_imgURL'是以下划线命名表示永久缓存到Storage
'_imgURL',0);">'data',0);">0)复制代码
)
this.name = 'name')
this.test = 'test')复制代码
具体使用方法可以参考 github
uni-app路由的封装
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!