14

我有一些以 JSON 格式保存的 atlus 精灵表。我正在根据 BrowserQuest 的结构构建我的 atlus。他们的每个 JSON 文件如下所示：

{
    "id": "agent",
    "width": 24,
    "height": 24,
    "animations": {
        "idle_down": {
            "length": 2,
            "row": 0
        }
    },
    "offset_x": -4,
    "offset_y": -8
}

但我想知道，如果它只是一个原始对象文字，我什至如何访问每个 JSON 文件中的数据？

由于每个 JSON 文件都是一个对象文字，我可以想象访问它的唯一方法是将对象文字保存到一个变量中，例如

var agent = {
    "id": "agent",
    "width": 24,
    "height": 24,
    "animations": {
        "idle_down": {
            "length": 2,
            "row": 0
        }
    },
    "offset_x": -4,
    "offset_y": -8
};

我希望有一种简单的方法可以访问 JSON 文件。

而且因为每个单独的精灵表都有自己的 JSON 文件，所以我有大量的文件要加载。

加载如此大量的 JSON 文件的最佳方法是什么？我试图避免使用任何 JS 库。

4

3 回答 3

12

首先，回答您的问题：

但我想知道，如果它只是一个原始对象文字，我什至如何访问每个 JSON 文件中的数据？

JSON代表Java S cript O bject Notation ，因此与它是 JavaScript 对象的操作方式相同。

至于访问 JSON 文件，如果它是本地文件，您可以使用：

function doStuff(json){
    console.log(json);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(){
    doStuff(JSON.parse(this.responseText));
});
oReq.open("GET", "http://www.example.com/example.json");
oReq.send();

然后你可以doStuff用任何处理 JSON 的函数替换。

于 2016-01-01T17:36:49.023 回答
7

您可以使用XMLHttpObject。

看一看

function getJSONFile(url,callback) {   
  var req = new XMLHttpRequest();
  req.open('GET', url, true); 
  req.overrideMimeType("application/json");
  req.onreadystatechange = function () {
      if (req.readyState == 4 && req.status == "200") {
        callback(req.responseText);
      }
  };
req.send();  
}

像这样使用这个功能

getJSONFile('http://www.example.com/example.json', function(data){
  if(data)
    console.log('json data : ' + JSON.stringify(data));
})
于 2016-01-06T10:03:05.757 回答
2

您可以通过组合Promise并XMLHttpRequest并行加载多个 JSON 文件来实现这一点。

HTML5Rocks的这篇有趣的文章对下载控制和优化也有很大帮助，因为它全面而实用。

例如，使用get(url)函数（来自上面的文章，请参见下面的源代码）将 JSON 对象返回为Promise：

var names = [ "agent", "arrow", ... ]
var sprites = {}

var all = []
names.forEach( function ( n ) {
  //Request each individual sprite and get a Promise
  var p = get( n + ".json" )
              .then( JSON.parse ) //parse the JSON file
              .then ( function ( sprite ) {
                 //Record the sprite by name
                 sprites[n] = sprite 
                 //Display your sprite as soon as loaded here     
              } )
  //add the promise to an Array of all promises
  all.push( p )
} )

//wait for all the files to be loaded and parsed
Promise.all( all )
    .then( function () {
        //All the  JS sprites are loaded here
        //You can continue your processing
    } )

获取（网址）的来源：

这是来自 HTML5Rocks 的示例代码。它将 XMLHttpRequest 异步调用封装在Promise：

function get(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest()
    req.open( 'GET', url )
    req.onload = function() {
      if ( req.status == 200 ) 
        // Resolve the promise with the response text
        resolve(req.response)
      else
        // Otherwise reject with the status text
        reject( Error( req.statusText ) )
    }

    // Handle network errors
    req.onerror = function() {
      reject( Error( "Network Error" ) )
    }

    // Make the request
    req.send()
  } )
}
于 2016-01-08T16:43:22.163 回答