动态加载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中引入的模块化功能完美解决这些问题。


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

查看所有标签

猜你喜欢:

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

How to Build a Billion Dollar App

How to Build a Billion Dollar App

George Berkowski / Little, Brown Book Group / 2015-4-1 / USD 24.95

Apps have changed the way we communicate, shop, play, interact and travel and their phenomenal popularity has presented possibly the biggest business opportunity in history. In How to Build a Billi......一起来看看 《How to Build a Billion Dollar App》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器