Javascript 在网页上包含不引人注目信息的最佳方式

所以我写了一些脚本，在我的页面上建立了一个谷歌地图。这些脚本包含在我的页面的

中，并使用jQuery使用从页面上的地址列表生成的标记构建地图

---

但是，对于javascript正确放置标记所需的每个地址，我都有一些精确的坐标数据。这不是我想让用户在屏幕上看到的信息，那么将这些数据放入文档的“最佳做法”是什么呢？

如果用户看不到这些信息，它就不应该留在文档中。例如，数据可以保留在脚本区域中。但是，如果由于各种原因这是不可能的，您可以使用带有style=“display:none”的div来隐藏信息。

我的第一个想法是使用CSV或类似数据的隐藏输入。因为数据不是真正的秘密，只是不用于显示

 <input id="coordinates" type="hidden" value="123.2123.123:123,123,321;....." />

---

编辑：下面的回答提到了JSON，这将是一个更好的解决方案，与另一个回答中指出的使用多个隐藏输入相结合。

我不建议使用样式隐藏某些内容，它将在没有（或禁用）css支持的浏览器中显示，并且看起来很奇怪

您可以将其存储在javascript变量中，或者添加一个具有如下隐藏值的表单 （在未使用的表单中，以确保其有效性）：

---

您可以从javascript读取和更新这些内容。

Gareth，您可能需要在

除了紧凑性的好处外，它还获得了强大的服务器端支持，如果您决定将来使用HTTPRequest动态加载坐标，那么这样做将非常容易，而不必对现有脚本进行太多修改

JSON-JavaScript对象表示法实际上是序列化JavaScript对象的本地方式

这里有一些例子：

您甚至可以将所有地址信息存储在JSON中记录的JavaScript对象数组中，并在屏幕上动态构建列表。这将使您能够在“运行时”以任何需要的方式轻松地对地址进行排序、筛选和操作

另一种方法是用标记包含每个地址（一个简单的div即可），并为包含坐标的标记引入一个新属性：

<div id="addr1" coordinates="...">
    17 Coldwell Drive<br />
    Blue Mountain<br />
    BA93 1PF<br />
    United Kindom
</div>

如果愿意，可以将第二种方法与JSON（存储坐标对象）相结合，或者为每个坐标添加两个属性，或者保留逗号分隔的列表等

---

第二种方法也会很好地降低性能，并且对搜索机器人友好。

既然已经有了Jquery，为什么不直接对另一个页面/脚本进行AJAX调用以获取坐标数据呢？

想要获取坐标数据的人总是可以看到数据。试图隐藏它只会让那些不擅长的人慢下来。 我的建议是不要使用XHR，因为这对很多人来说很慢，而且总是会增加页面加载的时间，您应该尽量减少这一点。 使用数组

var myArray = new Array();  
myArray.push([1.000,1.000,"test1"]);  
myArray.push([2.000,2.000,"test2"]);  
myArray.push([3.000,3.000,"test3"]);  
for(i=0;i<myArray.length;i++){  
    yourGoogleMapsAPICall(myArray[i][0],myArray[i][1],myArray[i][2]);  
}  

var myArray=new Array（）；
myArray.push（[1.000,1.000，“test1”]）；
myArray.push（[2.000,2.000，“test2”]）；
myArray.push（[3.000,3.000，“test3”]）；
对于（i=0；i来说，将数据保存在Javascript或JSON中缺少了关于不引人注目的Javascript的要点当Javascript不存在时（理想情况下，CSS也不存在时）会优雅地降级。因此，应该将数据放在文档中，而不是放在Javascript中，以便用户可以看到它

此外，您应该在一个没有任何CSS的表或div结构中显示它。在这种情况下，表可能是表示此类数据的正确语义结构。您可以为那些有CSS但没有Javascript的人进一步设置表的样式。然后Javascript可以轻松解析数据并将其放入地图中，但是如果不支持Javascript，数据仍将显示

另一个好处是，搜索引擎等机器人和任何想编写第三方mashup的人都可以轻松地将其删除（如果你不想共享它，你可以看到这是一个缺点，但如果有人想要足够的数据，他们无论如何都会从页面上获取）它还将以简洁的形式提供给使用屏幕阅读器的视障用户

现在，您不希望在默认情况下使表可见，因此必须使用CSS将其隐藏。但是，如果用户有CSS但没有Javascript，该怎么办？那么您可能希望显示表…这就是优雅降级的意义所在。因此，您要做的是使表在CSS中可见（即不要显式隐藏它），然后运行一些Javascript在初始化时隐藏它：

document.getElementById("geodata").style.display = "none";

或某些特定于库的等效项，例如

$("geodata").hide()

唯一的问题是，如果在document.onload（）中运行此命令，该表将在几秒钟内可见。因此，在输出该表后立即将其包含在脚本标记中。在这种情况下，可以在HTML中包含脚本标记。如果这样做，请避免使用特定于库的代码，因为在计算内联脚本时库可能尚未加载

现在您已涵盖所有案例：
-JS和CSS-数据在地图中显示得很好
-没有JS，但是CSS数据很好地呈现在表中
-没有JS和CSS-原始HTML表中显示的数据
（另一种情况是，JS和no-CSS很少出现，如果您愿意，您可以处理它，但有点毫无意义）

您的Javascript代码也将是干净的，因为它解析的是一个整洁的数据结构。您可以在开发过程中轻松地检查表，看看它是否有正确的数据，以及映射是否正确地反映了该数据。
当然，但不管格式如何，嵌入到我的HTML中根据定义是很突出的，而不是严格意义上的我的问题你是说在这种情况下最好忽略不引人注目的地方吗？Gareth，你不需要嵌入地址和坐标的JSON定义
var myArray = new Array();  
myArray.push([1.000,1.000,"test1"]);  
myArray.push([2.000,2.000,"test2"]);  
myArray.push([3.000,3.000,"test3"]);  
for(i=0;i<myArray.length;i++){  
    yourGoogleMapsAPICall(myArray[i][0],myArray[i][1],myArray[i][2]);  
}  

document.getElementById("geodata").style.display = "none";

$("geodata").hide()