Le retour de la page jQuery Mobile ne nécessite pas re-get

Le retour de la page jQuery Mobile ne nécessite pas re-get_jquery

WBOY

Libérer： 2016-05-16 15:04:03

original

1157 Les gens l'ont consulté

jQuery Mobile est un framework de développement front-end permettant de créer des applications Web mobiles.

jQuery Mobile peut être utilisé sur les smartphones et les tablettes.

jQuery Mobile utilise des scripts minimaux HTML5 et CSS3 pour mettre en page les pages Web.

Récemment, le projet d'application Web de l'entreprise m'a fait l'honneur de continuer à contacter et à apprendre jQuery Mobile. Il s'agit en effet d'une très bonne bibliothèque de développement mobile qui aide les ingénieurs doués en développement Web à se lancer rapidement et à créer leurs propres applications mobiles. Mais au cours des deux derniers jours, j'ai rencontré un problème qui m'a fait vérifier beaucoup d'informations mais je n'ai pas pu trouver de bonne solution. Au final, j'ai été obligé de lire le code source de jQuery Mobile et d'écrire une extension pour le résoudre. . S'il vous plaît laissez-moi vous expliquer ci-dessous.

Description du problème

Supposons qu'il y ait trois pages dans le projet, à savoir main.html, test1.html, test2.html (ci-après dénommées respectivement main, test1, test2), où la page principale contient un lien vers la page test1 (c'est-à-dire une balise), test1 a un lien avec l'attribut data-rel="back" et un lien vers test2, et test2 n'a qu'un seul lien avec l'attribut data-rel="back". Après les transferts principaux vers test1, cliquez sur le lien retour pour revenir au principal (équivalent à cliquer sur le bouton de retour du navigateur). Il n'est pas nécessaire de renvoyer la demande d'obtention, mais lorsque test1 est transféré vers test2, lorsque vous cliquez sur le lien retour sur test2 ; page et que vous souhaitez revenir à test1, il renverra une requête get. Le problème causé par cela est que toutes les opérations effectuées par test1 seront invalides après le retour de test2. Par exemple, A est une page de liste paginée. Si vous accédez à la deuxième page puis redirigez vers B, lorsque vous revenez à A, vous ne pourrez pas passer à la deuxième page.

Analyse des causes

J'ai d'abord utilisé Firebug pour examiner la structure du code HTML et j'ai découvert que jQuery Mobile ajoutait main et test1 à la structure de la page. Lorsqu'il passe de test1 à test2, test1 sera automatiquement supprimé, de sorte que l'arborescence dom. ne contient que main et test2, donc lorsque test2 renvoie test1, une requête get sera envoyée. Cela signifie-t-il que tant que les pages historiques peuvent être mises en cache dans le dom (tout comme main et test1), ce problème peut être résolu.

Résoudre le problème

Après quelques recherches, j'ai vu une description de "Mise en cache des pages dans le DOM" sur le site officiel de jQuery Mobile :

Mise en cache des pages dans le DOM
Pour conserver toutes les pages précédemment visitées dans le DOM, définissez l'option domCache sur le plugin de page sur true, comme ceci :
$.mobile.page.prototype.options.domCache = true;
Alternativement, pour mettre en cache uniquement une page particulière, vous pouvez ajouter l'attribut data-dom-cache="true" au conteneur de la page :

Vous pouvez également mettre en cache une page par programme comme ceci :
pageContainerElement.page({ domCache: true });
L'inconvénient de la mise en cache DOM est que le DOM peut devenir très volumineux, entraînant des ralentissements et des problèmes de mémoire sur certains appareils. Si vous activez la mise en cache DOM, veillez à gérer le DOM vous-même et testez minutieusement sur une gamme d'appareils.

Vous pouvez voir sur cette citation que ces trois méthodes peuvent mettre la page en cache dans le dom, j'ai donc utilisé la deuxième méthode, qui consiste à ajouter data-dom-cache=” à l'attribut div true" de la page. mais les deux problèmes suivants sont survenus :

1. Comme le montre la figure ci-dessous, lorsque mon chemin d'accès est main->test1->test2->test1 (test2 est renvoyé par history.back()), vous pouvez voir avec Firebug que test2 est Existe toujours dans le DOM, le résultat est tel que décrit dans la partie rouge : le DOM va devenir très volumineux, entraînant un ralentissement des pages et des erreurs de mémoire sur certains appareils.

2. Lorsque j'ai une telle page, elle affiche un contenu différent via différents paramètres, et il y a un script js sur la page qui effectuera un certain traitement sur les éléments de la page, et notre méthode courante consiste à utiliser l'identifiant. Pour obtenir l'élément cible, puisque nous utilisons le cache pour mettre la page en cache, cela provoquera des événements js ou une confusion des opérations. Par exemple, ici, j'ai ajouté une page test1_1. Son contenu est presque le même que celui de test1. Ils ont tous deux des div avec le même identifiant et des boutons avec le même traitement d'événement. Ce que fait cet événement est d'ajouter du contenu à ce div. path est principal ->test1->test1_1, cliquez sur le bouton sur test1_1, vous constaterez que cet événement ne semble pas être déclenché. En fait, il a été déclenché, mais le contenu est ajouté au div dans test1, comme le montre la figure ci-dessous

Jadi untuk kebanyakan aplikasi semasa, penyelesaian ini tidak digalakkan melainkan anda menguruskan sendiri kitaran hayat halaman dalam DOM.

Pelan pengoptimuman

Melalui percubaan di atas, saya juga tahu bahawa untuk memenuhi keperluan saya, saya hanya boleh menguruskan kitaran hayat halaman dalam DOM sendiri. Kemudian ia melibatkan soalan: Bilakah halaman tersebut akan tamat tempoh (iaitu, dipadamkan daripada dom)? Mengikut keperluan saya, apabila kembali dari test2 ke test1, test2 harus dipadamkan dari dom Begitu juga, apabila kembali ke utama dari test1, test1 harus dipadamkan dari dom. Jika anda menavigasi dari utama ke test1 sekali lagi, anda perlu memulakan permintaan dapatkan, saya fikir ini adalah munasabah kerana pengguna tidak akan berfikir bahawa mengklik pautan ke halaman baharu memerlukan caching. Jadi saya harus memadamkan sejarah selepas halaman sebelum atau selepas ia dipaparkan, jadi saya melakukan operasi pemadaman semasa pagebeforeshow dan pageshow, iaitu skrip berikut (borang pemalam):

(function($, undefined) {
$.fn.subpage = function(options) {
$(document).bind(
"pagebeforeshow",
function() {
var forword = $.mobile.urlHistory.getNext();
if (forword) {
var dataUrl = forword.url;
var forwordPage=$.mobile.pageContainer
.children(":jqmData(url='" + dataUrl + "')");
if(forwordPage){
forwordPage.remove();
}
}
$.mobile.urlHistory.clearForward();
});
};
$(document).bind("pagecreate create", function(e) {
$(":jqmData(role='page')", e.target).subpage();
});
})(jQuery);

Copier après la connexion

Hasilnya tidak produktif Apabila halaman dikembalikan, ralat skrip js berlaku, seperti yang ditunjukkan di bawah:

Jadi apa sebabnya? Jika kejadian ini tidak ditangani, maka di manakah ia harus ditangani? Jadi saya teliti kod sumber jQuery Mobile dan menemui perenggan berikut:

transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function() {
removeActiveLinkClass();
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
if ( settings.duplicateCachedPage ) {
settings.duplicateCachedPage.remove();
}
//remove initial build class (only present on first pageshow)
$html.removeClass( "ui-mobile-rendering" );
releasePageTransitionLock();
// Let listeners know we're all done changing the current page.
mpc.trigger( "pagechange", triggerData );
});

Copier après la connexion

Selepas halaman ditukar, acara pagechange akan dicetuskan, jadi saya menukar pagebeforeshow ke pagechange Semuanya berjalan seperti yang dijangkakan dan saya akhirnya selesai.

Ringkasan

Apabila menggunakan pemalam ini, sila beri perhatian kepada perkara berikut:

1. Anda mesti memetik fail skrip mudah alih jquery dan jquery sebelum memetik skrip

2. Data-dom-cache="true" mesti ditambahkan pada halaman.

Di atas ialah arahan berkaitan yang diperkenalkan oleh editor untuk mengembalikan halaman jQuery Mobile tanpa mendapatkan semula.