时间戳

首页 > 解决方案 > 加载 JSON 文件模块化视图 javascript 方法

javascript - 加载 JSON 文件模块化视图 javascript 方法

问题描述

我正在尝试实现模块化视图方法以在我的 javascript 代码中调用 json 文件，但无法纠正该问题。我调用 json 文件的代码是一个单独的 js 文件，如下所示：

var fileConfigModule = (function () {

  var arData = {};

  function init() {
    loadJSON(function (json) {
      arData = json
    });
    return arData 
  }
  // Let's hide this function

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', './data.json', true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        arVals= callback(JSON.parse(xobj.responseText));
      }
    };
    xobj.send(null);
  }

  return {
    loadJSON: loadJSON,
    init: init
  }
})();

我想在我的主文件中使用这个模块来获取从文件中加载的json，比如aysnc。这使用了回调函数。

var arData = fileConfigModule.init();

请如果有人可以提供帮助，我在这里做错了什么。非常感谢

标签： javascriptjsonasynchronousmodular

解决方案

您正在调用异步函数，但期望返回值作为同步函数。

如下更新您的代码，

var fileConfigModule = (function () {

  function init(callback) {
    loadJSON(function (json) {
      callback(json);
    });
  }
  // Let's hide this function

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', './data.json', true);
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(JSON.parse(xobj.responseText));
      }
    };
    xobj.send();
  }

  return {
    loadJSON: loadJSON,
    init: init
  }
})();

并调用如下，

var arData = null;
fileConfigModule.init(function(data){
  arData = data;
});

我不知道你为什么要隐藏loadJSON功能。但我认为你应该直接使用loadJSON函数，而不是调用init函数。

打电话loadJSON，

var arData = null;
fileConfigModule.loadJSON(function(data){
  arData = data;
});

推荐阅读