摘要:通过分析我觉得原因应该是这样的虽然我是按数组中定义的顺序去动态创建标签去加载对应的文件,但是由于文件的大小以及网络等因素,导致各个文件现在完成的次序并不完全等于请求的次序。
之前在写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
摘要:通过分析我觉得原因应该是这样的虽然我是按数组中定义的顺序去动态创建标签去加载对应的文件,但是由于文件的大小以及网络等因素,导致各个文件现在完成的次序并不完全等于请求的次序。 之前在写js代码时,想通过代码动态向html中插入一定数量的js文件,文件的依赖关系已经按顺序排好,关键代码大致如下: var jsFiles = [somepath/a.js,somepath/b.js,...]...
摘要:关于动静分离的描述,这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性,将其应用于数据请求相关的上,就可以达到脚本与数据并发加载的效果。 作者:莫冠钊 转载请注明出处,保留原文链接和作者信息 前言 当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述,这里推荐一篇不错的博文 网站静态化处理—动静分离策略。 本人是做前端的,之前有幸与一...
摘要:关于动静分离的描述,这里推荐一篇不错的博文网站静态化处理动静分离策略。这里的解决办法则是采用的属性,将其应用于数据请求相关的上,就可以达到脚本与数据并发加载的效果。 作者:莫冠钊 转载请注明出处,保留原文链接和作者信息 前言 当今许多大型网页应用尤其是SPA均采用了动静分离的策略。关于动静分离的描述,这里推荐一篇不错的博文 网站静态化处理—动静分离策略。 本人是做前端的,之前有幸与一...
阅读 752·2023-04-26 00:30
阅读 2645·2021-11-23 09:51
阅读 1009·2021-11-02 14:38
阅读 2515·2021-09-07 10:23
阅读 2199·2021-08-21 14:09
阅读 1232·2019-08-30 10:57
阅读 1572·2019-08-29 11:20
阅读 1099·2019-08-26 13:53