Разработка виджета jQuery - могу ли я использовать шаблон MVC?

Я использую knockoutjs и позвоночник, чтобы создать одностраничное приложение JavaScript. Я использую базовые модели и модели с нокаутом, но у меня также есть множество элементов управления пользовательского интерфейса, которые я использовал для создания виджета jQuery UI factory.

Мой вопрос заключается в том, как лучше структурировать код в моих виджетах jQuery. Рамки, такие как knockout/backbone/ember, упрощают реализацию шаблона типа MVC в главном приложении, но когда дело доходит до разработки виджета, я получаю большой кусок кода, который выводит и управляет элементами DOM. Я все еще могу проверить это, потому что jquery упрощает запрос к DOM, но код довольно уродлив. В идеале я хотел бы иметь шаблон MVC в своих виджетах.

Существуют ли какие-либо библиотеки или фреймворки, разработанные для этого?

Ответ 1

Короче:

Держите виджеты так же, как и часть просмотра MVC, как можете. Делегируйте данные, когда это возможно.
Не записывайте свой виджет с предрасположенностью к его приложению. Относитесь к виджету как к острову.
Использовать события для обработки данных, выходящих из виджета. Не запрашивайте его.
Используйте "Скажите, не спрашивайте" в виджетах, чтобы держать контроллер чистым.

В идеале JQuery является частью V шаблона MVC вашего общего приложения. Если виджеты вам нужно сохранить и вернуть данные, когда пользователь взаимодействует с ними, событие - это путь. Используйте "Расскажите, не спрашивайте" образец разработки в ваших виджетах, чтобы вам не приходилось запрашивать состояние ваших виджетов. сделай что-нибудь. Это должно устранить многие проблемы.

Ответ 2

Я могу помочь только с частью "V" в MVC:) Создавая DOM, я предпочитаю концепцию OOCSS, где каждый класс наследует свойства родителя, но вы можете объединить их вместе.

OOCSS

<div class="mod"> 
    <b class="top"></b>
    <div class="inner">
        <div class="bd"></div>
    </div>
    <b class="bottom"></b> 
</div>

https://github.com/stubbornella/oocss/wiki/Module

jQuery UI

<div class="ui-widget ui-widget-content">
  <div class="ui-widget-header"></div>
  <div class="ui-widget-content"></div>
</div>

http://jqueryui.com/docs/Theming/API

Смешение OOCSS и jQuery UI

<div class="mod ui-widget ui-widget-content">
  <div class="top ui-widget-header"></div>
  <div class="inner ui-widget-content"></div>
  <div class="bottom ui-widget-footer ?"></div> 
</div>

Ответ 3

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

Ответ 4

Это очень зависит от того, что вы подразумеваете под виджетами jQuery. Если ваш виджет состоит из чего-то маленького, например, что-то, что увеличивает функциональность элементов HTML (т.е. функция автозаполнения для текстового поля), тогда вам лучше структурировать ваш плагин и чтобы проверить его. Просто держите его как можно проще. Шаблон MVC был бы накладным, поскольку люди обычно просто хотели бы взять один файл js и ссылаться на него в своих проектах.

Вместо этого, если вы хотите создать приложение MVC в стиле Backbone, JavaScriptMVC может быть тем, что вы хотите.

Ответ 5

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

С точки зрения выхода вашего кода на независимые единицы кода, вы можете захотеть использовать AMD, чтобы вернуть их обратно еще раз. Лично я не поклонник синтаксиса, но с прагматической точки зрения, может быть, это было бы полезно, как если бы вы решили разбить свой огромный файл mongo на дискретные многоразовые юниты, вы, вероятно, увидите много дает возможность изолировать единицы функциональности в независимых файлах и иметь простой способ убедиться, что ваши зависимости загружены в правильном порядке.

В стороне, вы можете быть заинтересованы в проверке PureMVCJS в качестве организационного принципа после того, как у вас есть разрешение зависимостей, приложенное вниз - оно предоставляет средства, как и многие другие структуры MVC, разбить ваш код на восстанавливаемые слои или вертикальные срезы. Из коробки он не зависит от какой-либо библиотеки абстракции DOM или OOP, которая в зависимости от того, что вы пытаетесь достичь, будет благом (yay- я могу изменить свою библиотеку абстракции DOM, не нарушая мои услуги) или боль ( Я должен написать слой интеграции между моей библиотекой DOM и представлениями PureMvc), но я нашел это полезным (опять же, я могу быть предвзятым, потому что в духе полного раскрытия я был одним из авторов порт).

Во всяком случае, надеюсь, что это поможет.