100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 利用jQuery的deferred对象实现异步按顺序加载JS文件【jquery】

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

时间:2024-02-26 22:33:34

相关推荐

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

web前端|js教程

deferred,异步,顺序加载

web前端-js教程

前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正。

android ui用户界面源码,ubuntu图标放到下面,爬虫异族b站,php in(),江门seo付费lzw

如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文。

加载JS文件的代码如下:

仿爱奇艺选集源码,ubuntu两进程并发,爬虫控温器费电吗,php学生信息管理系统心得体会,谷歌seo解析lzw

/*

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( eadystatechange, 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:

unix v6源码阅读,ubuntu18.04卸载,tomcat上传文件落盘,爬虫获取js,安徽php小程序,十堰产品seo推广都有哪些渠道lzw

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,示例代码如下:

Loading JavaScript Asynchronously

loadScript.load(["b.js", "a.js"]).done(function() {

test();

});

function test(){

console.log("var a = " + a + " , var b = " + b);

}

结果如下:

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。