使用jQuery异步加载 JavaScript脚本解决方案


Posted in Javascript onApril 20, 2014

JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。

如果你正在使用 jQuery,有一个内置的方法可以用来加载脚本。如果你想延迟加载插件或任何其他类型的脚本,都可以使用这种方法。下面给大家介绍如何使用它。

实现方法

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.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 }); 
});

在加载脚本的时候需要特别注意缓存问题!
Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
JavaScript与函数式编程解释
Apr 27 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript 闭包详解
Jul 02 Javascript
Move.js入门
Feb 08 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
js函数模拟显示桌面.scf程序示例
Apr 20 #Javascript
判断及设置浏览器全屏模式
Apr 20 #Javascript
js 实现浏览历史记录示例
Apr 20 #Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 #Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 #Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 #Javascript
jQuery响应enter键的实现思路
Apr 18 #Javascript
You might like
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python绘制股票移动均线的实例
2019/08/24 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
小学家长会邀请函
2014/01/23 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
前处理组长岗位职责
2014/03/01 职场文书
团队口号大全
2014/06/06 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2015年司法所工作总结
2015/04/27 职场文书