Как построить сайт Ajax в стиле Facebook

Question

Я понимаю, что заголовок немного расплывчатый и всеобъемлющий, поэтому, пожалуйста, позвольте мне попытаться сузить его.

Что я хочу, это советы о том, как разработать сайт Ajax в основном, где части пользовательского интерфейса загружаются асинхронно. Вот улов: я хотел бы, чтобы кнопки браузера назад/вперед работали интуитивно - что-то, что Facebook сделал очень хорошо.

Кто-нибудь знает, какие библиотеки и шаблоны проектирования использует Facebook? Учитывая, что они отлично поработали, было бы разумно использовать их в качестве модели, а не пытаться изобрести колесо.

Я заметил, что есть много происходит в URL-адрес хэша:
http://www.facebook.com/home.php?#!/home.php?sk=bd

я уверен, что там должен быть хороший повод для них делать это, и я не удивлюсь, если это то, что я мог бы использовать. Может кто-то указать, что они здесь делают, и для чего используется каждая часть этого ?#!/home.php?sk=bd? Я особенно удивлен, увидев home.php?sk=bd, когда исходная страница была загружена home.php - это, возможно, их способ разрешить ссылки на определенные «страницы», несмотря на то, что все обслуживается home.php?

Не так важно, чтобы каждый вопрос решался - я действительно просто пытаюсь сообщить, что это такое, что у меня проблемы с пониманием - «большая картина», если хотите. Если кто-то может дать мне более целостный ответ, это было бы потрясающе (особенно, если вы можете сказать мне, как это могло бы быть выполнено с помощью ASP.NET MVC).

Заранее благодарен!

Answer 1

Мы создали приложение, как вы описали, вот что мы сделали, наконец:

1. Сервер обсудить с браузером исключительно через данные в формате JSON.
   Обмен сообщениями XML в порядке, но сложнее обращаться во всех браузерах.
    
2. Интерфейс построен только из статических файлов: HTML, CSS, JS. Сервер обрабатывает только безопасность и транзакции в базе данных.
   Весь HTML-код визуализируется на стороне клиента с помощью pure.js механизма шаблонов Javascript, он четко разделяет представление HTML и логику JS.
    
3. Для навигации мы используем хеш-ключ (#) в качестве статуса приложения. например: к какому человеку относится пользователь. После тестирования многих решений мы построили очень простой, используя опрос setInterval 120 мс, который проверяет значение хэш-ключа для любых изменений.

Приложение очень отзывчивое и навигация очень интуитивно понятная.

EDIT:
Поскольку мы уронили поддержку IE6 и IE7 мы не опрашиваем больше изменений хэша, но использовать window.onhashchange

Answer 2

Я использую метод похожи на МИК. Основные части моего набора инструментов:

• Javascript система сборки. Я использую ant, чтобы катить все мои маленькие исходные файлы js в один большой финальный файл. Таким образом, я могу сохранить мои файлы такими же маленькими, как я хочу, не беспокоясь о необходимости импортировать в браузер 100 отдельных скриптов.

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

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

• Методы обработки асинхронных вызовов. Есть много ситуаций, когда для визуализации экрана мне нужно убедиться, что загружены данныеA, dataB и dataC. Вместо того, чтобы создавать серверный вызов «fetchDataABandC», у меня есть клиентская функция, с которой я могу указать «сделать A, B и C и вызвать этот обратный вызов, когда все закончится». Я также могу указать «сделать A, а затем B, затем C, последовательно». Еще одна вещь, которую я нахожу в себе, - это настройка функций, чтобы их можно было легко переключить на асинхронные вызовы. Таким образом, как правило, в любой момент, когда у меня есть функция, которая получает данные, вместо того, чтобы вернуть эту функцию, я передаю обратный вызов. Если, например, я храню некоторые данные в cookie, а позже я решил перенести эти данные на сервер, если функции, которые я использую для получения и установки этих данных, основаны на обратном вызове, легко заменить реализация с вызовом сервера.

• механизм кэширования. Все мои сервера вызовов доступны через один «Service» объекта. у меня есть объект кэширования, который оборачивает объект Service, дублирует каждый метод из объект и добавляет дополнительный метод, называемый {methodName} Cached. Поэтому, если у исходного объекта службы есть метод, называемый «getSubscriberDetails», объект кеша будет динамически создавать для себя метод getSubscriberDetails, который ссылается на оригинал, а также метод getSubscriberDetailsCached, который будет возвращать кэшированные данные, если он существует, но в противном случае ll исходная функция (и кэшировать данные, которые она возвращает). Внутри кеш хранит данные с использованием ключей, сгенерированных аргументами метода и методов, поэтому, если я вызываю cache.getSubscriberDetailsCached («подписчик1»), который отличается от cache.getSubscriberDetailsCached («подписчик2»).

• Система событий для связи между виджетами. Программное обеспечение, которое я создаю, - это система управления контактами. Если у меня есть виджет, в котором перечислены все контакты пользователя и еще один виджет, который позволяет пользователю добавлять и удалять контакты, виджет списка контактов должен быть уведомлен о том, какое изменение происходит. Вместо того, чтобы иметь виджет «добавить контакт», осознавая каждую отдельную функциональность, которая зависит от списка контактов, я использую систему событий jquery для отправки события «contactsChanged» во все домашние объекты, у которых есть класс «contactsChangedListener», , Итак, мой виджет «списка контактов» имеет класс «contactssChangedListener» в его внешнем div, и я присоединяю слушателя внутри контроллера «список контактов» через jQuery.bind. Когда событие «contactsChanged» отправляется, мой виджет «Список контактов» знает, что ему необходимо обновить список контактов.

• Хеш-навигация. Я использую плагин jquery hashchange, чтобы помочь мне прослушать изменения хэша. Каждый экран связан с отдельным URL-адресом, а способ перехода с одного экрана на другой - это изменение URL-адреса. Хотя я не использую прямые ссылки.Каждое действие навигации проходит через объект навигатора, который может быть настроен так, чтобы делать такие вещи, как всплывающее предупреждающее сообщение, сообщающее пользователю, что они собираются потерять несохраненные изменения.