javascript - ejemplo - Desarrollo de widgets de jQuery-¿Puedo usar un patrón MVC?

tooltip jquery ui ejemplos

Question

He estado utilizando knockoutjs y backbone para crear una aplicación de JavaScript de una sola página. Utilizo modelos de red troncal y modelos de vista knockout, pero también tengo muchos controles de IU que he creado para crear la fábrica de widgets de jQuery UI.

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

¿Hay bibliotecas o marcos diseñados para ayudar con esto?

Answer 1

En breve:

• Mantenga los widgets tanto como una vista de MVC como pueda. Delegue los datos cuando sea posible.
• No escriba su widget con la predisposición de que esté en su aplicación. Trata el widget como una isla.
• Utilice Eventos para manejar los datos que pasan fuera del widget. No preguntes por ello.
• Use el patrón "Diga, no pregunte" en los widgets para mantener limpio el controlador

Idealmente, JQuery es la parte V del patrón MVC de su aplicación general. Si los widgets que tiene que retener y devolver datos cuando el usuario interactúa con ellos, el evento es el camino a seguir. Use el patrón de desarrollo "Diga, 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.

Answer 2

He leído su pregunta de la siguiente manera, pero podría estar muy lejos del tema, por lo tanto, caveat emptor .

En términos de dividir su código en unidades de código independientes, es posible que desee considerar el uso de AMD para volver a incluirlos todos. Personalmente, no soy un fanático de la sintaxis, pero desde un punto de vista pragmático, tal vez esto sea útil, ya que si decide dividir su enorme archivo mongo en unidades reutilizables discretas, probablemente verá una gran cantidad de se beneficia de aislar unidades de funcionalidad en archivos independientes y tener una manera fácil de asegurarse de que sus dependencias se carguen en el orden correcto.

Además, puede que le interese ver PureMVCJS como un principio organizativo una vez que tenga la resolución de dependencias marcada. Proporciona los medios, como muchos otros marcos MVC, para dividir su código en capas redimensionables o segmentos verticales. Fuera de la caja, es independiente de cualquier biblioteca de abstracción de DOM u OOP, que, dependiendo de lo que esté tratando de lograr, será de gran ayuda (sí, puedo cambiar mi biblioteca de abstracción de DOM sin interrumpir mis servicios) o una molestia ( Tengo que escribir una capa de integración entre mi biblioteca DOM y las vistas de PureMvc), pero me ha resultado útil (pero, una vez más, puede que esté sesgada, porque, en el espíritu de la divulgación completa, fui uno de los autores del Puerto).

De todos modos, espero que esto ayude.

Answer 3

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

Answer 4

Puedo ayudar solo con la parte "V" en MVC :) Haciendo DOM, prefiero el concepto OOCSS, donde cada clase hereda las propiedades de los padres, pero se pueden integrar 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

Mezclando 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>

Answer 5

Depende mucho de a qué te refieres con el widget jQuery. Si su widget consiste en algo pequeño, como algo que aumenta la funcionalidad de los elementos HTML (es decir, la funcionalidad de autocompletar en un cuadro de texto), es mejor estructurar bien su complemento y probarlo correctamente. Solo mantenlo lo más simple posible. El patrón de MVC sería una sobrecarga allí, ya que las personas generalmente prefieren tomar un solo archivo js y hacer referencia a él en sus proyectos.

En su lugar, si desea desarrollar una aplicación MVC de estilo Backbone, JavaScriptMVC podría ser lo que usted desea.