原生JavaScript中如何存储事件处理器返回的数据并跨文件使用

下面提供几种无需依赖框架的纯JS方案，解决你在category.js的点击事件中获取筛选数据后，传递到script.js的data变量中的需求：

方法1：全局变量（简单直接） #

利用JS的全局作用域特性，将data声明为全局变量，两个文件共享这个变量。

修改script.js #

// 声明全局变量，初始化你的原始数据
let data = /* 你的原始完整数据集 */;

注意：确保script.js在category.js之前加载，保证全局变量先被创建。

修改category.js中的Handlecategoryclick函数 #

let Handlecategoryclick = (id) => {
    // 保留原有的分类项激活逻辑
    let allofCategoryItems = document.querySelectorAll(".category-item");
    allofCategoryItems.forEach(item => item.classList.remove('category-item-active'));
    allofCategoryItems.forEach(item => {
        if (item.getAttribute("id") === `category-item-${id}`) {
            item.classList.toggle("category-item-active");
        }
    });

    // 获取当前选中的分类名称
    let itemName = datacategory.filter(item => item.id === id).map(item => item.name)[0];
    
    // 筛选数据并直接更新全局的data变量
    if(itemName === "all"){
        data = /* 你的原始完整数据集 */;
    }else{
        data = /* 你的原始完整数据集 */.filter(item => item.category === itemName);
    }

    // 若需要更新UI，可在此调用script.js中对应的渲染函数
    // 例如：renderFilteredData(data);
}

方法2：自定义事件（解耦性更强） #

通过自定义DOM事件传递数据，避免全局变量带来的作用域污染，适合复杂场景。

在script.js中监听自定义事件 #

let data = /* 初始数据 */;

// 监听自定义事件，接收筛选后的数据
document.addEventListener('categoryFiltered', (event) => {
    data = event.detail.filteredData;
    // 数据更新后执行后续逻辑，比如重新渲染UI
    // renderFilteredData(data);
});

在category.js中触发自定义事件 #

let Handlecategoryclick = (id) => {
    // 保留原有的分类项激活逻辑
    let allofCategoryItems = document.querySelectorAll(".category-item");
    allofCategoryItems.forEach(item => item.classList.remove('category-item-active'));
    allofCategoryItems.forEach(item => {
        if (item.getAttribute("id") === `category-item-${id}`) {
            item.classList.toggle("category-item-active");
        }
    });

    // 获取当前选中的分类名称
    let itemName = datacategory.filter(item => item.id === id).map(item => item.name)[0];
    
    // 筛选数据
    let filteredData;
    if(itemName === "all"){
        filteredData = /* 你的原始完整数据集 */;
    }else{
        filteredData = /* 你的原始完整数据集 */.filter(item => item.category === itemName);
    }

    // 触发自定义事件，传递筛选后的数据
    document.dispatchEvent(new CustomEvent('categoryFiltered', {
        detail: { filteredData }
    }));
}

方法3：ES6模块（模块化方案） #

如果项目支持ES6模块，可以将共享数据封装在独立模块中，实现跨文件的数据同步。

创建dataModule.js #

// 导出一个包含数据的对象（引用类型，修改会在所有导入处同步）
export const sharedData = {
    value: /* 你的原始完整数据集 */
};

修改script.js #

// 导入共享数据模块
import { sharedData } from './dataModule.js';

// 后续直接使用sharedData.value即可获取最新筛选后的数据
// 例如：renderFilteredData(sharedData.value);

修改category.js #

// 导入共享数据模块
import { sharedData } from './dataModule.js';

let Handlecategoryclick = (id) => {
    // 保留原有的分类项激活逻辑
    let allofCategoryItems = document.querySelectorAll(".category-item");
    allofCategoryItems.forEach(item => item.classList.remove('category-item-active'));
    allofCategoryItems.forEach(item => {
        if (item.getAttribute("id") === `category-item-${id}`) {
            item.classList.toggle("category-item-active");
        }
    });

    // 获取当前选中的分类名称
    let itemName = datacategory.filter(item => item.id === id).map(item => item.name)[0];
    
    // 更新共享数据
    if(itemName === "all"){
        sharedData.value = /* 你的原始完整数据集 */;
    }else{
        sharedData.value = /* 你的原始完整数据集 */.filter(item => item.category === itemName);
    }
}

注意：需要在HTML的script标签中添加type="module"属性，例如：<script type="module" src="category.js"></script>

内容的提问来源于stack exchange，提问作者Amine Ladrani