Есть ли фреймворк JavaScript MVC (микро-)?

Существуют ли клиентские JavaScript MVC (микро) фреймворки?

У меня довольно сложная HTML-форма, и для нее будет полезен шаблон MVC.

Я полагаю, что хорошее решение обеспечило бы следующее:

  • Модель и представление обновляют контроллер при изменении значений (шаблон наблюдателя)
  • Заполнять модель из данных формы при загрузке страницы
  • Заполнять форму из модели при изменении модели

Ajax, comet, JSONP и все такое прочее - это серьезный перебор.

Я ошибаюсь, или это просто плохая идея (или, возможно, фреймворк соответствует модному слову)?

theman_on_vista 23.12.2008 01:14

Я начал работать над чем-то недавно, потому что у меня были те же чувства, что и у вас. Он настолько минимален, насколько это возможно, AMD, и настолько бесхитростен, насколько это возможно. Это означает, что нет jQuery и т. д. Я знаю, что сейчас он закрыт, но я думаю, что этот мощь - это то, что вы искали: github.com/Wolfy87/tarmac - В последнее время я мало что делал с ним, потому что думал, что буду единственным пользователем.

Olical 16.07.2013 18:44
github.com/yuval-a/ZOE
Yuval A. 20.12.2015 12:33

Взгляните на TodoMVC, который сравнивает (почти) все доступные фреймворки JavaScript, реализуя простое приложение TODO.

koppor 17.09.2016 10:51

Посмотрите на «timulusjs »- для существующего приложения с разметкой, созданной на стороне сервера, я обнаружил, что эта структура минимальна, наименее инвазивна и по существу. Действительно весело работать. Но не может удовлетворить все ваши требования

Sudhir N 09.12.2020 09:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
133
5
72 123
30

Ответы 30

Действительно есть: http://www.javascriptmvc.com/

Я думаю, вам этого будет достаточно!

На этом сайте есть мигающий тег. o_0

Tad Donaghe 22.12.2008 21:32

этот сайт у меня вообще не загружается

Josh 25.08.2009 23:29

Попробуйте еще раз, должно работать снова.

Filip Ekberg 26.08.2009 14:01

Я бы не назвал это микро-framework, но выглядит интересно: Веб-платформа Cappuccino

Существовал JavaScript-фреймворк привязки «ключ-значение» под названием «Coherent», который был вдохновлен Apple's Cocoa Bindings. Фреймворк куплен Apple, но на http://github.com/trek/coherentjs/tree/master все еще есть старая копия.

Вероятно, это излишек для того, что вам нужно, но SproutCore - это фреймворк MVC, и он не выглядит более тяжелым, чем JavaScriptMVC или Соединение TrimPath.

К сожалению, ни один из них не построен на принципе прогрессивное улучшение.

Основные компоненты MVC JavaScriptMVC примерно на 1 КБ больше, чем сжатые с помощью gzip Backbone (но имеют ряд дополнительных функций). А JMVC полностью может создавать приложения с прогрессивным улучшением. Вы бы просто выбросили слой с моделью.

Justin Meyer 24.03.2011 20:07

Популярная среда ActionScript MVC PureMVC недавно была перенесена на JavaScript. У меня еще не было возможности попробовать, но я уверен, что это хорошо.

Мне нравится гибкость. Просто и мощно.

Glenn 01.09.2009 08:23

Если ваши требования просты с В самом деле, вы можете написать свой собственный простой MVC, как это сделал Алексей Неткачев.

Его примеры построены на dojo (примечание: они не работают для меня на его странице из-за отсутствия файла dojo.js), но вы можете следовать шаблону в простом Javascript.

Джамал - самый легкий из тех, что я видел. Он также основан на jQuery (бонус). Не пользовались.

http://jamal-mvc.com/

JavaScriptMVC - отличное решение. Это все, что есть плагин, который позволяет вам выбирать только те функции, которые вам нужны. Начиная с версии 2.0, он основан на jQuery.

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

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

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

Наконец, JMVC - это гораздо больше, чем архитектура MVC. Он включает в себя все этапы цикла разработки:

  • Генераторы кода
  • Интегрированное тестирование Selenium и Env.js
  • Механизм документации
  • Автоматическое сжатие Concat +
  • Обнаружение ошибок и отчетность

+1 для JavascriptMVC - я уже использовал его для нескольких приложений, и это довольно приятно. Пропустите примеры генерации кода на сайте. Я полагаю, они существуют только для того, чтобы успокоить фанатов Rails. :) Начните с базовой объектной модели JQueryMX и создайте контроллер.

Chris Jaynes 31.08.2011 06:41

С тех пор, как я сделал этот комментарий, я переключился на использование Require и Spine. В конечном итоге они меньше, более элегантны и менее «корпоративны», чем JMVC. JMVC был хорош для нашей команды разработчиков Java, чтобы внести изменения в JS, но он просто не работает, когда вы начинаете лучше понимать JS ...

Chris Jaynes 19.05.2012 09:24

Часть MVC JMVC теперь can.js

PHearst 19.04.2014 15:36

Пожалуйста, также проверьте jQuery-Claypool.

jquery-Claypool - это небольшой, быстрый, управляемый mvc фреймворк, построенный на jquery, основанный на моем опыте работы с django, rails, spring и т. д. Он очень легкий и работает как на клиенте, так и на сервере.

он предоставляет структуру маршрутизации для чистого mvc, ведения журнала категорий, фильтров (aop), ленивого создания контроллеров, инверсии управления, согласования над конфигурацией и многого другого по дизайну.

он не делает того, что уже делает jquery, ощущается как jquery и работает так, как должен: просто.

jQuery-Claypool

Надеюсь, ты это проверишь.

Каким вы видите Claypool по отношению к Backbone?

Pepijn 17.06.2011 16:57

Если вы хотите, чтобы все было под контролем и было довольно просто, вам может не понадобиться фреймворк, а просто реализуйте свой собственный шаблон mvc. Просто проверьте эту статью: Модель-представление-контроллер (MVC) с JavaScript от Алекса Неткачева, 2006 год.

CorMVC, простой для понимания и для начала, основан на jquery и не зависит от какой-либо серверной технологии

Я разработал очень простой фреймворк Javascript MVC под названием MCV. Он не делает именно то, что вы просите, но его легко расширить с помощью помощников. Во всяком случае, однозначно микро (упаковано 1,9кб).

Он работает более-менее как Джамал, но я решил откатить свой по двум причинам:

  • удалить зависимость jQuery (хотя я использую ее вместе с jQuery большую часть времени)
  • делая его расширяемым с помощью помощников. Это аналог поведения, компонентов и помощников CakePHP.

Есть популярный Backbone.js

Я думаю, что это похоже на то, что вам следует проверить: http://knockoutjs.com/

(Как программист silverlight / wpf именно эта библиотека заставила меня, наконец, начать изучать javascript. Она основана на шаблоне Model-View-View-Model (MVVM), что для меня сейчас кажется хорошим выбором!)

Как программист silverlight / wpf я оценивал knockout, backbone и еще несколько. В конце концов я перешел на Angular. У него есть привязки и НАМНОГО больше.

jonperl 12.04.2012 03:47

Backbone - отличный легкий фреймворк. Попробуйте: http://backbonejs.org/

Я ТАК рад, что нашел Backbone.

Aaron Greenlee 11.01.2011 20:33

Я согласен, одно, что нужно обязательно проверить!

Ivanhoe 11.01.2011 23:46

Как использовать Backbone в MVC-режиме?

IsmailS 20.10.2011 15:15

@TristanJuricek есть ли бесплатная альтернатива пипкоду?

Matt 01.04.2012 23:24

Пропустите Backbone и перейдите прямо к Spine. У него гораздо более логичная реализация MVC.

Chris Jaynes 19.05.2012 09:27

Maverick - это небольшой фреймворк JavaScript MVC - http://maverick.round.ee

Я тоже собираюсь рассказать об этом - AFrameJS работает с jQuery, MooTools и Prototype.

Чтобы сделать список более полным: ActiveJS

Позвоночник имеет API, похожий на Backbone, но намного меньше по размеру. Он имеет прототипное наследование.

Он также написан на CoffeeScript и использует стиль классов CoffeeScript - не то чтобы это большая победа, но отчасти приятно.

a paid nerd 12.11.2011 01:53

Полагаю, поэтому он меньше магистрального? Код Coffeescript более компактный ...

Brenden 20.01.2012 05:43

Я люблю Spine. Используйте его вместе с RequireJS, чтобы получить невероятное удовольствие. Пусть вас не пугает тот факт, что это CoffeeScript, он отлично работает и с обычным JS ...

Chris Jaynes 19.05.2012 09:26

Браузер поддерживает IE> = 9, поэтому убедитесь, что он соответствует профилю ваших посетителей.

Richard 22.12.2014 20:10

Еще один: MooTools-MVC

AngularJS хорошо работает вместе с jQuery и очень поможет вам со структурой MVC и строгим разделением задач.

Полная среда тестирования и внедрение зависимостей включены ...

Проверьте это на http://angularjs.org

Angularjs - САМЫЙ лучший на конец 2013 года .... Я думаю ....

Tony Bao 25.10.2013 00:09

angular - это не микро-фреймворк: /

iConnor 01.02.2014 05:53

Согласитесь, Angular - это не микро-фреймворк.

Vojta 12.03.2014 07:12

да, также кривая обучения непропорциональна его преимуществам по сравнению с другими фреймворками.

vsync 31.03.2014 02:10

angular - полная противоположность микро-каркасу. это зверь.

hasen 23.03.2015 06:07

Попробуйте Китти. Это всего лишь 1,4 КБ, и его единственная зависимость - EJS.

Я поддержал AngularJS (полное раскрытие информации, я ограниченно участвую в разработке angular) и очень рад этому. Я провел параллельное сравнение, взяв одну функцию для внутреннего проекта (извините, у меня нет подписи, чтобы поделиться ею) и реализовал ее как в AngularJS, так и в Backbone. Это было отличное упражнение, и, в конце концов, я очень склоняюсь к Angular. Основные разработчики отлично отвечают на вопросы, и они проделали действительно хорошую работу со встроенной привязкой данных, модульным / e2e-тестированием и документацией. Он все еще находится в стадии бета-тестирования, версия 1.0 выйдет в ближайшем будущем. Бета очень стабильна.

Произошла небольшая смена парадигмы, и они используют совершенно иной подход, чем большинство других. Интеграция ваших любимых плагинов jquery требует немного усилий, но это выполнимо и было сделано (angular-contrib на github).

Я скажу (и это проблема для большинства js-ориентированных фреймворков), обязательно исследуйте, как сделать свой контент SEO-дружественным (если это важно для вас). С тех пор, как я присоединился к сообществу Angular в июне, я заметил, что интерес растет, и некоторые люди публикуют сообщения, в которых говорится, что они смотрели Backbone и другие, но им действительно нравится то, что они видят в Angular.

Вот список всех известных человечеству фреймворков JavaScript с открытым исходным кодом.

http://getopensource.info/explore/javascript/framework/

Или только фреймворки MVC

http://getopensource.info/explore/javascript/mvc/

Раскрытие информации: я разработчик этого сайта.

Ember.js

Вот три функции, которые делают использование Ember приятным:

  1. Привязки
  2. Расчетные свойства
  3. Автообновление шаблонов

Привязки

Используйте привязки, чтобы синхронизировать свойства двух разных объектов. Вы просто объявляете привязку один раз, и Ember обеспечит распространение изменений в любом направлении.

Вот как вы создаете привязку между двумя объектами:

MyApp.president = Ember.Object.create({
  name: "Barack Obama"
});

MyApp.country = Ember.Object.create({
  // Ending a property with 'Binding' tells Ember to
  // create a binding to the presidentName property.
  presidentNameBinding: 'MyApp.president.name'
});

MyApp.country.get('presidentName');
// "Barack Obama"

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

Вычисленные свойства

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

Автообновление шаблонов

Ember использует Handlebars, семантическую библиотеку шаблонов. Чтобы взять данные из вашего приложения JavaScript и поместить их в DOM, создайте тег и поместите его в свой HTML, где бы вы ни хотели, чтобы значение появилось:

<script type = "text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>

в любом случае выгоднее использовать Ember вместо магистрали .... если спецификации не так понятны на начальных этапах ..

Bijendra 16.11.2012 15:56

Мне нравится emberJS, но это не "микро", а ОГРОМНЫЙ, потому что это плоский фреймворк.

iConnor 10.02.2014 20:07

Использование Ember и микрофреймворков в одном предложении недопустимо.

T_Conroy 02.11.2015 19:49

Stapes.js

Полное раскрытие: я автор этой библиотеки :)

Если вы ищете что-то действительно крошечное (1,5 КБ, уменьшенное / сжатое), посмотрите и скажите мне, нравится ли вам это.

Отлично смотрится с первого взгляда! Мне нравится, что вы сосредоточены на прототипном наследовании (без моделируемых классов и без запутанного оператора new). Что кажется ненужным, так это еще одни each и map. У меня они уже есть в Underscore.js и jQuery.

feklee 28.07.2012 16:57

ОБНОВЛЕНИЕ 2016: Кажется, что Sammy.js заброшен.

Взгляните на Sammy.js

Текст с сайта:

Небольшой веб-фреймворк с классом.

  • НЕБОЛЬШОЙ Ядро Сэмми сжато только 16K и сжато и gzip 5,2K
  • МОДУЛЬНЫЙ Sammy построен на системе плагинов и адаптеров. Включите только тот код, который вам нужен. Также легко извлечь собственный код в плагины многократного использования.
  • ЧИСТЫЙ Весь API был разработан таким образом, чтобы его было легко понять и прочитать. Сэмми пытается поощрять хорошую инкапсуляцию и разработку приложений.
  • ВЕСЕЛЬЕ В чем реальный смысл разработки, если это не доставляет удовольствия. Сэмми пытается следовать подходу MATZ. Он оптимизирован для счастья разработчиков.

Не могли бы вы рассказать подробнее о том, что такое MATZ?

kstep 01.04.2016 16:22

Юкихиро «Мац» Мацумото, создатель Ruby, часто говорил, что он «пытается сделать Ruby естественным, а не простым», отражающим жизнь. Таким образом, программа должна казаться пользователю естественной. Это подразумевается под подходом MATZ.

Bijan 01.04.2016 16:27

Еще один, легкий и крошечный: http://jqnano.oleksiy.pro/

Can.js имеет все необходимое и весит всего 8 KB. Он взял лучшее из JavaScriptMVC и превратил его в одну небольшую, но крутой фреймворк с наблюдателями, виджетами, привязкой и всем остальным. Он совместим с основными фреймворками (jQuery, Набор инструментов Dojo, MooTools и т. д.). Документация отличная, авторы отзывчивые. Это однозначно стоит посмотреть.

Другие вопросы по теме