JSON数据岛

Here's a hacky thing, I called it JSON data island, referencing the XML data island, that MS came up with for their IE browser. The idea is to use a comment in your HTML that holds some data in JSON format. Then using DOM, you access the comment, eval()-uate it and there you go - you have the data as a Javascript object.

这是一个很棘手的事情，我称其为JSON数据岛，它引用了MS为其IE浏览器提供的XML数据岛。 这个想法是在HTML中使用注释，该注释包含JSON格式的一些数据。 然后使用DOM，访问注释，对eval()-uate进行注释，然后就可以了-将数据作为Javascript对象存储。

» Here's a little proof of concept.

»这里有一些概念证明。

What we have in the HTML is:

HTML中的内容是：

<div id="some-div"><!--
    {prop:'value', prop2:['value1','value2','value3']}
-->
    Some stuff in div
</div>

Then the JavaScript that will process the JSON data in the comment:

然后，将在注释中处理JSON数据JavaScript：

var island = document.getElementById('some-div').firstChild;
var the_data = eval('(' + island.data + ')');
alert(the_data.prop2);

In this case I added the comment island as the firstChild of some div, but it could be anywhere, as long as you know how to access it with DOM methods.

在这种情况下，我将注释岛添加为某个div的firstChild，但它可以在任何地方，只要您知道如何使用DOM方法访问它即可。

问答环节 (Q&A)

OK, why? Well, I need some data that comes from the database, so it needs some server-side processing before it appears in the JavaScript code.

好为什么好吧，我需要一些来自数据库的数据，因此在它出现在JavaScript代码中之前，需要一些服务器端处理。

Can't it simply be in an inline <script>? Inline scripts are bad, they mix behaviour (JS) with content (HTML). Also, imagine how your client runs some SEO tool that reports inline scripts in the content, the client goes: "You used an inline script!? Gimme my money back this instant!"

不能简单地放在内联<script>中吗？ 内联脚本很糟糕，它们将行为(JS)与内容(HTML)混合在一起。 另外，想象一下您的客户端如何运行一些SEO工具，该工具会报告内容中的内联脚本，客户端会说：“您使用了内嵌脚本！？给我这笔钱吧！”

In your external .js then? I'd like to have external .js simple, with no server-side scripting involved. I don't want to make my beautiful, big, long script appear as something like script.js.php

在您的外部.js中呢？ 我想使外部.js简单，不涉及服务器端脚本。 我不想让我美丽，大而长的脚本看起来像script.js.php之类的东西

One small additional little .js.php only for the data you need? Look, I said "no"! .js.php will require a new database connection, since it's a seperate request. Performance will suffer. In addition it's a new HTTP request and those are expensive.

一个小的额外的小.js.php仅用于您需要的数据吗？ 看，我说“不”！ .js.php将需要一个新的数据库连接，因为它是一个单独的请求。 性能会受到影响。 另外，这是一个新的HTTP请求，而且价格昂贵。

An AJAX request fired from your beloved clean external .js that will only return the JSON data you hacked into your island thing of yours? Same as above. New HTTP request, new DB connection.

从您钟爱的干净外部.js发出的AJAX请求将仅返回您入侵到您的岛上东西的JSON数据吗？ 同上。 新的HTTP请求，新的数据库连接。

OK then, I give up! It was about time!

好吧，我放弃！ 差不多是时候！

Thanks: to Phil Renaud for the inspirational idea of making conversational posts, his are hysterical.

谢谢：菲尔·雷诺( Phil Renaud)提出了发表谈话的鼓舞性想法，他歇斯底里。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/json-data-island/