前端開發緩存問題的解決方案


在沒有使用vue angular react 三大流行框架去開發靜態的項目時,困擾我們最多的就是緩存問題,沒有三大框架的優勢之熱刷新功能,如何做到我們修改了我們引用的外部文件里的某些內容,回到頁面,刷新一下就能看到最新的效果或是樣式呢?說的直白點就是動態的給文件加版本號,在沒有接觸php我是不知道如何用js去控制,為了安全,前端不具有改寫文件的能力,我就想到了同樣可以嵌套html內容的php語言,作為一個前端,懂點后端語言真的沒壞事,不說廢話了,上代碼.

第一步:項目下面一定得有一個 控制版本的php文件,version.php,內容如下:

 1 <?php
 2 /**
 3  * 
 4  * @authors shufei
 5  * @date    2018-06-17 12:15:27
 6  * @version $ver strtotime(date('Y-m-d H:i:s'))
 7  */
 8 function AutoVersion( $file ) {
 9     $ver = strtotime(date('Y-m-d H:i:s')) ;
10     echo $file .'?t=' .$ver;
11 }

這個 AutoVersion 方法需要一個參數也是文件的file路徑 $file,版本號 $ver 賦值為實時的時間戳,當你項目的部分開發完成后可以設置 $ver為固定的一個值

第二步:將開發的html頁面改為php頁面,index.php

 1 <?php require_once "version.php";?>
 2 <!DOCTYPE html>  
 3 <html>  
 4 <head>  
 5     <meta charset="utf-8">  
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 7     <meta name="viewport" content="width=device-width, initial-scale=1">  
 8     <meta name="Generator" content="EditPlus®">  
 9     <meta name="Author" content="">  
10     <meta name="Keywords" content="">  
11     <meta name="Description" content="">
12     <title>Document</title>  
13     <link href="<?php AutoVersion('test.css'); ?>" rel="stylesheet" type="text/css" >  
14     <script src="<?php AutoVersion('test.js'); ?>"></script>
15 </link>  
16 </head>  
17 <body>  
18     <h1>Hello,world!</h1>  
19 </body> 
20 </html>
<?php require_once "version.php";?>表示依賴 version.php文件,因此 <?php AutoVersion('test.css'); ?>和<?php AutoVersion('test.js'); ?>都會被替換成原有的文件路徑
加版本號,如果 version.php 里的$ver是實時時間戳,那么test.js 或者 test.css文件里有任何修改,刷新一下都是最新的,沒有緩存顧慮,再也不用手動的去耗時耗力的操作每個文件夾了

如果你還想要熱刷新那種差不多的功能,哪就在你的開發頁面index.php里head里加上 <meta http-equiv="refresh" content="3"> ,頁面3秒自動刷新一次,同時文件也是最新的,css或js里的代碼
一旦被修改頁面自動刷新展示最新的頁面和效果,缺點嘛,你懂得,就是需要看dom結構,3秒一刷新,控制台element里看dom結構就重置了,是不是心想算了,還是不偷懶了,自己手動刷新一次又怎么了,不影響你
的美麗動容

個人摸索出來的方法,沒有接觸PHP,如有問題請留言

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM