动态加载javascript文件时,如何让文件顺序执行

栏目: JavaScript · 发布时间: 5年前

内容简介:之前在写js代码时,想通过代码动态向html中插入一定数量的js文件,文件的依赖关系已经按顺序排好,关键代码大致如下:但是在代码执行的过程中,很高频率的报同一个错,大概的意思就是说:b.js在执行的时候引用的a.js中的方法不存在。错误出现的评率很高,但也不是100%出错。通过分析我觉得原因应该是这样的: 虽然我是按数组中定义的顺序去动态创建script标签去加载对应的js文件,但是由于文件的大小以及网络等因素,导致各个文件现在完成的次序并不完全等于请求的次序。比如上面的例子中,如果a.js文件比较大,下载

之前在写js代码时,想通过代码动态向html中插入一定数量的js文件,文件的依赖关系已经按顺序排好,关键代码大致如下:

var jsFiles = ['somepath/a.js','somepath/b.js',...];
var head = document.head;
jsFiles.forEach((file) => {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = file;
    head.appendChild(script);
});

但是在代码执行的过程中,很高频率的报同一个错,大概的意思就是说:b.js在执行的时候引用的a.js中的方法不存在。错误出现的评率很高,但也不是100%出错。

通过分析我觉得原因应该是这样的: 虽然我是按数组中定义的顺序去动态创建script标签去加载对应的js文件,但是由于文件的大小以及网络等因素,导致各个文件现在完成的次序并不完全等于请求的次序。比如上面的例子中,如果a.js文件比较大,下载的比b.js慢,这样当b.js下载完成并开始执行的时候,他所依赖的a.js中的变量或方法就会获取不到。

想到的解决方法就是,等前一个文件加载完毕之后再去加载下一个文件,大致代码如下:

function loadJsFiles(jsFiles) {
    return new Promise((resolve, reject) => {
        var load = function(i) {
            var file = jsFiles[i];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = function() {
                i++;
                if(i === jsFiles.length) {
                    resolve();
                } else {
                     load(i);
                }
            }
            script.src = file;
            head.appendChild(script);
        };
        load(0);
    });
    
}

上面的方法也可以改为链式的Promise调用或者回调嵌套,虽然最终解决了问题,但是有一个问题,文件从异步加载变成了同步加载,增加了的文件下载的时间,文件越多的时候影响越明显。所以正确的思路应该是异步加载文件,但是执行一个文件的时候需要等到它所依赖的文件加载完毕并首先执行,对于这个问题,大家可以借鉴第三方库如require.js, 或者es6中引入的模块化功能完美解决这些问题。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

淘宝十年产品事

淘宝十年产品事

苏杰 / 电子工业出版社 / 2013-10-15 / 55.00

产品经理发展到一定阶段,再要成长,光靠学习一些知识、技能已经不够,必须通过经典案例来学习,而本书,就提供了小到页面细节、大到平台架构的丰富案例。电商从业者,无法无视“淘宝”这个标杆的存在,本书可帮助大家做出更好的选择。愿意思考的人们,也可以从“淘宝”这个产品,或者说社会 现象、经济现象里,找到每天都能体会到的那些变化的原因,从而想得更明白,活得更通透。 本书细数淘宝成立十年来经历的重大变化,......一起来看看 《淘宝十年产品事》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换