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

Tangpj 发布于2019-08-23 14:43 / 2473人阅读

摘要：通过分析我觉得原因应该是这样的虽然我是按数组中定义的顺序去动态创建标签去加载对应的文件，但是由于文件的大小以及网络等因素，导致各个文件现在完成的次序并不完全等于请求的次序。

之前在写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中引入的模块化功能完美解决这些问题。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101030.html

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

摘要：通过分析我觉得原因应该是这样的虽然我是按数组中定义的顺序去动态创建标签去加载对应的文件，但是由于文件的大小以及网络等因素，导致各个文件现在完成的次序并不完全等于请求的次序。之前在写js代码时，想通过代码动态向html中插入一定数量的js文件，文件的依赖关系已经按顺序排好，关键代码大致如下： var jsFiles = [somepath/a.js,somepath/b.js,...]...

TwIStOy 2019-08-02 14:06 评论0 收藏0
动静分离的数据并发加载策略

摘要：关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性，将其应用于数据请求相关的上，就可以达到脚本与数据并发加载的效果。作者：莫冠钊转载请注明出处，保留原文链接和作者信息前言当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理—动静分离策略。本人是做前端的，之前有幸与一...

Object 2019-08-21 14:07 评论0 收藏0
动静分离的数据并发加载策略

摘要：关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性，将其应用于数据请求相关的上，就可以达到脚本与数据并发加载的效果。作者：莫冠钊转载请注明出处，保留原文链接和作者信息前言当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述，这里推荐一篇不错的博文网站静态化处理—动静分离策略。本人是做前端的，之前有幸与一...

MrZONT 2019-08-06 13:17 评论0 收藏0
webpack配置

摘要：配置无入口的在输出时的文件名称。配置发布到线上资源的前缀，为类型。则是用于配置这个异步插入的标签的值。配置以何种方式导出库。是字符串的枚举类型，支持以下配置。在为时，配置将没有意义。是可选配置项，类型需要是其中一个。 webpack配置查看所有文档页面：全栈开发，获取更多信息。原文链接：第2章配置，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。配置 Webpack...

Doyle 2019-08-22 17:27 评论0 收藏0