在写js代码之前,想通过代码动态插入一定数量的js文件到html中。文件的依赖关系已按顺序排列。关键代码大致如下:varjsFiles=['somepath/a.js','somepath/b.js',...];varhead=document.head;jsFiles.forEach((file)=>{varscript=document.createElement('script');script.type='text/javascript';script.src=file;head.appendChild(script);});但是在代码执行的过程中,非常频繁的报同样的错误,大概意思就是:b.js在执行过程中引用的a.js中的方法不存在。错误率很高,但也不是100%错误。通过分析,我认为原因应该是这样的:虽然我是按照数组中定义的顺序动态创建脚本标签来加载相应的js文件,但是由于文件大小和网络等因素,每个文件的顺序是完成不是现在。完全等于请求的顺序。比如上面的例子,如果a.js文件比较大,下载速度比b.js慢,所以b.js在下载执行的时候,会依赖a.js中的变量或者方法得不到。到达。想到的解决方案是等到上一个文件加载完毕后再加载下一个文件。大致代码如下:');script.type='text/javascript';script.onload=function(){i++;if(i===jsFiles.length){resolve();}else{load(i);}}脚本。src=file;head.appendChild(script);};load(0);});}上面的方法也可以改成chainPromiseCall或者callback嵌套,虽然最后解决了问题,但是有个问题就是文件从异步加载到同步加载,增加了文件下载的时间,而且文件越多,影响越明显。所以正确的思路应该是异步加载文件,但是在执行一个文件的时候,需要等到它所依赖的文件先被加载执行。对于这个问题,可以借鉴require.js等第三方库,或者es6中引入的模块优化功能,完美解决了这些问题。
