vanilla mvc ejemplo javascript model-view-controller forms

ejemplo - ¿Hay un JavaScript MVC(micro-) framework?



use model in javascript mvc (30)

¿Hay marcos MVC (micro-) de JavaScript del lado del cliente?

Tengo una forma HTML bastante complicada, y se beneficiaría del patrón MVC.

Me imagino que una buena solución proporcionaría lo siguiente:

  • Model and View actualiza el controlador cuando los valores cambian (patrón de observador)
  • Llene el modelo de los datos del formulario cuando se carga la página
  • Complete el formulario del modelo cuando el modelo cambie

Ajax, cometa, JSONP y todo ese jazz son excesos serios.


ACTUALIZACIÓN 2016: Sammy.js parece estar abandonado.

Echa un vistazo a Sammy.js

Texto del sitio:

Un pequeño webframework con clase.

  • El núcleo de SMALL Sammy solo tiene 16K de compresión y 5.2K de compresión y gzip
  • MODULAR Sammy se basa en un sistema de complementos y adaptadores. Solo incluye el código que necesitas. También es fácil extraer su propio código en complementos reutilizables.
  • LIMPIAR Toda la API fue diseñada para ser fácil de entender y leer. Sammy intenta fomentar una buena encapsulación y diseño de aplicaciones.
  • DIVERSIÓN ¿Cuál es el verdadero punto de desarrollo si no es agradable? Sammy intenta seguir el enfoque de MATZ. Está optimizado para la felicidad del desarrollador.

AngularJS funciona bien junto con jQuery y te ayudará mucho con la estructura de MVC y la separación estricta de las preocupaciones.

El entorno de prueba completo y la Inyección de Dependencia están incluidos ...

Compruébelo en http://angularjs.org




CorMVC, fácil de entender y para empezar, basado en jquery y no depende de ninguna tecnología de servidor


Creo que este parece algo que deberías ver: http://knockoutjs.com/

(Como programador de Silverlight / wpf, esta fue la biblioteca que finalmente me hizo comenzar a aprender javascript. Se basa en el patrón Modelo-Vista-Vista-Modelo (MVVM), ¡ya que para mí ahora parece una buena elección!)



Desarrollé un framework MVC Javascript muy simple llamado MCV . No hace exactamente lo que pide, pero es fácilmente extensible con ayudantes. De todos modos, definitivamente es micro (1,9kb embalado).

Funciona más o menos como Jamal, pero decidí lanzar el mío por dos razones:

  • eliminar la dependencia jQuery (aunque la uso junto con jQuery la mayor parte del tiempo)
  • haciéndolo extensible con ayudantes. Estos son análogos a los comportamientos, componentes y ayudantes de CakePHP.

El popular marco MVC de ActionScript PureMVC fue PureMVC recientemente a JavaScript. No he tenido la oportunidad de probarlo todavía, pero estoy seguro de que es bueno.



Hubo un marco de JavaScript vinculante de valor clave llamado "Coherent", que se inspiró en los enlaces Cocoa de Apple. El marco ha sido comprado por Apple, pero todavía hay una copia antigua en http://github.com/trek/coherentjs/tree/master .


Jamal es el más ligero que he visto. También se basa en jQuery (bonificación). No lo he usado.

http://jamal-mvc.com/




Por favor, también jquery-claypool .

jquery-claypool es un framework mvc pequeño, rápido y railable construido en jquery, basado en mi experiencia con django, rieles, resortes, etc. Su peso es muy ligero y se ejecuta tanto en el cliente como en entornos de servidor.

proporciona un marco de enrutamiento para limpiar mvc, registro de categoría, filtros (aop), creación de controladores perezosos, inversión de control, convención sobre configuración y no mucho más por diseño.

no hace nada que ya haga jquery, se siente como jquery, y funciona como un buen marco de trabajo: simplemente.

jquery-claypool

Espero que lo revises.


Probablemente sea exagerado para lo que necesita, pero SproutCore es un framework MVC, y no parece más pesado que JavaScriptMVC o TrimPath''s Junction .

Lamentablemente, ninguno de estos parece estar basado en el principio de mejora progresiva .


Prueba kitty . Es solo 1.4 KB y su única dependencia es EJS.



Si desea mantener las cosas bajo control y es bastante simple, puede que no necesite un marco, sino simplemente implemente su propio patrón de mvc. Simplemente revise este artículo: Model-View-Controller (MVC) con JavaScript de Alex Netkachov en 2006.


Si sus requisitos son realmente simples, podría escribir su propio MVC simple como lo hizo Alex Netkachov .

Sus ejemplos están basados ​​en dojo (Nota: no funcionan para mí en su página porque falta un archivo dojo.js), pero puedes seguir el patrón en Javascript.


Solo para hacer la lista un poco más completa: ActiveJS



Volví a subir el AngularJS (divulgación completa, estoy involucrado de una manera limitada con el esfuerzo de desarrollo angular) y estoy muy entusiasmado con él. Hice una comparación lado a lado teniendo una función para un proyecto interno (lo siento, no tengo firma para compartirlo) y su implementación en AngularJS y Backbone. Fue un gran ejercicio y, al final, estoy muy inclinado hacia Angular. Los desarrolladores principales son geniales para responder preguntas y han hecho un trabajo realmente bueno con enlaces de datos integrados, pruebas de unidades / e2e y documentación. Todavía está en beta con 1.0 saliendo en un futuro próximo. La beta es muy estable.

Hay un poco de cambio de paradigma, y ​​usan un enfoque bastante diferente que la mayoría. La integración de tus plugins de jquery favoritos requiere un poco de esfuerzo, pero es posible y se ha llevado a cabo (contrib angular en github).

Diré (y este es un problema para la mayoría de los frameworks js-centric), asegúrese de investigar cómo hacer que su contenido sea amigable con SEO (si es importante para usted). Desde que me uní a la comunidad angular en junio, me di cuenta de que el interés está creciendo y varias personas hacen publicaciones que dicen que han observado Backbone y otros, pero que realmente les gusta lo que están viendo en Angular.


Voy a buscar aquí también: AFrameJS funciona con jQuery, MooTools y Prototype.



Ember.js

Estas son las tres características que hacen que Ember sea un placer usar:

  1. Vinculaciones
  2. Propiedades calculadas
  3. Plantillas de actualización automática

Vinculaciones

Use enlaces para mantener las propiedades entre dos objetos diferentes sincronizados. Usted acaba de declarar un enlace una vez, y Ember se asegurará de que los cambios se propaguen en cualquier dirección.

Así es como crea un enlace entre dos objetos:

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"

Los enlaces le permiten diseñar su aplicación usando el patrón MVC (Model-View-Controller), luego, descanse sabiendo que los datos siempre fluirán correctamente de una capa a otra.

Propiedades calculadas

Las propiedades calculadas le permiten tratar una función como una propiedad. Las propiedades calculadas son útiles porque pueden funcionar con enlaces, al igual que cualquier otra propiedad.

Actualización automática de plantillas

Ember usa Handlebars, una biblioteca de plantillas semánticas. Para tomar datos de su aplicación JavaScript y ponerlos en DOM, cree una etiqueta y colóquela en su HTML, donde quiera que aparezca el valor:

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


Stapes.js

Divulgación completa: soy el autor de esta biblioteca :)

Si estás buscando algo muy pequeño (1.5kb minified / gzipped) echa un vistazo y dime si te gusta.


JavaScriptMVC es una excelente solución. Es todo, un enfoque de complemento le permite seleccionar solo las características que necesita. A partir de 2.0, está basado en jQuery.

Al mejorar progresivamente su sitio web, eso queda en manos del usuario, ya que JMVC proporciona solo una capa intermedia para el desarrollo: usted debe elegir el diseño usted mismo.

Sin embargo, JavaScriptMVC es simplemente la mejor biblioteca de JavaScriptMVC de propósito general debido a sus potentes controladores basados ​​en delegación de eventos.

La delegación de eventos te permite evitar tener que adjuntar controladores de eventos y simplemente crear reglas para tu página.

Finalmente, JMVC es mucho más que una arquitectura MVC. Tiene todas las partes del ciclo de desarrollo cubierto con:

  • Generadores de código
  • Pruebas integradas de Selenium y Env.js
  • Motor de documentación
  • Concat automático + compresa
  • Detección de errores e informes

Spine tiene una API similar a Backbone, pero es mucho más pequeña. Cuenta con herencia prototípica.


Can.js tiene todo lo que necesita y pesa solo 8 KB. Se ha tomado las mejores partes de JavaScriptMVC y se ha destilado en un marco pequeño, pero kickass con observadores, widgets, enlaces, las obras. Es compatible con los principales marcos ( jQuery , Dojo Toolkit , MooTools , etc.). La documentación es excelente y los autores son receptivos. Definitivamente vale la pena echarle un vistazo.