¿Cuál es la mejor práctica para organizar una aplicación jQuery Mobile?

He encontrado un artículo que roza esto. Pero mi pregunta principal es ¿necesito un archivo .html separado para cada pantalla? Estoy pensando que sí, pero me gustaría un voto unánime. Además, ¿eso va para archivos JS separados también?

Edición: la aplicación JQM es básicamente para usuarios y roles de administrador.

Tenemos un sitio de producción de jQM, así es como hacemos las cosas, y sí, otros pueden estar en desacuerdo, pero encontramos que esto funciona para un sitio muy grande.

  1. Use varias páginas HTML únicas, una plantilla grande de varias páginas anula los beneficios de la carga de ajax de jQM ya que está cargando todo su HTML al principio (a menos que su sitio sea pequeño)

  2. Definitivamente desea utilizar la carga ajax, jQM solo ingresa el código en su

    PERO esto complica su JS.

  3. No necesita varios archivos JS, PERO sí necesita cargar todo su JS al principio, lo logramos haciendo dos cosas: 1. ponemos un detector en la raíz del documento y escuchamos los eventos pageinit / pageshow. Cada vez que se carga una página, se activan, también tiene una referencia útil a la página actual, y puede usar un atributo en la página para determinar qué página era. 2. Tenga todo el JS en una inclusión de algún tipo (ojalá esté usando PHP, CF o algo así) y coloque esto en cada página, de esa manera, sin importar el punto de entrada con el que un usuario navega a su sitio móvil, obtiene todo el código cargado

El inconveniente es que todo el JS está cargado inicialmente, pero, por lo tanto, nos compensa que no sea un gran problema, y ​​si realmente es una preocupación, consulte RequireJS. Además, la depuración es muy sencilla ya que el JS es todo lo que hay, podemos usar fácilmente el depurador y la ubicación. puntos de interrupción. Si carga JS dinámicamente en cada página, aumenta los datos que necesita devolver en cada página y tiene fealdad porque recarga JS redundante y es difícil depurar JS dynamic.

 $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){ var pageType = $(this).data('pagetype'); //handle pageinit/pageshow (oEvent.type) for each pageType 

Creo que es mejor tener un archivo html diferente para cada pantalla. No solo ayudará a mantener el código de la aplicación correctamente y el seguimiento de los cambios, sino que también evitará que dom se vuelva voluminoso a medida que se agreguen páginas cuando sea necesario.
En cuanto a js, puede tener archivos js separados durante el desarrollo y la depuración, pero sugeriría que debería agruparlos y minimizarlos antes de implementar la aplicación y liberarla.

Este es un tema muy subjetivo, pero también se está convirtiendo en una tendencia mucho más grande. Algunos prefieren sitios web de una sola página (aplicaciones móviles). El artículo de wiki aquí hace un gran trabajo al analizar el problema que las aplicaciones de una sola página resuelven.

Específicamente en JQM, las transiciones de una página a la siguiente son mucho más suaves cuando los datos están en la misma página. Este efecto también se puede lograr si obtiene las páginas de uso común agregando el atributo data-prefetch a su enlace.

Sin embargo, puede depender en gran medida del tamaño de su proyecto. La documentación de jQuery Mobile aborda algunos de los problemas de rendimiento de los grandes DOM aquí .

Utilice varias páginas HTML únicas. No necesitas múltiples archivos JS. Cada página debe ser completamente autónoma y capaz de estar sola. Minimizar, combinar y comprimir. Siempre use un script de configuración global en cada página. Números de teléfono, mapas y correos electrónicos

 href="tel:+1[your telephone number here (numbers only)]" href="[standard link to google maps here]" href=mailto:[your email address] 

Valide usando jQuery Valide Use el ThemeRoller. Utilice grupos de botones de opción en lugar de seleccionar menús. Agregar Google Analytics Determine qué estilo de navegación usar. No empieces con el código.