如何用纯JS替换引用本地数据变量的jQuery getJSON函数
替换实现方案
$.getJSON的本质是异步拉取外部JSON文件,解析完成后把数据传入回调函数执行业务逻辑。既然数据已经完整存在本地dataset变量中,完全不需要发起网络请求,直接复用原有业务逻辑即可,有两种常见实现方式:
同步执行(无特殊时序要求时首选)
直接把原getJSON回调内的所有代码挪到外层,将回调参数data替换为本地的dataset即可,原有业务逻辑不需要做任何修改。
原代码参考:
$.getJSON( "data/dataset.json", function( data ) { var mygeojson = { type: "FeatureCollection", features: [], }; var waypoints = [] var all_points=[] for (i = 0; i < data.length; i++) { var lng = data[i].lng; // 其余原有业务逻辑... } });
替换后的纯JS代码:
// 本地存储的数据集 const dataset = [{..}, {..},......] // 直接执行业务逻辑 var mygeojson = { type: "FeatureCollection", features: [], }; var waypoints = [] var all_points=[] for (i = 0; i < dataset.length; i++) { var lng = dataset[i].lng; // 其余原有业务逻辑和之前完全一致,不需要改动... }
异步模拟(需要兼容原有执行时序时使用)
如果你的原有代码依赖getJSON的异步执行特性(比如部分逻辑要求在回调执行前完成初始化),可以用原生API模拟异步行为,和原有时序保持一致,不需要引入jQuery:
const dataset = [{..}, {..},......] // 用微任务模拟异步回调,执行顺序和原$.getJSON基本一致 queueMicrotask(() => { var mygeojson = { type: "FeatureCollection", features: [], }; var waypoints = [] var all_points=[] for (i = 0; i < dataset.length; i++) { var lng = dataset[i].lng; // 其余原有业务逻辑... } });
提示:本地变量不存在网络请求失败的场景,原
$.getJSON挂载的错误处理逻辑可以直接移除。
内容的提问来源于stack exchange,提问作者Gangrel
相关产品推荐
相关产品推荐

