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

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

你的概念是错误的。

第一。 JavaScript 作为一种语言有它自己的语法，因此，如果您有一个函数接收 JSON 对象作为参数，并向它传递一个数字或字符串，那么当您尝试访问某些属性时，它会抛出错误。例如。

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