Вставьте блок данных JavaScript (JSON) в страницу HTML

Question

Мне нужно включить объект JavaScript (JSON) в мою HTML-страницу.
JSON отображается одновременно со страницей HTML, отображаемой на сервере.Данные не получены с помощью вызова AJAX.Я могу придумать два способа сделать это, и искать отзывы и рекомендации.
Каковы хорошие практики для передачи BLOB-объектов JavaScript (JSON) со страницей?

Вариант 1

HTML:

<script type='text/javascript'>
    var model = { <JSON> };
</script>

.js:

function doSomething() { <use this.model here> }

Вариант 2

HTML:

<script type='text/javascript'>
    loadModel({<JSON>});
</script>

.js (включено в начало файла html):

var model = null;
function loadModel(model) { this.model = model; }
function doSomething() { <use this.model here> }

Вариация Вместо включения JSON в HTML, JSON может храниться вотдельный файл .js.Любые комментарии по этому поводу?

Вариант 1 позволяет вам включать файл .js в любом месте, а включение его в нижней части страницы ускоряет его рендеринг (хорошо), но, поскольку JavaScript отображает модель на странице,это делает это спорным вопросом.Все еще не зависящий от расположения .js делает его менее подверженным ошибкам.
Также R # жалуется (разумно) на то, что модель не инициализирована.

Вариант 2 чувствует себя лучше (лучше инкапсулирует детали, например,), но .js должен быть включен до вызова loadModel.

Я видел и делал оба пути, но не заметил каких-либо существенных преимуществ одного способа перед другим.

Платформа сервера должна быть неактуальной, но это IIS 7.5 / ASP.NET MVC 3 / Razor

Answer 1

Было бы немного больше накладных расходов при втором варианте. Поскольку у вас есть накладные расходы на вызов функции и дополнительная переменная (ваш параметр), которая будет выделяться и освобождаться.

Как вы сказали, в обоих случаях мало преимуществ / недостатков.

Answer 2

Забудьте два ваших предложения - оба чрезвычайно уязвимы для XSS.НИКОГДА НЕ ОСТАВЛЯЙТЕ НЕПРАВИЛЬНЫЙ ТЕКСТ В ПИСАНИИ.

Вместо этого используйте рекомендацию owasp .

Вставьте свой (в кодировке HTML) JSON в DOM следующим образом:

<div id="init_data" hidden>
    <%= html_escape(data.to_json) %>
</div>

Затем прочитайте это на JavaScript так:

// external js file
var dataElement = document.getElementById('init_data');
// decode and parse the content of the div
var initData = JSON.parse(dataElement.textContent);

Answer 3

Можете ли вы использовать JQuery? Затем вы можете использовать событие готовности DOM вместо включения JavaScript в ваш HTML.

EDIT:

Хм, в этом случае вы можете включить JSON в скрытый элемент при создании страницы. Затем внутри события DOM ready вы можете прочитать и проанализировать его со страницы, используя jQuery.

Другой альтернативой может быть использование атрибутов данных HTML 5 и включение данных в один из них.

Если бы это был я, я бы просто использовал вызов ajax, так как он проще и кажется немного чище.