Концептуальный дизайн приложения JavascriptMVC - PullRequest
Новая
       27

Концептуальный дизайн приложения JavascriptMVC

0 голосов
/ 29 февраля 2012

Я создаю одностраничный веб-сайт с областью "page-content" и основными навигационными ссылками.Нажатие на ссылки запускает анимацию и загружает контент (и html) в область «содержимое страницы».

У меня хорошее понимание MVC, но в контексте инфраструктуры javascriptMVC у меня возникла небольшая проблема при разработке моего приложения.Я буду добавлять много JavaScript (и JavaScript-анимации) по мере продвижения вперед, поэтому я хочу дать своему сайту хорошую основу.

  • У меня есть одна модель (индекс) с приборами, содержащимиданные (и html), которые я хочу добавить?

  • Есть ли у меня один контроллер для страницы (индекс) с действиями (анимация и загрузка данных из приборов)?

  • Как мне указать каждую ссылку на действие?

В принципе, как я концептуально проектирую страницу, используя javascriptMVC framework ?

1 Ответ

1 голос
/ 29 февраля 2012

Сейчас я делаю очень похожую вещь для приложения PhoneGap, которое я создаю для iPhone.Это одностраничное приложение на JavaScript.Вот базовая архитектура, которую я использую:

  1. Все изменения страницы выполняются с помощью обычных <a href="/stuff/things/"></a> тегов.Href - это «действительный» href - /stuff/things/".

  2. У меня есть объект, который сопоставляет регулярные выражения URL с контроллерами.Таким образом, что-то вроде /recipes/\d+?/ будет захватывать любые URL, такие как / recipes / 10 / или / recipes / 5 /, и вызывать назначенный контроллер.

  3. Я связываю событие с документом, который проверяетдля кликов по ссылке и проверяет атрибут href ссылки с моими различными регулярными выражениями.В случае совпадения он инициирует «обмен страницами».

  4. Функция обмена страницами использует history.pushState() для изменения URL-адреса, а затем передает предварительно заданный объект данных в контроллер.Часть этого объекта данных представляет собой анонимную «завершенную» функцию, которую контроллер будет использовать сам после того, как он выполнит свою задачу.

  5. Причиной передачи в «завершенную» функцию часто является страницаизменения включают асинхронную активность, такую ​​как запрос к базе данных с помощью ajax.Это также позволяет нам сохранять поведение «смены страниц» в одном разделе нашего кода, и контроллеры эффективно только создают блок html и добавляют его в DOM.В этот момент контроллер вызывает переданную функцию complete (), и функция pagechange завершает свою работу.

Вы можете просмотреть всю мою инфраструктуру по адресу: http://eatery.decoratelife.net/eatery.js

Это не "настоящий" MVC.Так как у меня действительно нет моделей или представлений.Представления обрабатываются путем слияния объектов данных со строками шаблона HTML, аналогичными Mustache JS, а модели выполняются через вызовы API для удаленной mongoDB.Но я думаю, что это пример достойного решения вашей проблемы.

...