Лучшая практика передачи серверных переменных в javascript?

Я пробовал 2 способа, которые работают, но не чувствую себя очень чистым.

Во-первых, нужно иметь встроенный javascript, который принимает переменную из шаблона вида, например:

var x = {{ myServersideVariable }};

(В моем случае я использую Jinja2, но то же самое применимо к шаблонам Django, Razor в .NET MVC3, Twig в PHP или к любому числу механизмов моделирования шаблонов).

Очевидно, что это нечистая часть об этом, что есть javascript на странице html, а не в отдельном файле.

Другой вариант, который я использовал, состоит в том, чтобы иметь скрытую область, заполненную сервером, а затем потребляемую на конце Javascript. Это кажется немного более чистым, но не полностью, и это также немного громоздко писать.

Есть ли лучшее решение или это мои самые лучшие варианты?

P.S.
Я знаю JSON, и на самом деле мне иногда приходится прибегать к первому решению, если мне нужно передать что-то другое, кроме примитивов. Таким образом, бонусные баллы за решение, которое поддерживает передачу объектов JSON без использования javascript на странице.

Ответ 1

Есть только два правильных способа ввода данных с сервера в javascript.

Вы либо показываете данные как службу. У вас может быть служба REST или все, что вам нравится, и затем запрашивать ее с помощью ajax для извлечения данных из нее.

Другой вариант - ввести данные в HTML. Вы хотите использовать JavaScript для постепенного улучшения вашей страницы. Так что данные уже должны существовать в HTML, и ваш JavaScript будет извлекать его из HTML.

Теперь, если вы собираетесь использовать тяжелое приложение JavaScript, которое не поддерживается без JavaScript, вы хотите, чтобы ваши данные были службой REST.

Вы не хотите вводить его в сериализованное скрытое поле, потому что тогда ваша разметка html не имеет семантики данных. Вы не хотите вводить его непосредственно в оператор var x = ..., потому что тогда вы компилируете свой JavaScript на лету. Это нарушает разделение проблем.

Ответ 2

Если данные, которые вы хотите сделать доступными для клиентского JavaScript, известны в то время, когда страница HTML запрашивается/сгенерирована и не будет изменяться до следующего запроса страницы, я бы не использовал AJAX, потому что очевидно, что приводит к дополнительному запросу: один для получения главной страницы, а затем другой непосредственно при загрузке, чтобы сделать запрос AJAX для данных. Это позволит снизить производительность и бесцельно усложнить как клиентский, так и серверный код.

Нет ничего плохого в создании одного или нескольких скрытых входов с данными и доступа к вашему JavaScript-коду. В зависимости от значений, которые вы хотите передать, может быть проще вводить значения непосредственно в переменные JS в разделе <script> на вашей странице, как и в примере, который вы даете, и лично я считаю, что это легче читать, чем скрытые входы, поскольку Раздел <script> будет занимать видное место в верхней части страницы, вместо того, чтобы иметь входы, которые где-то помещены где-то среди HTML, и это делает очевидным, что значения предназначены для использования вашим кодом на стороне клиента, а не просто отправлены обратно другие данные формы. Но в любом случае это не "нечисто".

Если вам нужно получить данные на стороне сервера на свой JavaScript в ответ на то, что пользователь сделал на странице после загрузки (нажав кнопку или что-то еще), или если вы хотите регулярно опроса сервера проверьте, изменились ли значения, затем вы хотите использовать AJAX.

EDIT: обратите внимание, что хотя вы можете динамически генерировать файлы JS script на сервере и, таким образом, постоянно сохранять свои динамические значения вне HTML-страницы, это не очень хорошо работает, потому что некоторые браузеры могут запутаться и продолжать использовать ранее кэшированной версии JS. Это произошло со старыми версиями IE.

Ответ 3

Используйте JSON, чтобы передавать переменные от сервера к клиенту, поскольку это очень популярный и хорошо поддерживаемый формат. PHP, Python, Java и - что самое главное - JavaScript справляется с этим очень хорошо. Вам не нужно заботиться о побеге персонажа и т.д.

// PHP Example

$vars = array(
    'a' => 'def',
    'c' => 'xyz',
    'e' => array(1, 34, 766, 844)
);

...

var variablesFromServer = <?php echo json_encode($vars) ?>;
// or using Twig
var variablesFromServer = {{ vars|json_encode }};

alert(variablesFromServer.e[2]); // output: 766

Он выглядит очень похожим на других языках.

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

Конечное использование - с точки зрения клиента - также очень просто:

<script src="..."></script>
<script src="..."></script>
<script src="..."></script>
<script>
    var variablesFromServer = ...;

    MyProject.setConfiguration(variablesFromServer.config);
    MyProject.setRuntimeVariables(variablesFromServer.runtime);
    MyProject.run();
</script>

Ответ 4

Одно из решений, о котором я только что подумал, - это файлы javascript, созданные сервером. Мне нравится это с чистого кода и разделение проблем, но это может убить любое кэширование браузера, поэтому оно будет зависеть от того, насколько важна производительность.