利用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 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
微信小程序中button去除默认的边框实例代码
Aug 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
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
学习python的几条建议分享
2013/02/10 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
django中的setting最佳配置小结
2017/11/21 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
几个常见的软件测试问题
2016/09/07 面试题
班组长的岗位职责
2013/12/09 职场文书
初三政治教学反思
2014/01/30 职场文书
房产继承公证书
2014/04/09 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
公司借条范本
2015/05/25 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers