Используйте делегирование событий
Основной отличительной чертой AJAX сайтов является использование делегирования событий. Вы не должны считать, что элемент существует на странице (потому что возможно он был внесен через AJAX), вы никогда не должны пытаться напрямую назначить event listeners (действия) для элементов (кроме document.body). Вместо этого, лучшим решением является использования делегирования событий. Вот очень простой пример того, как нужно использовать делегирование с jQuery:
// Add event listener to the body because it is a constant jQuery("body").on("click", "a", function(event) { event.preventDefault(); // Trigger the XHR to load the page content // ... // Update the History with pushState // ... // Other tasks // ... }); Во время создания моего сайта, я писал свой код так, как будто ни одного из элементов, кроме <body> не существовало. В результате для реализации постраничной AJAX навигации у меня ушло менее 30 минут. Делегирование событий делает возможным AJAX подгрузку страниц.
Используйте Pub/Sub для сигнальных событий
От пер. — сигнальные события (Signal Events), например, клик по ссылке.
Реализация системы publish & subscribe даёт вашему приложению гораздо больше возможностей. Если вы не знакомы с pub/sub, представьте, как работает радио: радио вещает (publish) и не знает, кто это слушает. Слушатели могут слушать (subscribe), не имея никакого отношения к самой станции.
Я покажу пример с моего сайта, что бы объяснить почему и как вы бы могли использовать pub/sub. Для любой статьи я хочу первое, загрузить виджеты популярных социальных сетей, и второе, показать виджет рейтинга, что бы пользователи смогли оценить полезность статьи. В более статическом сайте, вы бы просто выполнили код для создания этих виджетов в DomContentLoaded. На сложном AJAX сайте эти функции возможно придется выполнять несколько раз, поэтому нам понадобится сигнал на изменение страницы, чтобы воссоздать эти виджеты.
// In the method where we do the AJAX request for new page content.... jQuery.ajax({ url: event.target.href }).done(function(data) { // Place the content in the page // ... // Send a pub/sub signal that the page is ready so that widgets can be created publish("/page/loaded", data); // Arguments are the channel name and data }); // ... Elsewhere, where the we set up the social widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createSocialWidgets(data); // Fade in the widgets // ... }); // ... Elsewhere, where the we set up the rating widgets.... subscribe("/page/loaded", function(data) { // Set up the widgets! createStarRatingWidget(data); // Fade in the widget // ... }); В pub/sub хорошо то, что наши JavaScript модули отделены от частей с AJAX и мы не должны иметь дело с массивными обратными вызовами. Один вызов publish и мы позволяем любому модулю подписаться (subscribe) и реагировать на это событие!
Используйте единый pushState менеджер
Сложные AJAX сайты не просто загружают новый контент они также меняют URL используя HTML5 History API.
Популярный jQuery плагин для истории pjax.
Важно обеспечивать синхронизацию истории браузера с загрузками AJAX страниц, что бы пользователи могли обновить, добавить в закладки или поделится URL текущей страницы с друзьями. Это также обеспечит корректную работу кнопок назад и вперед в браузере!
Разместите уведомления в постоянном месте
Одна из возможных проблем, возникающих у пользователей, они не видят состояния загрузки в строке браузера, она может быть пресечена путем размещения уведомления (spinner) в определенное место на странице. Важно, что бы пользователи всегда знали о том, когда происходит обработка, и это особенно важно, когда загрузка и рендеринг контента происходит динамически!
Кешируйте результаты запросов по URL
С веб, вы не хотите, чтобы запросов было больше, чем нужно, и это особенно актуально, когда вы запрашиваете страницу полностью. Создание системы кеширования для AJAX сайта (обычно) намного проще, чем вы думаете:
var cache = {}; // ... // ... within the AJAX callback cache[url] = data; // ... // ... within the click callback that would set forth a request if(cache[url]) { // Explicitly call the callback, passing it the cached page data return successCallback(cache[url]); } else { // ... do all of the AJAX request and callback stuff }Этот кеш не будет использован если пользователь нажмет на ссылку несколько раз, зато будет использован если пользователь будет нажимать кнопки назад и вперед. Ваш сервер и пользователи будут вам благодарны за кэширование на стороне клиента!
Когда не следует использовать AJAX
Не каждая страница должна загружаться через AJAX, и очень важно, что бы разработчики могли определять, когда использование AJAX проблематично. Во многих случаях результаты в форме не должны быть сохранены в кеше или выбираться динамически. Могут быть сценарии, в которых ваша инфраструктура будет страдать от AJAX нагрузок. Если вы можете определить URL, которые не должны быть загружены с помощью AJAX, можно изменить jQuery селектор:
jQuery("body").on("click", "a:not(href$='/some/page')", function(event) { }); Можете добавить больше логики в рамках обратного вызова для размещения URL-адресов. Если при клике URL совпадает, можно не вызывать preventDefault() и просто позволить нормально загрузить страницу.
Когда вы заранее планируете гибкий код, создавать AJAX сайт легче, чем вы думаете. Помните советы из этого поста и 80% уже сделано. Конечно, некоторые особенности будут специфичны для вашего сайта, но они будут незначительными по отношению ко всему приложению. Happy AJAXing!
ссылка на оригинал статьи http://habrahabr.ru/post/198330/
Добавить комментарий