Помощь Ajax Design / Refactoring при рендеринге нового контента - например, элементов списка и div - PullRequest
Новая
       30

Помощь Ajax Design / Refactoring при рендеринге нового контента - например, элементов списка и div

2 голосов
/ 12 декабря 2010

Я постоянно сталкиваюсь с этим запахом кода, где дублирую разметку, и я не совсем уверен, как это исправить.Вот типичный сценарий использования:

Допустим, мы хотели бы публиковать комментарии к какой-то статье.Под статьей мы видим кучу комментариев.Они добавляются с исходным запросом страницы и генерируются механизмом шаблонов (в моем случае Freemarker, но это может быть PHP или любой другой).

Теперь, когда пользователь добавляет комментарий, мы хотим создатьновый li элемент и добавить его в список комментариев текущей страницы.Допустим, это li содержит кучу таких вещей, как:

  1. Аватара пользователя
  2. Их имя
  3. Ссылка для перехода на его профильили отправьте им личное сообщение
  4. Текст, который они написали
  5. Дата написания комментария
  6. Некоторые ссылки / кнопки "изменить" и "удалить", если в данный момент вы вошли в систему.у пользователя есть разрешение на выполнение этих действий.

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

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

Так как же нам реорганизовать дублирование?Это вообще возможно, или мы просто миримся с этим?Какие лучшие практики используются для решения этой проблемы?

1 Ответ

1 голос
/ 12 декабря 2010

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

Два других решения, более чистых, чем описанный выше подход, но оба имеют свои проблемы:

  • Делать всена стороне клиента
  • Делать все на стороне сервера

Если вся генерация разметки выполняется на стороне клиента, то сервер действует более или менее как веб-служба, которая отправляет данные только во что бы то ни былоформаты подходит для приложения.JSON и XML в настоящее время являются действительно популярными форматами для большинства веб-сервисов.Клиент всегда генерирует необходимый HTML и JS.Если придерживаться этого подхода, граница между клиентом и сервером должна быть четко определена.Поскольку клиент имеет ограниченные знания о том, что происходит на сервере, это означает, что должны быть определены надлежащие коды ошибок.Управление состоянием станет более сложным, поскольку большинство / все взаимодействие с сервером будет происходить асинхронно.Пример добавления комментария с таким подходом может выглядеть следующим образом: 

$('#add-comment').click(function() {
    var comment = $('#comment-box').text();
    $.ajax('http://example.com/add', {
        success: function() {
            addCommentRow(comment);
        },
        ...
    });
});

function addCommentRow(comment) {
    var user = currentUser().name;

    var html = "<li><b>{user}</b> says {comment}</li>";
    html = html.replace("{user}", user).replace("{comment}", comment);

    var item = $('<li>').html(html);
    $('#comments').append(item);
}

Другой подход - делать все на стороне сервера.Всякий раз, когда происходит изменение, отправьте запрос на сервер и запросите обновленный вид.С быстрым бэкэндом, временем отклика менее секунды и правильными показателями сетевой активности приложение должно казаться очень отзывчивым, несмотря на все происходящее на сервере.Приведенный выше пример будет упрощен до: 

$('#add-comment').click(function() {
    $.ajax('http://example.com/add', {
        success: function(response) {
            $('#comments').html(response);
        },
        ...
    });
});

Хотя это кажется намного более понятным на стороне клиента, чем при предыдущем подходе, мы только что перенесли генерацию разметки на сервер.Однако, если приложение не очень AJAXy, как Google Maps, тогда с этим подходом будет проще работать.Опять же, вопрос заключается в том, насколько сложным является приложение, и, возможно, вам необходимо поддерживать состояние клиента на стороне, и в этом случае вы можете использовать предыдущий подход.

...