项目需求：请求一个网站时，浏览器会缓存JS，导致每次更新网站的代码后，不会自动更新JS，甚至需要手动去清空浏览器的缓存，但是用户不可能每次都清空缓存，这就要求我们要解决JS缓存问题。（添加版本号即可）
如果是单纯的 Javascript 或者 JQuery 引用，可以与“https://www.jianshu.com/p/ac76cfb9fad2”一样解决问题。
但是我们项目用了 require.js，我们就需要解决 require.js 的缓存问题
1、定义一个变量，可以全局调用
因为我们项目是用CodeIgniter框架（简称CI框架），所以在项目的xxx/application/core/MY_Controller.php 添加 “$this ->twiggy ->set('version',"1.0")”，为了可以在页面全局调用。
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class MY_Controller extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->library('twiggy');
$twigConfig = $this ->twiggy ->getConfig();
$debug = $twigConfig['environment']['debug'];
//全局变量：seo优化文本
define("DOMAIN",$_SERVER['HTTP_HOST']);
define("KAIKE_DOMAIN",'http://localhost:8086', true);
$CI = &get_instance();
$CI ->load ->config('seoText');
$this ->twiggy ->set('seoText',$this->config->item('seoText'));
$CI ->load ->config('DomainName');
$this ->twiggy ->set('DomainName',$this->config->item('DomainName'));
$this ->twiggy ->set('context_path',$this->config->item('context_path'));
$this ->twiggy ->set('version',"1.0");//为了清空CSS、JS的缓存；每次上传代码，需要手动修改一次版本号，最好不要重复；从1.0开始
$this ->twiggy ->set('debug',$debug);
}
}
2、在 requirejs.config() 里面 使用全局变量 “urlArgs: "v={{ version }}"”
xxx/application/views/common/scriptsCommon.html
<meta name="fragment" content="!">
<script type="text/javascript" src="{{ context_path }}statics/lib/js/require.js"></script>
<script type="text/javascript">
(function (w) {
var libPath = '{{ context_path }}statics/lib/js/',appPath='{{ context_path }}statics/js/';
var options = {
urlArgs: "v={{ version }}",
baseUrl:appPath,
shim:{
bootstrap: ['jquery'],
jqueryuicustom : ['jquery']
},
paths:{
i18n: libPath+'i18n',
jquery:libPath+'jquery.2.1.1.min',
bootstrap: libPath+'bootstrap.min'
}
};
var jqueryDeps = [];
var maches = /(MSIE) (\d+)\.(\d+)/i.exec(navigator.userAgent.toLowerCase());
if (maches && maches[2]){
var mainVer = maches[2];
if (mainVer <= 8){
options.paths.jquery = libPath+'jquery.1.11.1.min';
jqueryDeps = ['excanvas','respond'];
}
if('ontouchstart' in document.documentElement) {
jqueryDeps.push('mobileCustom');
}
}
if (jqueryDeps.length > 0){
options.shim.jquery = jqueryDeps;
}
requirejs.config(options);
}(this));
3、在页面 引用 JS“{% include 'common/scriptsCommon.html' %}、{% include 'common/scriptsnew.html' %}”
其中“ {% include 'common/scriptsCommon.html' %}”最为关键，因为“{% include 'common/scriptsCommon.html' %}”里面有配置 页面需要引用的JS 和 版本号（版本号用于解决浏览器JS的缓存问题）
xxx/application/views/common/scriptsnew.html
{% include 'common/scriptsCommon.html' %}
<script type="text/javascript">
window.contextPath = "{{context_path}}";
(function (w) {
requirejs(['common/aceMain','cookie'], function (G) {
$(function () {
var options = {
locale : "zh-cn",
datetimeFormat : "yyyy-mm-dd hh:ii",
dateFormat : "yyyy-mm-dd",
timeFormat : "hh:ii",
thousands_sep : ",",
dec_point : ".",
contextPath : "{{context_path}}",
uploaderSocket : "http://www.pengbosoft.com:8081",
uploaderToken: "pbsoft"//此token在预览服务器的icov/db/mongdb/db_init.js中配置 -->可以用来控制上传服务器
}
G.start(options);
});
});
}(this));
</script>
xxx/application/views/home/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>首页</title>
{% include 'common/scriptsnew.html' %}
</head>
<body>
</body>
</html>
<script type="text/javascript">
require(['home/index'],function(p){
p.init();
});
</script>
4、效果图
图1
网友评论