页面的js要根据用途不同,选择动态加载压缩后代码,还是源码。
而不管是哪种,在各个js有相互依赖关系的时候,我们都希望他们能够按照顺序加载,如果异步执行,必然会导致加载完成的顺序错乱而发生页面加载错误。
太长不看版:使用递归,在$.getScript()回调处,调用自身,以达到在完成一个js加载之后再加载下一个的目的
假设,我们有一个对象,用于存放各种js路径
var jslist = {
jslistDebug: [
'third_lib/js/bootstrap.min.js',
'third_lib/js/plugins/chosen/chosen.jquery.js',
'third_lib/js/plugins/metisMenu/jquery.metisMenu.js',
'third_lib/js/plugins/slimscroll/jquery.slimscroll.min.js',
],
jslistNormal: ['1.1.0/js/test.min.js','1.1.0/js/end.min.js'],
};
假设,这些js只要加载完成的顺序发生变化,页面就会加载失败。
为了使用$.getScript()这个本质上是ajax请求的方法,我们先原生JavaScript加载jquery
(function () {
var script = window.document.createElement('script');
var jslistNormal = [],
jslistDebug = [],
inter;
script.type = 'text/javascript';
script.src = befHref + 'third_lib/js/jquery-2.1.1.js';
document.getElementsByTagName('body')[0].appendChild(script);
inter = setInterval(function () {
if (typeof $ === 'function') {
loadjs();
clearInterval(inter);
}
}, 100);
})();
嗯,就是说,只要设定一个定时器去判断jquery是否加载完,然后再使用这个方法就好。
下一步,编写loadjs()方法。
function loadjs() {
var jslistNormal = [],
jslistDebug = [];
jslistNormal = window.jslist.jslistNormal;
jslistDebug = window.jslist.jslistDebug;
if (getQueryString('debug') == 1) {//调试模式
loadDebug(jslistDebug, 0);
} else {
loadNormal(jslistNormal, 0);
}
}
这个loadjs(),是去判断到底该用哪个js路径的,下一步,就是重点了
function loadNormal(jslistNormal, n) {
var length = jslistNormal.length;
var jsSrc = jslistNormal[n];
if (n < length) {
$.getScript(jsSrc, function () {
n++;
arguments.callee(jslistNormal, n);
})
}
}
这里用了递归,去遍历完整个list,因为是在$.getScript()的回调里,所以能够保证,在加载完一个js之后,才会加载另一个js。
至此,完成了串行动态加载js
END
网友评论