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

Question

He encontrado article que se deshace de esto. Pero mi pregunta principal es ¿necesito un archivo .html por 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 administradores y roles.

Answer 1

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

1. uso de múltiples páginas HTML individuales, una plantilla de varias páginas gran derrota a los beneficios de la carga ajax de JQM ya que estás cargando todo el código HTML en el inicio (a menos que su sitio es pequeño)

2. Usted definitivamente desea utilizar ajax carga, JQM sólo lo hace en el código en su <div data-role="page"> pero esto complica sus JS ver más abajo

3. no necesita varios archivos JS, pero sí es necesario para cargar todas sus JS en el inicio, logramos esto haciendo dos cosas: 1. ponemos un oyente on en la raíz del documento y escuchamos los eventos pageinit/pageshow. Cada vez que se carga una página estos se desencadenan, también tiene una referencia útil para la página actual, y puede usar un atributo en la página para determinar qué página era. 2. Tenga todas las JS en una inclusión de algún tipo (con suerte está usando PHP, CF o algo así) y ponga esto en cada página, de esa manera no importa con qué punto de entrada un usuario navegue a su sitio móvil, obtienen todo el código cargado

la desventaja es que toda la JS se carga al principio, pero minified nos encontramos con que no es gran cosa, y si es realmente una preocupación mirar en RequireJS - además de que hace que la depuración de una brisa ya que la JS está todo allí, podemos usar fácilmente el depurador y colocar puntos de interrupción. Si carga JS dinámicamente en cada página, aumenta los datos que necesita devolver en cada transición de página y tiene fealdad porque recargó JS redundante y es difícil depurar JS dinámico.

$(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 

Answer 2

Creo que es mejor tener un archivo html diferente para cada pantalla. No solo ayudará a mantener el código de la aplicación de forma adecuada y a rastrear los cambios, sino que también evitará que el contenido se vuelva voluminoso ya que las páginas se agregarán cuando sea necesario.
En cuanto a js, puede tener archivos js separados durante el desarrollo y la depuración, pero le sugiero que los agrupe y minimice antes de implementar la aplicación y liberarla.

Answer 3

Este es un tema muy subjetivo, pero también se está convirtiendo en una tendencia mucho más grande. Algunos prefieren single page web sites (aplicaciones móviles). El artículo de wiki aquí hace un excelente trabajo al discutir 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 capta previamente 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 large DOMs here.

Answer 4

Utilice varias páginas HTML individuales. No necesita múltiples archivos JS. Cada página debe ser completamente autónoma y capaz de estar sola. Minificar, combinar y comprimir.Utilice siempre una secuencia de comandos 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] 

Validar utilizando jQuery Validar el uso ThemeRoller. Use 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.