本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!
大家好,我是大澈!
本文约 1100+ 字,整篇阅读约需 2 分钟。
今天分享一段优质 JS 代码片段,纯前端实现了版本自动更新检测。
老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!
// 保存旧的html代码字符串
let oldHtml;
// 从服务端获取最新的html代码
async function fetchHtml() {
// fetch('/index.html')获取的就是html文件,
// 再用text()转为字符串
// 加上时间戳避免缓存
return await fetch(`/index.html?timestamp=${+new Date()}`)
.then(res => res.text())
}
// 判断需不需要更新
async function needUpdate() {
const newHtml = await fetchHtml()
// 默认不需要更新
let result = false
if (oldHtml && oldHtml !== newHtml) {
// 有旧值,并且新旧值不同,才需要更新
result = true
}
// 没有旧值,或者新旧值一样,就无需更新
// 无论用户更不更新版本,都更新旧值,
// 这样当用户选择不更新时就不会再提示了
// 除非刷新页面
oldHtml = newHtml
return result
}
// 递归调用,3秒一次
function autoRefresh() {
setTimeout(async () => {
if (await needUpdate()) {
console.log('需要更新')
const res = confirm('有新版本,点击确定更新')
if (res) {
location.reload()
}
}
autoRefresh()
}, 3000)
}
autoRefresh()
分享原因
这段代码展示了一种实用的页面动态更新机制的实现方式。
不需要用户操作,且纯前端,就做到了实时检测更新。
通过巧妙地结合异步操作、缓存处理、版本比较以及递归定时任务,实现了从服务器获取最新 HTML 代码,并根据新旧版本差异,决定是否提示用户更新的功能。
代码解析
1. function fetchHtml()
fetchHtml 函数是一个异步函数,用于从服务器获取 /index.html 页面的 HTML 代码。
通过在 URL 中添加时间戳来避免浏览器缓存。
获取到响应后,使用 text() 方法将其转换为字符串并返回。
2. function needUpdate()
needUpdate 函数也是异步的,它首先调用 fetchHtml 函数获取新的 HTML 代码并存放在 newHtml 变量中。
默认设置更新结果为 false ,如果存在旧的 HTML 代码且新旧不同,则将结果设置为 true 。
无论是否更新,都会更新 oldHtml 的值。
最后返回是否需要更新的结果。
3. function autoRefresh()
autoRefresh 函数使用 setTimeout 实现每 3 秒执行一次的递归操作。
在每次执行时,先调用 needUpdate 函数判断是否需要更新,如果需要更新,弹出确认框询问用户是否更新,若用户确认则刷新页面。
然后再次调用自身实现递归定时检查。
4. 其它实现方案
第一种:使用websocket,有新版本时后端告诉前端,或者用SSE实时通知前端。
第二种:让后端写个接口,每次前端部署更新了,后端同步更新版本号,前端轮询拿到最新版本号,和本地旧版本号对比。