Question

最近我一直在与leaflets合作，目前正在研究几个插件。

我见过的几个插件（包括Leaflet.markercluster）都使用json来绘制点，但是程序员没有使用实际的流或json文件，而是使用了一个javascript .js文件，其中使用json流设置了变量。因此，带有json数据的js文件看起来像这样：

var data = [
    {"loc":[41.575330,13.102411], "title":"aquamarine"},
    {"loc":[41.575730,13.002411], "title":"black"},
    {"loc":[41.807149,13.162994], "title":"blue"},
    {"loc":[41.507149,13.172994], "title":"chocolate"}
]

我一直在使用其他类型的javascript图表，其中大多数都读取和处理json流。

如果我创建返回json的服务，这些插件似乎将无法工作。

为什么不使用json而不是包含一个设置json流变量的js文件？

我不是JavaScript专家，但我发现生成json比其中包含json的javascript文件更容易。

Answer 1

您对概念有误。

1st。 JavaScript作为一种语言具有自己的语法，因此，如果您有一个将JSON对象作为参数接收并向其传递数字或字符串的函数，则当您尝试访问某些属性时，它将抛出错误。对于Ex。

function myjson (obj) {
    console.log(obj.prop)
}

myjson(34); //wrong
myjson("{prop: 123}") //wrong
myjson({prop: 123}) //Good, will print 123

现在，假设您有一些脚本，在HTML文件中建立了索引的许多.js文件，例如

<script src="/mycode.js"> </script>
<script src="/myapp.js"> </script>

您想要添加一些数据，例如为绘图点显示的数据；那么您必须以两种方式包括它，将其放入.js文件或通过AJAX调用从服务中获取。

如果将其添加到.js文件中，则可以直接从代码中访问它们，就像这样

var data = [
    {"loc":[41.575330,13.102411], "title":"aquamarine"},
    {"loc":[41.575730,13.002411], "title":"black"},
    {"loc":[41.807149,13.162994], "title":"blue"},
    {"loc":[41.507149,13.172994], "title":"chocolate"}
]

console.log(data)

如果将其放在.json文件文件中，则

/mydata.json

[
    {"loc":[41.575330,13.102411], "title":"aquamarine"},
    {"loc":[41.575730,13.002411], "title":"black"},
    {"loc":[41.807149,13.162994], "title":"blue"},
    {"loc":[41.507149,13.172994], "title":"chocolate"}
]

您必须自己获取并解析数据

fetch("/mydata.json").then(async data => {
    var myjson = await data.text();
    myjson = JSON.parse(myjson);
    console.log(myjson) //A Javascript object
    console.log(myjson[1]) //The first element
})

Answer 2

我喜欢@FernandoCarvajal's answer，但我会在其中添加更多背景信息：

JSON比JS更新（您可以将JSON视为JS的“衍生产品”，尽管现在它已与JS结合使用，并且与更多语言结合使用）。
在JSON广泛使用之前，在浏览器中加载外部数据的主要和最简单的方法就是您在插件演示中看到的技术：将数据分配给全局变量，您可以在下一个脚本中使用它。浏览器甚至可以跨域执行JS（除非您明确指定内容安全策略）。唯一的缺点是您必须事先同意全局变量名称。但是对于静态站点（例如您提到的插件演示中的GitHub页面），开发人员很容易就此约定达成共识。

在这个阶段，您应该了解，使用这种简单的技术已经可以满足插件静态演示的需要。它还避免了浏览器兼容性问题，与Leaflet广泛的浏览器兼容性保持一致。

随着更丰富的客户端/前端（通常是AJAX）的出现，我们可以摆脱全局变量名协议的问题，但现在我们可能会面临跨域的难题，如{{3}所指出的那样}。我们也开始遇到浏览器兼容性问题。
现在我们可以加载任何数据而无需事先约定静态名称，我们可以更大程度地利用后端提供的动态内容。
为解决跨域问题，并且在CORS广泛使用之前，我们开始使用JSONP：前端在其请求中指定同意的（回调）名称。但是实际上，我们只是回退到与第2点类似的技术，主要是增加了异步性。
现在有了CORS，我们可以更简单地使用AJAX /提取技术，并避免JSONP固有的安全性问题。我们还用更像JS的JSON代替了老式的XML。

没有什么可以阻止您用更现代的JSON消耗来代替第2点中的老派技术。如果要确保广泛的浏览器兼容性，请确保使用照顾它的库（例如jQuery等）。并且，如果您需要跨域，请确保启用CORS。

为什么在js文件中用json声明变量而不是读取json？

2 个答案: