Cache.js

用于浏览器端的轻量级缓存接口，可为所有getter赋予缓存能力，能够显著改善远程数据的响应速度并大幅提升用户体验

有什么用？

基于B/S结构的web应用有大量需要远程加载的数据，无论是PC或App或其他平台都会频繁的看到转圈/长条/骨架等各式各样的loading提示。 一旦这些效果反复出现时就会严重影响用户体验。

Cache.js虽然为解决这些问题而设计，但与cache-interface并不相同，它目前还在草案阶段并且具有仅对request/response、仅工作在HTTPS下等限制，而Cache.js可对任何Data-Getter赋能。

使用场景

1. 对MIS类纯web应用中的配置/字典信息、（低频变动的）组织机构、人员信息等进行持久化缓存，并增加 刷新缓存 功能实现主动数据更新
2. 基于App/桌面/TV的混合应用，可实现全数据缓存，并在网络检测后主动更新点击数据
3. 对任何request数据或基于(request/大量)数据进行计算后的数据进行缓存，以解决网络波动、长时计算带来的UI卡顿

基本特性

• 可使用高阶函数方式实现 非侵入 的缓存扩展
• 支持持久化开关，可自动检测持久化数据并反序列化到内存
• 可通过指定key进行缓存更新
• 可一次性删除所有缓存，实现强制刷新

持久化使用localStorage接口，这限制了可缓存数据总容量。可以点击这里检测不同浏览器的实际限制

安装

npm i @holyhigh/cache.js

用法

/********** 接口文件 **********/
import {cacheable} from '@holyhigh/cache.js'
//1. 接口文件中定义的方法
function getAllUsers(){
    return new Promise((res,rej)=>{
        setTimeout(()=>res('ok'),1000)
    });
}
//2. 扩展缓存能力
let getUsersCache = cacheable(getAllUsers,{key:'all_users'})
//3. 导出接口
export {getUsersCache}

/********** 业务文件 **********/
const users = await getUsersCache()

API

import Cache,{cacheable} from '@holyhigh/cache.js'
//包装getter并返回包装后的异步函数
//key支持函数或字符串，使用函数可实现同一接口不同参数进行不同缓存；相同key对应的缓存数据会被覆盖;校验器用于检测是否对rs进行缓存，默认 !isNil
const cacheGetter = cacheable(getter:Function, key: ((params: any[]) => string|Promise<string>) | string, options?:{validator?:(rs: any) => boolean}): (...params: any[]) => Promise<any>

//开启持久化，默认false
Cache.persistence = true;
//设置全局缓存key前缀，默认'cache.js_'
Cache.keyPreffix = 'MyCache_'
//设置全局校验器，默认(rs) => !isNil(rs),
Cache.validator = isString

//更新指定key缓存数据
Cache.put(key: string, data: any)

//删除指定key缓存数据
Cache.del(key: string | RegExp)

//检测指定key缓存数据
Cache.has(key: string)

//获取指定key缓存数据
Cache.get(key: string)

//获取所有缓存数据map
Cache.getAll()

//删除所有缓存数据
Cache.delAll()

//cacheable别名
Cache.add

demo

见test/index.spec.ts