jquery mobile plusieurs fichiers html vs plusieurs page

Dans mon phonegap/jquery mobile app, le multi-modèle de la page est utilisé.
index.html ont toutes les pages de mon application, jusqu'à présent, 6 pages .
Si cette application serait de trop grossir et il s'est avéré être de 19 pages en un seul fichier html, serait-il mauvais?
J'ai créé d'autres app de test utilisé un fichier html pour chaque page. Mais on dirait que chaque fois que la page est modifiée, l'ensemble DOM est chargé à nouveau, est-ce que le droit?

S'il vous plaît dites-moi qui est la structure la mieux pour un grand app

OriginalL'auteur Rodrigo Dias | 2013-01-03

  1. 2

    Votre code sera plus facile à maintenir et mettre à jour si vous cassez chaque page dans son propre fichier html.

    Parfois, vous voulez une animation entre chaque page, ou avoir un formulaire de saisie qui a l'illusion d'être plusieurs pages, mais est en fait plusieurs divs sur la même page. Dans ceux-ci et beaucoup d'autres cas, l'utilisation d'une page a des avantages distincts. Si vous n'avez pas de réel besoin pour ce type de fonctionnalité, cependant, briser votre site.

    Lors de chaque page a son propre fichier html et un changePage se passe, ne chargez tous les fichiers css/js et l'ensemble DOM? Est-il plus lent?
    Comment le partage de code sur plusieurs documents plus faciles à entretenir (je me demandais à propos de vos pensées sur cette question)? À l'aide d'un document unique avec plusieurs pseudo-pages a un grand avantage pour les appareils mobiles de latence. Les téléphones cellulaires peuvent facilement prendre plusieurs secondes à la montée en puissance de leur signal de cellule, basé sur l'activité en cours, afin que le chargement tout à la fois de réduire cette rampe le temps entre les pages. Si vous voulez que votre site à se sentir natif, l'utilisation d'un multi-modèle de page. Si vous voulez convertir un site de bureau dans un mobile, j'aimerais utiliser des modèles de page de sorte que vous n'avez pas à recréer le site.
    Lorsque des pages externes sont chargés de jQuery Mobile, seul le premier data-role="page élément est saisi, de manière subséquente pseudo-pages ne sont pas attrapé, ni quoi que ce soit dans le <head> du document (ou, plus précisément, de rien d'extérieur à la première data-role="page" élément).
    Intéressant, quand une page externe est chargé le contenu est saisi. Dans la transition vers une autre page, il est supprimé de DOM.
    Voici un excellent article qui décrit le phénomène: stevesouders.com/blog/2011/09/21/making-a-mobile-connection. Aussi, je sais que c'est une question ouverte qui n'a pas vraiment d'ajustement S. O. mais alors, est-ce la réponse, pourriez-vous expliquer vos hypothèses (par exemple des formulaires multi-pages ou page-animations est à peu près la même, quelle que soit la méthode)?

    OriginalL'auteur Leng

  2. 27

    Lorsque l'on travaille avec jQuery Mobile première chose à penser est de savoir quel type de modèle doit-je utiliser. J'ai déjà parler un peu sur ce sujet dans un de mes précédents ARTICLES et maintenant, j'ai un besoin de clarifier cette partie d'une histoire un peu plus.

    Pour faire une histoire courte (je ne vais pas parler de la page de l'architecture, tout ce que vous devez savoir peut être trouvé dans le lien précédent). Cette réponse peut également être trouvée sur CETTE emplacement, à être transparent, c'est mon blog personnel.

    Multi page HTML template:

    C'est un modèle où l'on jQuery Mobile de la page est placé à l'intérieur d'une seule page HTML.

    Bonne

    • Plus petit et plus léger, chaque data-role="page" est à l'intérieur d'un fichier HTML distinct et structure de la page est beaucoup plus modulaire.
    • Peut devenir encore plus petit si chaque page HTML est dépouillé de contenu d'en-TÊTE, ou quoi que ce soit qui n'est pas data-role="pšage" div. Malheureusement dans ce cas de repli si le JavaScript n'est pas pris en charge est hors de question.
    • DOM taille est relativement petite, seule la première page est chargé en permanence dans les DOM, à toute autre page sera également chargé dans le DOM, mais en même temps, il sera également supprimé lorsqu'il n'est pas utilisé activement, fondamentalement, chaque fois que vous vous déplacez.
    • Mieux de secours si JavaScript n'est pas supporté. Fonctionne très bien dans les navigateurs de bureau, après un rafraichissement de la page, principalement parce que chaque page HTML possède déjà un contenu d'en-TÊTE. Cela permet également à votre application à se comporter comme d'habitude application web principalement parce que l'AJAX peut être désactivée.

    ...vs les mauvais

    • Consomme plus de bande passante que chaque page de navigation génère une nouvelle demande. Lors du déplacement de chaque page sera définitivement supprimé de la DOM, sauf si l'encaissement est allumé.
    • De naviguer de nouveau à un déjà chargé la page sera de nouveau générer une nouvelle demande.
    • Chargement Initial de la page est rapide mais les chargements des pages suivantes sont plus lent que dans les pages d'un modèle. Cela peut provoquer des problèmes lors des transitions de page, d'autant plus sur des appareils mobiles. Les navigateurs de bureau n'ont pas ce problème.
    • Beaucoup plus approprié pour les navigateurs de bureau, puis les navigateurs mobiles. Convient également pour des applications plus importantes, encore une fois c'est un problème pour les appareils mobiles.
    • Pageinit événement sera déclenché à chaque fois que la page est visitée (pour ceux qui ne connaissent pas cet événement qui remplace le document prêt à jQuery Mobile et donc il doit s'exécuter qu'une seule fois), ce qui provoque par conséquent des problèmes avec plusieurs cas de liaison.
    • Ne pouvez pas utiliser plus d'un data-role="page" à l'intérieur de toute période subséquente de la page HTML, seuls les premiers, on peut avoir plus d'une page.

    Multipage modèle

    C'est un modèle où l'un ou plusieurs de jQuery Mobile pages font partie d'un seul fichier HTML.

    Bonne

    • Depuis toutes les pages sont déjà chargés, pas de demandes supplémentaires sont générées pour la navigation entre les pages.
    • La première charge est plus lente que la taille du fichier est plus grande, mais à la suite de la page de navigation est rapide, donc de faire des transitions beaucoup plus lisse. Presque native comme bon, l'accent sur presque.
    • Adapté pour les relativement petites applications et des situations où vous savez les capacités de votre cible plates-formes, y compris la présence de la prise en charge de JavaScript, ce qui en fait une excellente solution pour une application hybride. Il fonctionne beaucoup mieux que Phonegap application multi modèle HTML.
    • La "page" data-role élément est nécessaire.

    ...vs les mauvais

    • Plus lourd. Toutes les pages sont dans un seul fichier html. Grandes applications avec de nombreuses pages d'augmenter les DOM taille.
    • Besoins de prise en charge de JavaScript Ajax Navigation est utilisé.
    • Plusieurs contenants de page sont présents, et seul le premier est illustré lors du chargement de la page.
    • À l'aide de données ajax="false" pour les pages internes ignore les données de la transition de l'attribut, par des diapos par défaut est utilisé
    • Fortement stylisé pages peut devenir lent sur des appareils mobiles.

    En fin de compte, le secret d'une bonne jQuery Mobile de la page de l'architecture est quelque part au milieu.

    Quelques commentaires: 1) une Seule page les modèles ne sont pas des plus légers, ils sont plus lourds, puisque vous devez télécharger un tas de code HTML que vous ne verrez jamais à chaque fois que vous visitez une page. 2) Vous pouvez désactiver AJAX navigation à l'aide de la méthode à l'échelle mondiale avant de jQuery Mobile initialise. *****)** La chose la plus importante est que le blog vous a posté un lien vers est trop vieux pour être pertinent. Le blog a presque un an maintenant, et pour ce cadre particulier, qui est une longue période, c'est beaucoup de maturité dans la dernière année. Voir mon commentaire sur Leng réponse sur signal de cellule, c'est une considération très importante.
    Jasper, vos définitions sont inversés, voir JQuery mobile docs. "Une seule page" désigne une page par fichier HTML tout en "multi-Pages" signifie multi-pages par HTML. À l'aide de ces définitions standard, Gajotres a le bon points de balle. Le blog il énumère peut-être vieux, mais il est toujours d'actualité.
    Les définitions que vous avez posté votre commentaire sont les mêmes que ceux que j'ai utilisé. 1) Si vous avez 5 unique de modèles de page, ils vont peser plus ensemble que si vous avez juste un multi-modèle de page avec 5 pseudo-pages. C'est parce que tout à l'extérieur de la première data-role="page" est transféré sur le réseau cependant pas utilisé (dépouillé par jQM).
    À l'aide de Phonegap, j'ai 2 modèles avec 5 pages de la première, de 8 pages, le deuxième en 2 fichiers html index.html, inputs.html. Lors de la navigation en arrière et en avant ce 2 pages principales, je reçois Phonegap erreurs que parfois mon objet de base de données n'obtient pas initialisé dans le temps et oui, je suis de liaison à ondeviceready...Donc si vous êtes à l'aide de Phonegap, de tout mettre dans un seul fichier.
    Un multipage fichier html a un grand navigateur de l'histoire limitation, si vous avez des données récursives / navigation. Par exemple, la modification d'un arbre ou d'une liste de données de la structure et de l'utilisation d'une seule page pour modifier un nœud #pageNode. Sur cette page, vous pouvez traverser le nœud à la charge d'un nœud enfant, mais la page reste idential. Pour cette structure, nous utilisons une approche hybride à l'aide d'un paramètre de chaîne de requête à idenfity nœud actuel. De cette façon, nous préserver de l'histoire.

    OriginalL'auteur Gajotres