VUE自动检测版本更新_vue版本更新

fksdskjfzxklzk

于 2024-06-18 23:13:08 发布

阅读量167

点赞数 1

分类专栏：资料作者\/ 是vip1024c 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fksdskjfzxklzk/article/details/139785960

版权

资料作者\/ 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

是vip1024c

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <link rel=icon href=./favicon.ico> <meta name=viewport content="width=device-width,initial-scale=1">
  <script type=module crossorigin src=./assets/index.b3865953.js> </script> 
  <body>
    <div id=app></div><script src=./js/WsUtil.js type=text/javascript charset=utf-8></script>
  </body>
</html>

仔细观察返回数据不难发现script标签里的所对应的文件路径是./assets/index.b3865953.js 这是由于前端工程化会自动给文件带上文件指纹，只要这些文件有变动，那么这些文件指纹也就是hash值也会跟着变化，每隔一小段时间去分析页面中script元素的js，只要发现js路径有变化，说明这个系统是有所改动。

具体代码如下:

//请求首页，timestep是为了避免缓存数据

    //请求首页
    async function newScripts(){
      const html = await fetch('/?timestep='+ Date.now()).then((res)=>res.text());
      scriptReg.lastIndex = 0;//正则分析页面所有url地址
      let result = [];//保存分析数据到一个数组里
      let match;
      while((match=scriptReg.exec(html))){
        result.push(match.groups.src)
      }
      return result;//返回数组
    }

//数组里就记录了这一次请求首页在首页当中所有的js的获取地址

2.检查是否需要更新

首先调用newScripts拿到当前页所有js路径

代码如下：

  async function needUpdate(){
      const newScripts = await newScripts();//调用newScripts
      if(!lastSrcs){//如果之前没有保存页面js地址的话，进行一次保存，初始化并存下当前数据
          lastSrcs = newScripts;
          return false;
        }
        let result = false ;
        if(lastSrcs.length !== newScripts.length){
          result = true;
        }
        for(let i = 0;i<lastSrcs.length;i++){
          if(lastSrcs[i] !== newScripts[i]){
            result = true;
            break ;
          }
        }
      }
      lastSrcs = newScripts;
      return result;
    }

3.有则弹出

每隔两秒调用 needUpdate检查更新函数，判断是否有变化，有更新则提示用户刷新页面，然后在调用自身，不断的进行检查，从而达到提示更新的目的。

代码如下：

const timeData=2000;//检查间隔时间
function autRef(){
  setTimeout(async()=>{
    const willUp = await needUpdate();//调用检查更新函数
    if(willUp){
      const  result = confirm('数据更新点击确认刷新当前页')
    };
    if(result){
      location.reload();//刷新当前页
    }
    autRef();
  },timeData)
}

这里只做了个简单的弹窗，当然大家可以继续优化，可以写成任意自己想要的样子。

总结

web浏览器中的javascript

客户端javascript
在html里嵌入javascript
javascript程序的执行
兼容性和互用性
可访问性
安全性
客户端框架

window对象

计时器
浏览器定位和导航
浏览历史
浏览器和屏幕信息
对话框
错误处理
作为window对象属性的文档元素

fksdskjfzxklzk

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
VUE自动检测版本更新_vue版本更新

web浏览器中的javascript客户端javascript在html里嵌入javascriptjavascript程序的执行兼容性和互用性可访问性安全性客户端框架window对象计时器浏览器定位和导航浏览历史浏览器和屏幕信息对话框错误处理作为window对象属性的文档元素。
复制链接

扫一扫