jQuery Mobile page return does not require re-get_jquery

You can see from this quotation that these three methods can cache the page into the dom, so I used the second method, which is to add data-dom-cache=” to the div of the page. true" attribute, but the following two problems occurred:

1. As shown in the figure below, when my access path is main->test1->test2->test1 (test2 is returned by history.back()), you can see with firebug that test2 is still Exists in the DOM, the result is as described in the red part: the DOM will become very large, resulting in page slowdown and memory errors on some devices.

2. When I have such a page, it displays different content through different parameters, and there is a js script on the page that will do some processing on the elements on the page, and our common way is to use id. To obtain the target element, since we use cache to cache the page, it will cause js events or operation confusion. For example, here I added a test1_1 page. Its content is almost the same as test1. They both have divs with the same ID and buttons with the same event processing. What this event does is to add content to this div. When the access path is main ->test1->test1_1, click the button on test1_1, you will find that this event does not seem to be triggered. In fact, it has been triggered, but the content is added to the div in test1, as shown in the figure below

So for most current applications, this solution is not advisable unless you manage the life cycle of the page in the DOM yourself.

Optimization plan

Through the above experiment, I also know that to meet my needs, I can only manage the life cycle of the page in the DOM myself. Then it involves a question: When will the page expire (that is, be deleted from the dom)? According to my needs, when returning from test2 to test1, test2 should be deleted from the dom. Similarly, when returning to main from test1, test1 should be deleted from the dom. If you navigate from main to test1 again, you have to initiate a get request. I think this is reasonable because the user will not think that clicking the link to a new page requires caching. So I should delete the history after the page before or after it is displayed, so I did the deletion operation during pagebeforeshow and pageshow, that is, the following script (plug-in form):

(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); 

The result was counterproductive. When the page was returned, a js script error occurred, as shown below:

So what’s the reason? If this incident is not handled, then where should it be handled? So I carefully studied the jQuery Mobile source code and found the following paragraph:

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 );
}); 

After the page is switched, the pagechange event will be triggered, so I changed pagebeforeshow to pagechange. Everything ran as expected and there were no errors. Finally, I was done.

Summary

When using this plug-in, please pay attention to the following points:

1. You must quote jquery and jquery mobile script files before quoting the script;

2. Data-dom-cache="true" must be added to the page.

The above is the relevant instructions introduced by the editor to return jQuery Mobile pages without re-getting. I hope it will be helpful to everyone!