WEB前端娃steiny 2019-06-26
Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()
方法扩展缓存功能。
大多数的缓存场景是,希望将某个接口数据在一定时间段内缓存起来,缓存期内不再发起请求直接返回本地数据,过了这段时间再重新获取并更新缓存。
这就是“定时缓存”的典型使用场景,我们可以为$.ajax()
方法传入localCache: Number
开启定时缓存,Number是缓存秒毫秒数。定时缓存实际上是牺牲了数据实时性换取响应速度,使用中通过设置不同的缓存时长,可以匹配不同的业务场景,比如对于相对稳定的数据可以设置较长的缓存时间,而设置较短的缓存时间则可以起到请求“防抖”作用。
更多的时候我们希望接口能兼具实时性和响应速度,比如应用首屏的异步数据块,既要快又要新,虽然这种需求听起来很“不科学”,但我们确实可以通过“快照缓存”满足这个需求。
为$.ajax()
方法传入localCache: "snapshot"
可以开启快照缓存,此时每当接口成功请求后都会为数据建立一份“快照”,下次请求时接口会首先将最近的快照数据作为结果返回,供前端渲染界面,同时发送请求获取最新数据,新数据到达后会与快照做对比,如果与快照相同则缓存命中,如果与快照不同会更新快照,并将新数据返回,供前端更新界面。也就是说启用快照缓存的接口前端有可能得到两次返回结果,为了让前端能够区分出快照,对象格式的快照数据会自动增加一个snapshot=true
的属性。
插件本身会自动清理过期缓存;
对于不想继续使用缓存的接口可以为$.ajax()
方法传入localCache: false
清理当前接口的缓存并返回最新数据;
也可以调用$.ajaxCache.clear()
清理所有AJAX-Cache插件产生的缓存。
除了上述基本功能,AJAX-Cache还考虑到了极端情况下的请求并发问题,当某个接口在本地没有缓存或者缓存过期时发生了并发,AJAX-Cache会拦截并发请求,暂存请求回调,只向服务端发送一次请求,待拿到数据后再依次执行暂存的请求回调,从而真正起到减少网络资源占用的作用。
最后,Ajax-Cache奉行“约定优于配置”的理念,将主要功能都集中到一个localCache
配置上,使用简单,将对业务代码的侵入性降到最低,如果没有使用$.ajaxCache
全局方法的话,从页面中直接将Ajax-Cache插件移除业务代码也不会报错。
使用简单不代表功能简单,如果需要修改Ajax-Cache的全局配置,也可以通过$.ajaxCache.set(config[Object])
方法实现,目前有两个配置项:
官网:http://refined-x.com/AJAX-Cache/
Github:https://github.com/tower1229/AJAX-Cache
前端路上原创技术文章,转载请注明出处:http://refined-x.com/2018/03/07/AJAX-Cache/
对文章内容有任何疑问欢迎留言讨论,或者扫描下方二维码加入“前端路上-知识星球”付费提问。
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
本文实例讲述了php+ ajax 实现的写入数据库操作。分享给大家供大家参考,具体如下:。<input class="tel" type="text" placeholder="请输入您的手机号码&q