Vue實(shí)現(xiàn)自動(dòng)檢測(cè)及版本更新的方法是什么

發(fā)布時(shí)間：2023-03-31 14:24:40 來源：億速云閱讀：116 作者：iii 欄目：開發(fā)技術(shù)

這篇“Vue實(shí)現(xiàn)自動(dòng)檢測(cè)及版本更新的方法是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue實(shí)現(xiàn)自動(dòng)檢測(cè)及版本更新的方法是什么”文章吧。

一、思路

1，每隔一小段時(shí)間fetch請(qǐng)求一次服務(wù)器首頁數(shù)據(jù)，解析為純文本。

2，識(shí)別純文本里對(duì)應(yīng)script標(biāo)簽路徑文件指紋是否發(fā)生變動(dòng)

3，有變動(dòng)則彈框提示引導(dǎo)用戶進(jìn)行刷新操作

二、實(shí)現(xiàn)步驟

1.調(diào)用fetch拿到首頁的html并且轉(zhuǎn)為純文本格式

核心代碼：

fetch('/').then(res=>res.text()).then(res=>console.log(res))

返回結(jié)果

由于vue是單頁面，所以返回?cái)?shù)據(jù)一般都不多，一目了然如下：

<!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>

仔細(xì)觀察返回?cái)?shù)據(jù)不難發(fā)現(xiàn)script標(biāo)簽里的 <script type=module crossorigin src=./assets/index.b3865953.js> </script> 所對(duì)應(yīng)的文件路徑是./assets/index.b3865953.js 這是由于前端工程化會(huì)自動(dòng)給文件帶上文件指紋，只要這些文件有變動(dòng)，那么這些文件指紋也就是hash值也會(huì)跟著變化，每隔一小段時(shí)間去分析頁面中script元素的js，只要發(fā)現(xiàn)js路徑有變化，說明這個(gè)系統(tǒng)是有所改動(dòng)。

具體代碼如下:

//請(qǐng)求首頁，timestep是為了避免緩存數(shù)據(jù)

    //請(qǐng)求首頁
    async function newScripts(){
      const html = await fetch('/?timestep='+ Date.now()).then((res)=>res.text());
      scriptReg.lastIndex = 0;//正則分析頁面所有url地址
      let result = [];//保存分析數(shù)據(jù)到一個(gè)數(shù)組里
      let match;
      while((match=scriptReg.exec(html))){
        result.push(match.groups.src)
      }
      return result;//返回?cái)?shù)組
    }

//數(shù)組里就記錄了這一次請(qǐng)求首頁在首頁當(dāng)中所有的js的獲取地址

2.檢查是否需要更新

首先調(diào)用newScripts拿到當(dāng)前頁所有js路徑

代碼如下：

  async function needUpdate(){
      const newScripts = await newScripts();//調(diào)用newScripts
      if(!lastSrcs){//如果之前沒有保存頁面js地址的話，進(jìn)行一次保存，初始化并存下當(dāng)前數(shù)據(jù)
          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.有則彈出

每隔兩秒調(diào)用 needUpdate檢查更新函數(shù)，判斷是否有變化，有更新則提示用戶刷新頁面，然后在調(diào)用自身，不斷的進(jìn)行檢查，從而達(dá)到提示更新的目的。

代碼如下：

const timeData=2000;//檢查間隔時(shí)間
function autRef(){
  setTimeout(async()=>{
    const willUp = await needUpdate();//調(diào)用檢查更新函數(shù)
    if(willUp){
      const  result = confirm('數(shù)據(jù)更新點(diǎn)擊確認(rèn)刷新當(dāng)前頁')
    };
    if(result){
      location.reload();//刷新當(dāng)前頁
    }
    autRef();
  },timeData)
}

這里只做了個(gè)簡(jiǎn)單的彈窗，當(dāng)然大家可以繼續(xù)優(yōu)化，可以寫成任意自己想要的樣子。

以上就是關(guān)于“Vue實(shí)現(xiàn)自動(dòng)檢測(cè)及版本更新的方法是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

Vue實(shí)現(xiàn)自動(dòng)檢測(cè)及版本更新的方法是什么

一、思路

二、實(shí)現(xiàn)步驟

1.調(diào)用fetch拿到首頁的html并且轉(zhuǎn)為純文本格式

2.檢查是否需要更新

3.有則彈出

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、思路

二、實(shí)現(xiàn)步驟