【解决】jQuery $.getScript()方法缓存问题

今天在使用Kindeditor编辑器异步调用时发现的问题。Kindeditor使用JQ的$.getScript()方法重新载入核心文件创建编辑器。

$.getScript('__PUBLIC__/editor/kindeditor.js', function().......

由于需要多次调用到异步加载创建编辑器。打开FireBug网络面板发现，每次加载时都会重新载入JS文件，而不是直接调用浏览器缓存。

如图所示，这样自然影响到了程序的运行速度，同时也浪费了网站的服务器的流量。原因不用说了，看JS后面的随机数就知道了，这是我们最常用的避免浏览器缓存的办法。但在$.getScript中我们并没有使用任何产生随机数的函数啊。

"Be default, $.getScript() sets the cache setting to false." （http://api.jquery.com/jQuery.getScript/）

缓存响应：

默认情况下，$.getScript() 将缓存设置成 false。这种情况下，会在请求的 URL 后添加一个时间戳的请求参数，保证每次请求时，浏览器每次都会重新下载脚本。你可以重写这个功能，通过设置 $.ajaxSetup() 的 cache 属性:

$.ajaxSetup({
  cache: true
});

代码示例：

$.ajaxSetup({
	cache: true
});
$.getScript('__PUBLIC__/editor/kindeditor.js', function() {......})

这回你看到了什么？没有请求了，直接调用浏览器缓存了。

当然，你也可以重写函数来为 $.getScript() 添加缓存开关如下：

// add cache control to getScript method
(function($){
$.getScript = function(url, callback, cache) {
	$.ajax({type: 'GET', url: url, success: callback, dataType: 'script', ifModified: true, cache: cache});
};
})(jQuery);

你还可以定义一个 $.cachedScript() 方法，允许取得经过缓存的脚本：

jQuery.cachedScript = function(url, options) {

  // allow user to set any option except for dataType, cache, and url
  options = $.extend(options || {}, {
     dataType: "script",
     cache: true,
     url: url
  });

  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
   return jQuery.ajax(options);
};

// Usage 用法
$.cachedScript("ajax/test.js").done(function(script, textStatus) {
   console.log( textStatus );
});

 

【文章参考】：

 请问jQuery的ajax在getscript时如何去掉url后面的随机数?

 jQuery.getScript()

返回值:jqXHRjQuery.getScript(url, [success(script, textStatus, jqXHR)])

jQuery 中的 Ajax $.ajax() load() $.get() $.post() $.getJSON() $.getScript()

jQuery的Ajax缓存问题

为 $.getScript() 添加缓存开关