原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

实现动态加载 js 文件是网页开发中常见的需求，可以用于按需加载某些功能模块，减轻网页初始加载时的压力。同时，当加载完成时，需要执行相应的回调函数，以便进行后续的操作。下面是实现原生 JavaScript 实现动态加载 js 文件并执行回调函数的完整攻略：

1. 原生JS实现动态加载js文件

我们可以通过创建一个 script 标签来实现动态加载 js 文件。以下是实现代码：

function loadScript(src, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;

  // 对于IE，我们需要在onreadystatechange和onload事件中分别处理
  script.onreadystatechange = function () {
    if (this.readyState === 'complete' || this.readyState === 'loaded') {
      callback();
    }
  }

  // 其他浏览器
  script.onload = function () {
    callback();
  }

  // 对于错误的情况，执行回调函数
  script.onerror = function() {
    console.error('load script error:', src);
    callback();
  }

  document.body.appendChild(script);
}

2. 动态加载多个 js 文件

如果我们需要加载多个 js 文件，我们可以通过以下代码实现：

function loadScripts(scripts, callback) {
  var counter = 0;
  var total = scripts.length;

  function onLoad() {
    counter++;
    if (counter === total) {
      callback();
    }
  }

  scripts.forEach(function (src) {
    loadScript(src, onLoad);
  });
}

以上代码中，我们定义了 loadScripts 方法，该方法接收一个包含多个 js 文件链接的数组 scripts 和一个回调函数 callback。它使用 forEach 方法循环遍历所有的 js 文件链接，每个文件都通过 loadScript 方法加载。在每次加载 js 文件成功时，我们会自增一个计数器，当计数器的值等于 js 文件的总数时，执行传入的回调函数。

示例

接下来，我们来演示以下两个实际的例子。

示例1：动态加载单个 js 文件

假设我们有一个名为 test.js 的 js 文件，它包含一个全局函数 test，我们可以通过以下代码动态加载该文件，并在加载完成后调用这个函数：

loadScript('test.js', function() {
  test();
});

示例2：动态加载多个 js 文件

假设我们需要在页面中加载 jQuery 和 bootstrap 的 js 文件，我们则可以通过以下代码进行动态加载：

loadScripts([
  'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js',
  'https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js'
], function() {
  // 这里是所有 js 文件都加载完成后要执行的回调函数
  $(document).ready(function() {
      console.log('jQuery & Bootstrap are loaded!');
  });
});

以上代码中，我们通过调用 loadScripts 方法来动态加载多个 js 文件，并在所有 js 文件加载完成后执行回调函数。在该例子中的回调函数中，我们使用 jQuery 来验证两个 js 文件都已经加载完成。如果没有加载成功，该回调函数将不会被执行。

补充说明：以上代码可以在浏览器控制台中运行。当 jQuery 和 bootstrap 的 js 文件加载完成后，控制台将输出“jQuery & Bootstrap are loaded!”。