Общий подход к заполнению таблиц с ответом базы данных

Question

Я свободный веб-разработчик и всегда сталкиваюсь с одной и той же проблемой. Как заполнять таблицы или любые другие данные, которые извлекаются из базы данных и нуждаются в представлении графического интерфейса?

Варианты:

1. Сервер возвращает весь графический интерфейс и данные. С HTML-кодом, встроенным в него.
2. Сервер возвращает данные XML / JSON, и вы заполняете их внутренним JavaScript? то есть var gui = "<h1>" + data.title + "</h1">; $("myTitle").html(gui);
3. Сервер возвращает данные XML / JSON со встроенным шаблоном? {"title":"Hello!"..some other data....., {["<h1>%d</h1>], ["<a href='#'...]}"
4. Страница, которая делает запрос данных, содержит шаблон в скрытом DIV, заполняет данные?
5. Или каким-либо другим способом, о котором я мог бы не знать?

Answer 1

для меня - определенно вариант № 2.
сервер не должен знать точно, как на странице отображаются данные.
Вы можете рассматривать это как проблему «разделения проблем»: сервер занимается поиском запрошенных данных, и все.
тогда на стороне клиента лежит обязанность представлять данные так, как они захотят.

Если вы когда-нибудь хотели изменить способ представления данных, при использовании любого из других упомянутых вами подходов вам придется изменить свою логику на стороне сервера.

опция # 2 даже дает вам теоретическую возможность полностью изменить свой тип клиента (wpf / winform / любой клиент) без изменения серверной части.

p.s. как примечание стороны - проверьте jqgrid для действительно удивительного плагина стола.

Answer 2

Простой ответ: # 2.

Более сложный ответ: # 5

По сути, ваша презентация должна быть отделена от обработки на стороне сервера. Простые сценарии, в которых вы просто собираетесь сделать это отображение один раз, отослать обратно JSON и заполнить его на стороне клиента. Камнем преткновения является то, как я могу использовать эту логику отображения? Или, что если моя логика отображения зависит от возвращения JSON, а мой JavaScript становится грязным и грубым? Что, если я хочу вернуть одну из двух совершенно разных вещей и не хочу усложнять мой javascript?

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

Есть компромиссы! Не используйте это, когда:

1. Ваши данные и отображение прямо вперед
2. Вы используете этот предмет один раз
3. Ваши просматриваемые виды гигантские. Помните, вы передаете это по проводам. Циклически перебирая данные в JavaScript, построение ячеек может быть быстрее, чем одновременная передача всего текста таблицы.

Используйте эту технику рендеринга, когда:

1. Вы возвращаете очень изменчивый контент.
2. Логика отображения является сложной и переменной.
3. Ваша логика отображения зависит от некоторых данных, которые вы не хотите, чтобы клиент знал / заботился о них.

Итак, ваша цель № 1: отделить логику рендеринга от кода на стороне сервера. Никогда не помещайте свой HTML в код, но если вы можете, вы можете рассмотреть рендеринг фрагментов страницы и передачу вернуть весь HTML-код по проводам, позволяя серверу генерировать HTML, а не JavaScript.