如何将JS文件函数中的全局变量值传递至另一JS文件的函数

嘿，我看你遇到了跨JS文件访问全局变量的问题，这在前端开发里挺常见的。你的gallery.js里定义了Nxml和NameXml两个全局变量，但XML.js的download函数没法正确获取它们的值，下面给你几个靠谱的解决办法：

有时候全局变量看似定义了，但可能因为JS文件加载顺序或者作用域的小问题，导致其他文件访问不到。你可以在gallery.js里把变量明确挂载到window对象上，这样整个页面的JS都能访问到：

// gallery.js 修改全局变量定义
window.Nxml = 0;
window.NameFile = []; // 存储所有图片名称的数组
window.NameXml = []; // 存储选中图片名称的数组

然后在XML.js的download函数里，通过window来访问这些变量：

function download(frm){
    "use strict";
    alert(window.Nxml);
    alert(window.NameXml);
    for(var j=0; j<window.Nxml; j++){
        var N= window.NameXml[j];
        var data=fromToXml(frm);
        console.log(data);
        // 生成对应名称的XML文件
        downloadData("text/xml",data, N+".xml");
    }
}

小提醒：一定要确保gallery.js在XML.js之前加载，这样window上的变量才会先被初始化好哦。

如果你的项目允许，把JS文件改成ES模块，通过导出导入来共享变量，这样既能避免全局污染，又能让依赖关系更清晰：

首先改造gallery.js，把需要共享的变量和函数导出：

// gallery.js 改为模块
export let Nxml = 0;
export let NameFile = [];
export let NameXml = [];

export function handleFiles() {
    "use strict";
    const inputElement = document.getElementById("input");
    const fileList = inputElement.files;
    for(let i = 0; i < fileList.length; i++){
        NameFile.push(fileList[i].name);
        // ... 你的其他代码
    }
}

export function imgClick(img) {
    if (img.className.indexOf('bordered') > -1) {
        img.className = img.className.replace('bordered', '').trim();
        Nxml -= 1;
        alert(Nxml);
        // 这里记得补充移除NameXml对应元素的代码哦
    } else {
        img.className += ' bordered';
        for(let i=0; i<NameFile.length;i++){
            if(`imageID${i}` === img.getAttribute("id")){
                Nxml += 1;
                NameXml.push(NameFile[i]);
                alert(NameFile[i]);// 选中文件的名称
                alert(Nxml);// 选中计数
            }
        }
    }
}

然后在XML.js里导入需要的变量：

// XML.js
import { Nxml, NameXml } from './gallery.js';

function download(frm){
    "use strict";
    alert(Nxml);
    alert(NameXml);
    for(let j=0; j<Nxml; j++){
        const N= NameXml[j];
        const data=fromToXml(frm);
        console.log(data);
        downloadData("text/xml",data, N+".xml");
    }
}

最后在HTML里引入这些脚本时，要加上type="module"：

<script type="module" src="gallery.js"></script>
<script type="module" src="XML.js"></script>

如果不想用全局变量或者模块，还有个更稳妥的办法：在调用download函数的时候，直接把Nxml和NameXml作为参数传进去，完全避免全局依赖：

比如在触发下载的按钮点击事件里，这样调用：

// 假设你的下载按钮id是downloadBtn
document.getElementById('downloadBtn').addEventListener('click', function() {
    const frm = document.getElementById('your-form-id'); // 替换成你的表单id
    download(frm, Nxml, NameXml);
});

然后修改XML.js里的download函数，接收这两个参数：

function download(frm, selectedCount, selectedImages){
    "use strict";
    alert(selectedCount);
    alert(selectedImages);
    for(let j=0; j<selectedCount; j++){
        const fileName = selectedImages[j];
        const data=fromToXml(frm);
        console.log(data);
        downloadData("text/xml",data, fileName+".xml");
    }
}

这种方式代码更健壮，也更容易维护，推荐在复杂项目里使用。

内容的提问来源于stack exchange，提问作者Luis Luis Maia Maia