|
在没有使用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,如有问题请留言
| 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-5-11 16:04:32