编写JavaScript批量读取多个txt文件，实现内部网页版本号自动展示

针对原有单文件读取逻辑硬编码、无法批量复用的问题，我们可以把请求逻辑抽成独立通用函数，只需传入对应环境的版本文件路径和展示位置即可完成读取，完全适配现有静态页面的目录结构。

核心改造思路 #

把原有代码中硬编码的两个核心参数——版本文件路径、版本展示DOM节点——抽成函数入参，去掉固定的逻辑绑定，让同一段XHR请求逻辑可以被不同环境重复调用，不需要为每个环境单独写一套读取代码。

第一步：封装通用版本拉取函数 #

函数内置基础的异常兜底，避免读取失败时占位位空白，代码如下：

/**
 * 读取指定路径的版本文件并填充到目标位置
 * @param {string} versionTxtPath - 环境对应version.txt的相对路径
 * @param {HTMLElement} versionDisplayNode - 页面上预留的版本号展示DOM元素
 */
function fetchEnvVersion(versionTxtPath, versionDisplayNode) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) return;
        if (xhr.status === 200) {
            // 自动去除txt文件首尾的空行、多余空格
            versionDisplayNode.innerText = xhr.responseText.trim();
        } else {
            versionDisplayNode.innerText = "版本信息加载失败";
        }
    }
    xhr.open('GET', versionTxtPath);
    xhr.send();
}

第二步：页面环境条目适配 #

现有页面的每个环境条目保留原有安装包静态链接不变，只需在对应位置预留空的版本占位标签，在页面加载完成后调用一次通用函数即可：

1. 环境条目标签结构示例：

   <!-- 开发环境条目 -->
   <div class="env-item">
       <a href="./DevEnv/installer.exe">下载开发环境安装包</a>
       <p>当前发布版本：<span class="version-slot" id="dev-version"></span></p>
   </div>
   
   <!-- 测试环境条目 -->
   <div class="env-item">
       <a href="./TestEnv/installer.exe">下载测试环境安装包</a>
       <p>当前发布版本：<span class="version-slot" id="test-version"></span></p>
   </div>
   

2. 页面初始化时批量调用通用函数：

   // 等待DOM结构加载完成后执行版本拉取
   document.addEventListener('DOMContentLoaded', () => {
       // 传入对应环境的版本文件路径和对应的展示节点
       fetchEnvVersion("./DevEnv/version.txt", document.getElementById("dev-version"));
       fetchEnvVersion("./TestEnv/version.txt", document.getElementById("test-version"));
       // 后续新增环境条目时，只需在这里追加一行函数调用即可，无需重复编写XHR逻辑
   });
   

落地注意事项 #

• 所有资源均为同域静态资源，XHR读取不会触发跨域限制，只要网页和环境文件夹保持现有目录结构即可正常运行
• 原有安装包的静态链接完全不需要修改，和版本读取逻辑解耦，不会因为版本读取功能影响现有下载链接的可用性
• 代码中内置了文本trim处理，即使version.txt文件因为编辑操作带了多余空行、末尾空格，也不会影响版本号的最终展示效果

内容的提问来源于stack exchange，提问作者Kurt Schwob