利用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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
JS日历 推荐
2006/12/03 Javascript
JS模拟多线程
2007/02/07 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
webstorm+vue初始化项目的方法
2018/10/18 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
工作自我评价怎么写
2014/01/29 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript