Какую архитектуру я должен изучить, чтобы сделать хорошее программное обеспечение на основе JavaScript? - PullRequest
3 голосов
/ 25 сентября 2010

Я хорошо знаю Model-View-Controller, знаю об этом годами и использовал его для разработки на стороне сервера с такими языками, как PHP.

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

JavaScript и MVC не живут как дом в огне, потому что JavaScript зависит от событий по своей природе. Итак, есть ли какие-то архитектуры или что-то еще, что я должен определенно изучить, понять и реализовать?

Программное обеспечение будет иметь дело с данными. Он уже использует локальное хранилище и базу данных веб-SQL. Мне нужны модели, верно? Есть пользовательский интерфейс, поэтому у меня есть представления? Однако есть ли у меня контроллеры? Как насчет событий? Как мне все структурировать?

Архитектура, архитектура, архитектура - вот что меня интересует. Я в порядке с выбранным языком.

Ответы [ 7 ]

2 голосов
/ 27 сентября 2010

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

  1. Загрузка сценариев
  2. Ответ на пользовательские события
  3. Обновление DOM
  4. Запрос данных с сервера
  5. Преобразование этих данных во что-то полезное для JavaScript
  6. Организация вашей бизнес-логики интерфейса

Выбор архитектуры может зависеть от того, чтоинструменты, которые вы хотите / нужны.

Для общей архитектуры я считаю важным разделить проблемы.

Я настоятельно рекомендую вам найти способ управления зависимостями и шаблоны на стороне клиента.Они сделают вашу жизнь намного проще.

JavaScriptMVC использует многоуровневый подход MVC, который в значительной степени основан на пользовательских событиях пользовательского интерфейса и событиях OpenAjax.

Я создаю свои низкоуровневые виджеты с помощью $. Контроллер аналогично тому, как вы строите виджеты jQuery.Большая разница в том, что виджеты генерируют не-пользовательское событие, которое контроллеры верхнего уровня могут слушать.Например, виджет вкладок может генерировать событие «tab.activate», например:

$('.tab').trigger('tab.activated')

Затем мой контроллер более высокого порядка может прослушивать события tab.activation и модель для обновления содержимого вкладки, например:

".flickr tab.activated" : function(tabEl, ev){
  Flickr.findAll({type : "rainbows"}, function(images){
    tabEl.html("//path/to/view", images );
  }
}

Flickr.findAll по существу выполняет запрос сообщений flickr, а затем перезванивает со списком изображений.Объединение функциональности service / ajax с моделями делает их более многократно используемыми.

Вы заметите, что в обратном вызове я обновляю html-элемент tab с отображаемым содержимым из представления.Вероятно, это не самый лучший способ сделать это, но я хотел быстрый пример.Лучше было бы передать контроллеру вкладок визуализированный вывод, чтобы он делал то, что будет с ним.Таким образом, если ваша вкладка когда-нибудь захочет исчезнуть в контенте, она сможет, и вашему главному контроллеру не нужно будет знать о реализации вкладки.

Самое главное - разбить ваше приложение насамые маленькие кусочки вы можете.Сделайте так, чтобы они были индивидуально тестируемыми (и гибкими), и объединяйте мелкие детали в большие по мере продвижения к своему приложению.

1 голос
/ 27 сентября 2010

Взгляните на Ext JS . Он имеет чистую архитектуру, которая хорошо подходит для очень сложных приложений javascript.

Обработка данных и связь с сервером осуществляется через магазины. Рендеринг данных осуществляется с помощью гридов (с помощью встроенных в ячейку редакторов) и форм (с богатым набором элементов управления формами), которые могут взаимодействовать с магазинами. Существует также набор классов макетов для абстрагирования CSS-позиционирования (макет границы, макет блока, макет таблицы, макет формы, ...).

Это, однако, не MVC в обычном смысле. Библиотека поощряет стиль программирования, который избегает много работать с HTML и CSS, позволяя вам жить (в основном) на чистом JavaScript. В конечном итоге вы мыслите с точки зрения компонентов и данных, а не отдельных элементов DOM и правил стиля. Если вам не нравится такой подход, будьте осторожны, вам не понравится эта библиотека.

0 голосов
/ 15 августа 2012

Если вам нужна готовая эталонная архитектура, которая объединяет ведущие в отрасли библиотеки JS от soem с некоторыми хорошими шаблонами проектирования JS для крупномасштабной разработки, взгляните на:

http://boilerplatejs.org/

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

  • Структурирование решения
  • Создание сложной иерархии модулей
  • Автономные компоненты пользовательского интерфейса
  • Межмодульная связь на основе событий
  • Маршрутизация, история, создание закладок
  • Модульное тестирование
  • Локализация
  • Генерация документов
0 голосов
/ 25 сентября 2010

Хотя это не сырое решение для javascript, взгляните на CoreMVC , архитектуру jQuery MVC.

CorMVC работает на jQuery Каркас модель-представление-контроллер (MVC) которые могут помочь в развитии одностраничные веб-приложения. CorMVC означает «только для клиента» модель-вид-контроллер и предназначена быть минимально возможной точкой входа в изучение одностраничного приложения архитектура. Это не предполагает любые серверные технологии или веб сервер любого рода, и не требует больше, чем веб-браузер, чтобы встать и работает.

0 голосов
/ 25 сентября 2010

Одна вещь, которую я узнал за годы программирования на javascript, - это написание UnObtrusive Javascripting, которое в основном означает отделение как можно большей структуры (HTML) и стиля (CSS) от поведения (JAVASCRIPT).

0 голосов
/ 25 сентября 2010

Вам следует изучить природу клиентского JavaScript на основе событий и узнать, как он сочетается с серверными приложениями на основе MVC.

Вы также должны научиться правильно программировать внутри структуры наследования на основе прототипов Javascript.

Обе эти вещи позволят вам написать JavaScript, чтобы он совмещался с вашей серверной прикладной средой, был расширяемым и многократно используемым.

0 голосов
/ 25 сентября 2010

MVC - все еще путь, по моему мнению. Если вы ищете хороший фреймворк, который поможет вам достичь этого менее болезненно, я бы посмотрел на JavaScript MVC , в котором есть модели, представления, контроллеры, модульное тестирование, поддержка jQuery и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...