加載JSON文件模塊化視圖JavaScript方法

Question

我正在嘗試實現一種模塊化視圖方法來在我的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
  }
})();

我想在我的主文件中使用此模塊來從類似aysnc的文件中加載json。 這使用回叫功能。

var arData = fileConfigModule.init(); 

如果有人可以提供幫助，請問我在這里做錯了什么。 非常感謝

Answer 1

您正在調用異步函數，但希望將返回值作為同步函數。

如下更新代碼，

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;
});