PHPCMS V9 css js版本控制的二次开发

引言

“网站在改版后，大批用户反映看到的页面出现错乱的情况，也有不少用户表示他们对这次的改版非常满意。不同的用户竟然看到了不同的效果……”

上面的情形，相信不少同仁都遇到过，在不同PC上看到的网页效果不同。怎么解决这样的问题呢？这就需要做好静态资源的版本控制。

原理

我们先来分析一下出现这个问题的原因：

用户在浏览器浏览某个网页，浏览器在加载网页中包含的各个资源（JS、css）时，先会判断缓存中是否已经包含了此资源（当然这与Header中定义的Cache-Control有关，静态资源很少有设置成不缓存的，我这里默认它们都是可缓存），如果包含，就不去服务器获取了。

比如改版时更改了样式表：main.css，浏览过网站的用户，缓存里面还存在着main.css，浏览器都会“自作聪明”地使用缓存中的版本，自然看到的和我们期望的效果不一样了。

 

解决方案

如果要让浏览器的缓存更新，就需要改变此资源的URL (统一资源定位符 Uniform Resource Locator)。改变URL不意味着文件需要改名，只需要在文件名后面增加一个后缀参数，比如：“main.css?version=yyyyMMddv”，虽然定位到的资源仍然是main.css，但如果version的值不同，浏览器会认为是不同的资源。同理，对于JS、图片来说，也是如此。

也就是说，我们每次对静态资源有更改，只需对其URL做相应更改，所有的用户就能够获取到最新的资源。

我们再来分析一下这个URL：
main.css?version=yyyyMMddv

main.css	资源的位置
version	可随意定义，这里的v代表“version”
yyyyMMddv	可随意定义，这里用“年 + 月 + 日 + 当天修订版本”，这样的URL可读性比较强。也有用随机字符串代表的

新的问题

在解决了上述问题后，我们可能又会遇到新的难题：如果某个CSS或者JS被上百个页面所引用，每个引用的URL又不尽相同，结果是用户看到的同样的样式定义，在页面A和页面B的效果是不一样的。如何能统一，又能有效控制所有页面引用资源的URL呢？

基于phpcms V9二次开发的具体处理办法:

修改的文件如下：
phpcms/modules/admin/setting.php中：
搜索：

$setconfig = pc_base::load_config(‘system’);下面增加
$setversion = pc_base::load_config(‘concat_version’);//load版本信息

extract($setconfig);下面增加
extract($setversion);

set_config($_POST['setconfig']);下面增加
set_config($_POST['setversion'],’concat_version’);//保存版本信息
phpcms/modules/admin/functions/global.func.php

42行js_path后面增加

‘,’js_version’,’css_version
phpcms/modules/admin/templates/setting.tpl.php
搜索
SwapTab(‘setting’,’on’,”,5,<?php echo $_GET['tab'] ? $_GET['tab'] : ’1′?>);
改为
SwapTab(‘setting’,’on’,”,6,<?php echo $_GET['tab'] ? $_GET['tab'] : ’1′?>);

然后tab部分改为

<li id="tab_setting_1" class="on" οnclick="SwapTab('setting','on','',6,1);"><?php echo L('setting_basic_cfg')?></li>
<li id="tab_setting_2" οnclick="SwapTab('setting','on','',6,2);"><?php echo L('setting_safe_cfg')?></li>
<li id="tab_setting_3" οnclick="SwapTab('setting','on','',6,3);"><?php echo L('setting_sso_cfg')?></li>
<li id="tab_setting_4" οnclick="SwapTab('setting','on','',6,4);"><?php echo L('setting_mail_cfg')?></li>
<li id="tab_setting_5" οnclick="SwapTab('setting','on','',6,5);"><?php echo L('setting_connect')?></li>
<li id="tab_setting_6" οnclick="SwapTab('setting','on','',6,6);"><?php echo L('setting_version')?></li>

搜索

<div class=”bk15″></div>
在上面增加

<div id="div_setting_6" class="contentList pad-10 hidden">
<table width="100%"  class="table_form">
  <tr>
    <th><?php echo L('js_version')?></th>
    <td class="y-bg">
 <input type="text" class="input-text" name="setversion[js_version]" id="js_version" size="20" value="<?php echo $js_version ?>"/> 日期格式：20140501
 </td>
  </tr>
  <tr>
    <th><?php echo L('css_version')?></th>
    <td class="y-bg">
 <input type="text" class="input-text" name="setversion[css_version]" id="css_version" size="20" value="<?php echo $css_version ?>"/> 日期格式：20140501
 </td>
  </tr> 
  </table>
</div>

phpcms/base.php

define(‘CSS_PATH’,pc_base::load_config(‘system’,’css_path’));下面增加

//js版本控制
define(‘JS_VERSION’,pc_base::load_config(‘concat_version’,’js_version’));
//css版本控制
define(‘CSS_VERSION’,pc_base::load_config(‘concat_version’,’css_version’));

phpcms/languages/zh-cn/admin.lang.php

增加语言包：

//版本控制
$LANG['setting_version'] = ‘版本控制’;
$LANG['css_version'] = ‘css版本’;
$LANG['js_version'] = ‘js版本’;

最后一步，在caches/configs/里新建一个名为concat_version.php的文件，内容如下：

<?php
return array(
'js_version' => '20140226', //js版本号
'css_version' => '20140226', //css版本号
);
?>

调用方式：

main.css?version={CSS_VERSION}

main.js?version={JS_VERSION}

本文版权来自古汉台的沉醉不归路所有。