Desarrollo de widgets jQuery: ¿puedo usar un patrón MVC?

He estado usando knockoutjs y backbone para crear una aplicación de JavaScript de una sola página. Yo uso models de esqueleto y models de vista de nocaut, pero también tengo muchos controles de UI que he usado para crear la fábrica de widgets jQuery UI.

Mi pregunta es cómo estructurar mejor el código en mis widgets jQuery. Los frameworks como knockout / backbone / ember facilitan la implementación de un patrón de tipo MVC en la aplicación principal, pero cuando se trata del desarrollo de widgets, termino teniendo una gran cantidad de código que genera y manipula elementos DOM. Todavía puedo probar esto porque jquery hace que sea fácil consultar el DOM, pero el código es bastante feo. Idealmente, también me gustaría tener un patrón MVC en mis widgets.

¿Hay alguna biblioteca o marco diseñado para ayudar con esto?

5 Solutions collect form web for “Desarrollo de widgets jQuery: ¿puedo usar un patrón MVC?”

En breve:

  • Mantenga los widgets tanto como pueda para ver una parte del MVC. Delegue los datos siempre que sea posible.
  • No escriba su widget con la pnetworkingisposition de que esté en su aplicación. Trata el widget como una isla.
  • Use Eventos para manejar los datos que salen del widget. No preguntar por eso.
  • Utilice el patrón "Tell, Do not ask" en los widgets para mantener limpio el controller

Idealmente, JQuery es la parte V del patrón MVC de su aplicación general. Si necesita widgets para retener y devolver datos cuando el usuario interactúa con ellos, Eventing es el path a seguir. Utilice el patrón de desarrollo "Dígale, no pregunte" en sus widgets para que no tenga que consultar el estado de sus widgets para hacer algo. Esto debería limpiar muchos de los problemas.

Los frameworks ayudan, pero los principios se pueden resolver sin ellos. Normalmente buildé methods en mi widget y / o funciones privadas dentro de una function anónima autoejecutable que me brinde la separación que estoy buscando. Si el widget se vuelve grande, dividir las capas en diferentes files puede ayudar, aunque esto puede hacer que sea más difícil consumir el producto final.

Depende mucho de lo que quieras decir con el widget jQuery. Si su widget consiste en algo pequeño, como algo que aumenta la funcionalidad de los elementos HTML (es decir, funcionalidad de autocomplete en un textbox), entonces es mejor estructurar su plugin muy bien y probarlo correctamente. Solo mantenlo lo más simple posible. El patrón MVC sería una carga general allí ya que a las personas generalmente les gusta tomar un solo file js y referencerlo en sus proyectos.

En cambio, si desea desarrollar una aplicación MVC de estilo Backbone, es posible que JavaScriptMVC sea ​​lo que usted desea.

Solo puedo ayudar con la parte "V" en MVC 🙂 Al crear DOM, prefiero el concepto OOCSS, donde cada class henetworkinga las properties de los padres, pero puedes integrarlas juntas.

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

Mezcla de OOCSS y 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> 

Leí tu pregunta de la siguiente manera, pero podría estar fuera del tema, así que ten cuidado .

En términos de dividir su código en unidades independientes de código, es posible que desee considerar el uso de AMD para volver a conectarlos. Personalmente, no soy partidario de la syntax, pero desde un punto de vista pragmático, quizás esto sea útil, ya que si decides dividir tu enorme file mongo en unidades reutilizables discretas, probablemente verás una gran cantidad de se beneficia al aislar unidades de funcionalidad en files independientes y al tener una manera fácil de asegurarse de que sus dependencies estén cargadas en el order correcto.

Como comentario adicional , puede que le interese verificar PureMVCJS como un principio organizativo una vez que se establece la resolución de dependencia: proporciona los medios, como muchos otros frameworks MVC, para dividir su código en capas de resources o segmentos verticales. Fuera de la caja, es independiente de cualquier biblioteca de abstracción DOM o OOP, que, dependiendo de lo que intentes lograr, sea una bendición (yay, puedo cambiar mi biblioteca de abstracción DOM sin romper mis services) o un dolor ( Tengo que escribir una capa de integración entre mi biblioteca DOM y las vistas de PureMvc), pero lo he encontrado útil (de nuevo, puedo ser parcial, porque, en un espíritu de plena revelación, fui uno de los autores del Puerto).

De todos modos, espero que esto ayude.

  • Implementación simple de inicio de session para Dojo MVC
  • ¿Cómo probar las vistas de testing en ember.js?
  • Varios models y vistas por página con backbone.js
  • Ember sin Ember Data
  • Resumen de la lógica en Backbone js
  • En Angular, ¿cómo divido de manera eficiente los elementos de input en una matriz
  • Modelo-Vista-Controlador en JavaScript
  • ¿Dónde poner los datos y el comportamiento del model?
  • Extjs hasone asociación
  • MVC Validación del lado del cliente para EditorFor in foreach
  • ¿Estamos retrocediendo utilizando un framework JavaScript MVC (MVVM) como Backbone.js, Angular, etc.?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.