在没有使用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,如有问题请留言
