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

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

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

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

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

Ответ 1

Зачем генерировать 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-подход.

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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