利用jQuery的deferred对象实现异步按顺序加载JS文件


Posted in Javascript onMarch 17, 2013

前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正。

如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文。
加载JS文件的代码如下:

/* 
Loading JavaScript Asynchronously 
loadScript.load(["a.js", "b.js"]); 
*/ 
var loadScript = (function() { 
var loadOne = function (url) { 
var dtd = $.Deferred(); 
var node = document.createElement('script'); 
node.type = "text/javascript"; 
var onload = function(){ 
dtd.resolve(); 
}; 
$(node).load(onload).bind('readystatechange', function(){ 
if (node.readyState == 'loaded'){ 
onload(); 
} 
}); 
document.getElementsByTagName('head')[0].appendChild(node); 
node.src = url; 
return dtd.promise(); 
}; 
var load = function(urls) { 
if(!$.isArray(urls)) { 
return load([urls]); 
} 
var ret = []; 
for (var i = 0; i < urls.length; i++) { 
ret[i] = loadOne(urls[i]); 
}; 
return $.when.apply($, ret); 
} 
return { 
load: load 
}; 
})();

代码比较简单,这里就不解释了,下面给个调用示例。

例如项目中有两个JS文件:a.js和b.js,代码如下:

a.js:

var a = "i am in a.js"; 
var b = "i am in a.js";

b.js:
var a = "i am in b.js"; 
var b = "i am in b.js";

如果我们想先载入b.js,后载入a.js,示例代码如下:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Loading JavaScript Asynchronously</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"type="text/javascript"></script> 
<script src="jls.js" type="text/javascript"></script> 
</head> 
<body> 
<script type="text/javascript"> 
loadScript.load(["b.js", "a.js"]).done(function() { 
test(); 
}); 
function test(){ 
console.log("var a = " + a + " , var b = " + b); 
} 
</script> 
</body> 
</html>

结果如下:

利用jQuery的deferred对象实现异步按顺序加载JS文件

这里我们可以看到,b.js中定义的变量被a.js中的覆盖了。

转到Elements面板,我们可以看到b.js和a.js被顺序地加到了head中:

利用jQuery的deferred对象实现异步按顺序加载JS文件

对此类问题,欢迎大家分享自己的方案。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jQuery 表格工具集
Apr 25 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
提交表单时执行func方法实现代码
Mar 17 #Javascript
javascript中this做事件参数相关问题解答
Mar 17 #Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 #Javascript
Javascript跨域请求的4种解决方式
Mar 17 #Javascript
两种方法实现文本框输入内容提示消失
Mar 17 #Javascript
js 自制滚动条的小例子
Mar 16 #Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
php json_encode奇怪问题说明
2011/09/27 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
js 幻灯片的实现
2011/12/06 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
javascript自执行函数
2017/02/10 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python 编程之twisted详解及简单实例
2017/01/28 Python
python把1变成01的步骤总结
2019/02/27 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
小学生秋游活动方案
2014/02/23 职场文书
人事专员岗位职责
2015/02/03 职场文书
2015新学期开学寄语
2015/02/26 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
python 实现的截屏工具
2021/05/08 Python