JS：动态加载多个JS文件

马黑黑

Web页加载外部 .js 资源本来很容易：

方法一：<script src="JS文件地址"></script>
方法二：import * from 'JS地址'; // ES6模块

然而，一些场景并不支持上述方法或支持度不够理想。因此，动态加载JS文件成了解决问题的替代方法，本文在此前介绍的动态加载单个外部JS文件的基础上加以扩展，实现多个JS资源的动态加载。看代码和解释：

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
        if (callback) callback();
    };
    document.head.appendChild(script);
}

loadJs() 函数并无太多区别，仅在 onload 事件中加了一个 if 条件语句，检测调用者是否提供传参（回调函数），若有，则执行它。这是关键语句，试看调用方法：

loadJs('1.js', function() {
    loadJs('2.js', function() {
        loadJs('3.js', myFn);
    });
  });

function myFn() {
    console.log('第三个JS文件加载完毕');
}

上面的调用 loadJs() 函数代码中，第一步是加载 1.js 文件，同时传入一个匿名函数 function()，该匿名函数实际上是继续调用 loadJs() 函数加载第二个JS文件即 2.js——如果第一个JS文件加载成功的话；第二步加载第二个JS文件，同样传入一个匿名函数，该匿名函数加载第三个JS文件；第三步，加载第三个JS文件 3.js，传入 myFn() 函数（函数没有形参时可以不要方括号 ()）。myFn() 函数是JS文件都成功加载后的业务函数，这里 作为第三次调用外部JS文件后的回调函数，确保业务逻辑是在所有外部JS资源都成功加载后才开始投入工作进程——因为业务逻辑依赖第三方JS资源的支撑。

loadJs() 函数没有做出错处理，个人觉得也没有必要，毕竟层层调用加载函数本身就不能出错，任意一层加载出了问题，核心业务逻辑都无从施展，所加入的出错处理机制顶多方便查找到底是哪一个JS文件未能成功加载，而这个功能，浏览器自身的出错警告已经够明确了。

应用实例请查看 酬天问，