导入提供JSON数据的模块时,如何传参筛选所需数据?
解决大型资源按需加载的问题
你的思路完全找对方向了——把原本静态导出的常量改成可接收参数的函数,就能实现动态过滤资源的需求。原来的RESOURCES是立即执行函数,模块加载时就会把整个massive.json解析处理完成,根本没机会传入自定义条件;改成函数后,你就能在导入后根据不同测试场景灵活控制返回的资源内容。
优化后的实现方案
1. 重构resources.js的导出逻辑
我们可以把函数做的更灵活,比如支持排除多个资源,同时处理边界情况(比如找不到目标资源时避免报错):
// resources.js import DB from 'some/massive.json'; // 支持传入单个排除名称或名称数组,默认返回全部资源 export const getResources = (dataToExclude = []) => { const { dataA, dataB } = DB; let dataArray = [dataA, dataB].flatMap(data => data); // 统一处理单个值和数组的输入情况 const excludeList = Array.isArray(dataToExclude) ? dataToExclude : [dataToExclude]; // 用filter替代splice,避免直接修改原数组产生副作用 dataArray = dataArray.filter(item => !excludeList.includes(item.dataName)); return dataArray; };
2. 在业务/测试文件中按需调用
现在你可以根据当前场景,传入不同参数获取需要的资源:
// someOtherFile.js import { getResources } from 'path/to/resources.js'; // 场景1:获取全部资源 const allResources = getResources(); // 场景2:排除指定单个资源 const withoutNameA = getResources('NameA'); // 场景3:排除多个资源 const filteredResources = getResources(['NameA', 'NameB']);
额外注意点
- 这种方式仍会加载整个
massive.json到内存:因为ES模块的import是静态操作,模块加载时就会解析完整的JSON文件。如果想要真正实现“只加载部分JSON内容”,需要用Node.js的fs模块结合流式解析工具(比如jsonstream),但这在浏览器环境不适用,且测试场景下通常不需要这么复杂。 - 把导出命名为
getResources而非RESOURCES,更符合函数的语义,能让其他开发者一眼明白这是需要调用的方法,而非直接可用的常量。
内容的提问来源于stack exchange,提问作者Mike K
相关产品推荐
相关产品推荐

