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.

  • ¿Cuál es el punto de ArrayController en Ember.js?
  • ¿Cómo establecer el ID de una vista en Backbone.js?
  • El nodo JS llama a una function "local" dentro de module.exports
  • derby.js vs capsule / thoonk?
  • ¿Cómo se integran las bibliotecas js mvc como spine, backbone, jsmvc en un framework MVC basado en Server como lithium o zend?
  • AngularJS: ¿es posible utilizar ng-repeat para representar valores HTML?
  • El mejor marco JavaScript MVC para desarrollo mobile
  • Backbone.js: ¿dónde almacenar información del estado?
  • Construyendo el acordeón con knockout.js
  • ¿Cómo busco un único model en Backbone?
  • ¿Hay alguna manera de usar un nombre de propiedad diferente de lo que está en mi JSON?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.