本文介绍利用jQuery内置的getScript方法实现JavaScript脚本的异步加载。通过示例演示如何链式调用done和fail处理加载结果,并重点解析getScript自动添加时间戳导致无法缓存的问题,提供通过ajaxSetup或单独配置dataType为script来开启缓存的具体解决方案。
jQuery异步加载脚本概述
JavaScript加载器在Web开发中扮演着重要角色,目前curljs、LABjs和RequireJS等流行工具被广泛使用。尽管这些加载器功能强大,但在某些特定场景下,采用更简单的方案往往更为高效。
若项目基于jQuery开发,可利用其内置方法实现脚本的延迟加载,无论是插件还是其他类型脚本均可适用。下文将具体阐述该方法的实现步骤。
实现方法
getScript基础用法与链式调用
jQuery提供了getScript方法用于加载外部脚本,开发者可根据需求选择不同方式处理返回结果。基础用法如下所示:
代码如下:
jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {
/*
在脚本已载入并执行后,就可以做一些处理了
*/
}); getScript方法会返回一个jqXHR对象,因此可以通过链式调用来处理加载状态:
代码如下:
jQuery.getScript("/path/to/myscript.js")
.done(function() {
/* 执行成功后的处理 */
})
.fail(function() {
/* 执行失败后的处理 */
}); 插件延迟加载示例
该方法的典型应用场景是延迟加载插件,并在加载完成后立即调用:
代码如下:
jQuery.getScript("jquery.cookie.js")
.done(function() {
jQuery.cookie("cookie_name", "value", { expires: 7 });
}); 缓存问题与解决方案
若需加载多个脚本或处理文本、图像、CSS等不同类型文件,建议使用功能更全面的JavaScript加载器。但对于单纯的插件延迟加载需求,getScript已足够完美。
缓存问题
需注意,使用jQuery.getScript时,脚本URL后会自动附加时间戳以禁用缓存。若需启用缓存,应配置所有请求允许缓存:
代码如下:
jQuery.ajaxSetup({
cache: true
}); 若不希望全局覆盖AJAX请求的缓存设置,可单独使用jQuery.ajax方法并将dataType设为script,例如:
代码如下:
jQuery.ajax({
url: "jquery.cookie.js",
dataType: "script",
cache: true
}).done(function() {
jQuery.cookie("cookie_name", "value", { expires: 7 });
}); 在加载脚本时,务必注意缓存配置问题。