Создание HTML: на стороне сервера на стороне сервера и на стороне jQuery

Это вопрос дизайна. У меня есть данные, которые нужно переходить в таблицу HTML, которая позже будет управляться пользователем. В основном пользователь сможет выбирать элементы в строках таблицы.

У меня есть два варианта: в обоих случаях я использую AJAX для получения данных:

  1. Создайте HTML-код с помощью PHP на стороне сервера, отправьте его клиенту как HTML. Затем пользователь манипулирует таблицей, используя Javascript (jQuery, по существу).

  2. Отправьте необработанные данные клиенту с помощью JSON, затем используйте jQuery для создания HTML-кода и последующего манипулирования им пользователем.

С точки зрения дизайна / удобства кодирования / красоты, какой подход рекомендуется? Спасибо за понимание.

Зачем генерировать HTML в PHP:

  • JavaScript должен определять поведение, а не контент.
  • Для создания в JavaScript требуется больше разметки (многострочные строки не так просты, как в PHP).
  • Сложно поддерживать, если ваш HTML генерируется в нескольких местах (PHP и JS).
  • Вы могли бы использовать функции манипуляции JQuery DOM для создания своего HTML-кода, но вы стреляете в ногу в долгосрочной перспективе.
  • Быстро создавать HTML на сервере, чем в браузере (в вычислительном смысле).
  • С PHP проще прокручивать – легко создавать табличную разметку.
  • Вы сохраняете какую-то боевую готовность, если пользователь отключил JavaScript, если вы выведете разметку при загрузке страницы.

Зачем генерировать HTML в jQuery:

  • Вы бы сэкономили некоторую полосу пропускания.
  • Связывание событий может быть проще.

Итак, я выступаю за первый вариант, создавая HTML в PHP.


Визуальное сравнение двух методов, создание простой таблицы.

Вариант 1, используя PHP:

// PHP $html = '<table>'; foreach($data as $row) { $html .= '<tr>'; $html .= '<td><a href="#" class="button">Click!</a></td>'; $html .= '<td>'.$row['id'].'</td>'; $html .= '<td>'.$row['name'].'</td>'; $html .= '</tr>'; } $html .= '</table>'; echo $html; ?> // jQuery $('#container').load('handler.php', function() { $('#container a.button').click(function() { // Do something }); }); 

Вариант 2, используя jQuery:

 // PHP echo json_encode($data); // jQuery $.ajax({ url: 'handler.php', dataType: 'json', success: function(data) { var table = $('<table />'); var len = data.length; for(var i = 0; i < len; i++) { var row = $('<tr />'); var a = $('<a />').attr('href', '#').addClass('button'); row.append($('<td />').append(a)); row.append($('<td />').html(data[i].id); row.append($('<td />').html(data[i].name); table.append(row); } table.find('.button').click(function() { // Do something }); $('#container').html(table); } }); 

С точки зрения дизайна / удобства кодирования / красоты я бы определенно сказал, что вы используете PHP-подход.

Аналогичное обсуждение имело место в: Почему это плохая практика, чтобы вернуть сгенерированный HTML вместо JSON? Или это? с некоторыми хорошими моментами, не упомянутыми в этой теме.

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

В противном случае JSON обычно более распространен, поскольку он имеет тенденцию быть более компактным и позволяет создавать узлы и назначать им не-HTML-свойства, такие как обработчики событий.

Однако, если вы создаете новые узлы, создавая HTML-строку, вам нужно использовать HTML-кодирование, чтобы гарантировать, что любые < , & или кавычки будут экранированы правильно. В JavaScript нет встроенной функции, такой как htmlspecialchars в PHP; это довольно тривиально писать, но, похоже, никто не беспокоится. Результатом этого являются приложения jQuery, в которых полно сквозных дыр в области межсайтового скриптинга на стороне клиента, так же как мы начали делать некоторые шаги по исправлению серверных XSS-материалов.

Не менее убедительные аргументы, вероятно, могут быть сделаны для обоих, но вы, вероятно, будете отправлять меньше данных по трубе, если вы идете с 2.

Мне очень нравится идея объединить вещи на стороне клиента. Я нашел JavaScriptMVC хорошей платформой (версия 2.0 основана на jQuery) для этого, потому что у нее есть шаблоны просмотра на стороне клиента (хотя не всем нравится такой подход).

Только с помощью jQuery я нахожу довольно сложным создание представлений на стороне клиента (потому что это не то, для чего это предназначено), поэтому вам может быть лучше скомпоновать все вместе на стороне сервера на PHP, если вы можете поддерживать приложение одинаково динамичным сюда.

Оба варианта имеют плюсовые и отрицательные моменты, однако andras делает все возможное, чтобы указать, нужно ли индексировать / искать информацию. Я лично предпочел бы вариант 1, так как я считаю, что архитектура будет легче производить.