利用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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
javaScript封装的各种写法
Aug 14 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 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中GET变量的使用
2006/10/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
python编写爬虫小程序
2015/05/14 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
keras slice layer 层实现方式
2020/06/11 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
C#面试常见问题
2013/02/25 面试题
大学生优秀自荐信范文
2014/02/25 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
党员转正意见怎么写
2015/06/03 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL