Удобное решение для использования статических данных JSON

Question

Я разрабатываю простое слайд-шоу на JavaScript (jQuery). Я хотел использовать JSON для хранения некоторых статических параметров содержимого каждого слайда.

Поскольку мне нравится хранить свои данные отдельно от кода, нужно ли в любом случае, чтобы JavaScript оценивал файл .json?

• AJAX кажется немного излишним - ему просто нужно оценить его во время выполнения, ничего не динамично.
• Я мог бы иметь отдельный файл .js, в котором мои данные JSON хранятся в виде объекта, но это выглядит грязно.

Поэтому, прежде чем я воспользуюсь одним из вышеперечисленных решений, я просто хотел убедиться, что не было более чистого способа заставить JavaScript оценивать текстовый файл.

Answer 1

Что не так с отдельным файлом js для вашего объекта? Это должно где-то жить. Я согласен, что ajax излишний, но я не понимаю, почему вы считаете, что объект JavaScript в файле .js «грязный».

Answer 2

Оценить JSON очень просто:

var jsonString = "{'name': 'Joe', 'age': 36}";

var data = eval('(' + jsonString + ')');
data.name // 'Joe'
data.age  // 36

Самый простой способ сохранить эти данные - поместить их в <input type="hidden"> и затем прочитать их, используя document.getElementById('hiddenElementId').value.

---

Полная картина:

HTML

<input type="hidden" id="hiddenElementId" value="{'name': 'Joe', 'age': 36}" />

JS

function getData() {
     var jsonString = document.getElementById('hiddenElementId').value;
     var data = var data = eval('(' + jsonString + ')');
     return data;
}

На самом деле не обязательно быть элементом hidden - вы можете поместить его в атрибут на одном из изображений.

---

Другой вариант - вставить его в тег <script> под некоторым именем.

<script type="text/javascript">
    var data = {'name': 'Joe', 'age': 36};
</script>

Таким образом, data становится глобальной переменной (что мне не очень нравится) и может использоваться везде. Это простое решение, но немного грязное - я бы выбрал первое.

Answer 3

J-Query имеет функцию синтаксического анализа JSON, которая работает даже в IE.

$.parseJSON("{'json':'rules for data'}");

Наслаждайтесь ..

но только вопрос, как сделать это аккуратно, как:

FUNCTION_HOWTO({json:'test',p2:'part2'}) = {
    json:'test',
    p2:'part two'
}