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

前段时间看了阮一峰的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>

结果如下：

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

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

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

赞 (0)

相关推荐

  • jQuery的deferred对象使用详解

    jQuery的deferred对象使用详解

    这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了. 但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备jQuery使用经验的开发者.如果你想了解jQuery的基本用法,请阅读我编写的<jQuery设计思想>和<jQuery最佳实践>. 一.什么是deferred对象? 开发网站的过程中,

  • jQuery.extend 函数详解

    JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: 复制代码 代码如下: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: 复制代码 代码

  • jQuery之Deferred对象详解

    deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作.网页动画.web worker等等. jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象. Promises是什么 由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待.为

  • jQuery中的deferred对象和extend方法详解

    1 deferred对象 deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能 deferred对象的方法 (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变:接受参数时,作用为在参数对

  • jQuery Deferred和Promise创建响应式应用程序详细介绍

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首次亮相于 流行的 JavaScript 库 jQuery(已经是1.5版本的事情了). Deferred 提供了一个抽象的非阻塞的解决方案(如 Ajax 请求的响应),它创建一个 "promise" 对象,其目的是在未来某个时间点返回一个响应.如果您之前没有接触过 "promis

  • jQuery.extend()的实现方式详解及实例

    复制代码 代码如下: <script type="text/javascript" src="jquery-1.5.2.js"></script><script>obj1 = { a : 'a', b : 'b' };obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' }; $.extend(true, obj1, obj2); alert(obj1.x.xxx);  // 得

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • jQuery源码分析-05异步队列 Deferred 使用介绍

    5. 异步队列 Deferred 5.1 概述 异步队列是一个链式对象,增强对回调函数的管理和调用,用于处理异步任务. 异步队列有三种状态:初始化(unresolved),成功(resolved),失败(rejected). 执行哪些回调函数依赖于状态. 状态变为成功(resolved)或失败(rejected)后,将保持不变. 回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定. (本节中的 绑定 注册 增加 具有相同的含义) 5.2 关键方法 先看看jQuery. Deferre

  • jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j

  • jQuery $.extend()用法总结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. 复制代码 代码如下: <span style="font-size:18px;"><html> <head>

随机推荐