如何在纯JS中加载多个本地文件

在纯JS中加载多个本地文件，可以通过以下步骤实现：

创建一个包含多个文件路径的数组，表示要加载的本地文件。
使用JavaScript中的XMLHttpRequest对象或Fetch API来发送HTTP请求，获取本地文件的内容。
使用回调函数或Promise来处理异步加载的文件内容。
在回调函数或Promise的处理逻辑中，可以根据需要将文件内容插入到HTML页面中，或者进行其他操作。

下面是一个示例代码，演示如何在纯JS中加载多个本地文件：

// 定义要加载的本地文件路径数组
var fileUrls = [
  'file1.js',
  'file2.js',
  'file3.css',
  'file4.html'
];

// 定义一个计数器，用于记录已加载的文件数量
var loadedCount = 0;

// 定义一个回调函数，处理加载完成的文件内容
function handleFileContent(content) {
  // 在这里可以根据需要将文件内容插入到HTML页面中，或者进行其他操作
  console.log(content);

  // 增加已加载文件数量
  loadedCount++;

  // 判断是否所有文件都已加载完成
  if (loadedCount === fileUrls.length) {
    console.log('所有文件加载完成');
  }
}

// 遍历文件路径数组，逐个加载文件
fileUrls.forEach(function(url) {
  // 发送HTTP请求，获取文件内容
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 文件加载完成，调用回调函数处理文件内容
      handleFileContent(xhr.responseText);
    }
  };
  xhr.send();
});

在上述示例代码中，我们首先定义了一个包含多个文件路径的数组fileUrls，表示要加载的本地文件。然后使用forEach方法遍历文件路径数组，逐个发送HTTP请求，获取文件内容。在每个文件加载完成后，调用回调函数handleFileContent处理文件内容。在回调函数中，可以根据需要将文件内容插入到HTML页面中，或者进行其他操作。最后，通过一个计数器loadedCount来判断是否所有文件都已加载完成。

请注意，上述示例代码仅演示了如何在纯JS中加载多个本地文件，并未涉及具体的文件插入或其他操作。根据实际需求，你可以根据文件类型和加载顺序等因素，灵活地调整代码逻辑。