利用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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
提交表单时执行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
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
js hover 定时器(实例代码)
2013/11/12 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python列表的常用操作方法小结
2016/05/21 Python
深入了解Python数据类型之列表
2016/06/24 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
C语言编程练习
2012/04/02 面试题
C#和SQL Server的面试题
2016/08/12 面试题
比赛口号大全
2014/06/10 职场文书
园林系毕业生求职信
2014/06/23 职场文书
工作检讨书500字
2014/10/19 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年保育员工作总结
2014/12/02 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
学生会个人总结范文
2015/02/15 职场文书
面试通知邮件
2015/04/20 职场文书
办公室日常管理制度
2015/08/04 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电