jQuery Mobile 페이지 반환에는 re-get_jquery가 필요하지 않습니다.

이 인용문에서 이 세 가지 방법이 페이지를 DOM에 캐시할 수 있다는 것을 알 수 있으므로 두 번째 방법을 사용했습니다. 즉 페이지의 true" 속성에 data-dom-cache="를 추가하는 것입니다. 그런데 다음 두 가지 문제가 발생했습니다.

1. 아래 그림과 같이 내 액세스 경로가 main->test1->test2->test1(test2가 histore.back()에 의해 반환됨)인 경우 test2가 여전히 DOM에 존재하며 결과는 빨간색 부분에 설명된 대로입니다. DOM이 매우 커져서 일부 장치에서 페이지 속도가 느려지고 메모리 오류가 발생합니다.

2. 이러한 페이지가 있으면 다양한 매개변수를 통해 다양한 콘텐츠가 표시되며 페이지에 있는 요소에 대해 일부 처리를 수행하는 js 스크립트가 있으며 일반적인 방법은 id를 사용하는 것입니다. 대상 요소를 얻기 위해 캐시를 사용하여 페이지를 캐시하므로 js 이벤트 또는 작업 혼란이 발생합니다. 예를 들어 여기에 test1_1 페이지를 추가했는데 그 내용은 test1과 거의 같습니다. 둘 다 동일한 ID를 가진 div와 동일한 이벤트 처리를 포함하는 버튼을 가지고 있습니다. 경로는 main ->test1->test1_1이고, test1_1의 버튼을 클릭하면 이 이벤트가 트리거되지 않은 것처럼 보이지만 실제로는 트리거되었지만 콘텐츠가 test1의 div에 추가됩니다. 아래 그림과 같이

따라서 대부분의 최신 애플리케이션의 경우 DOM에서 페이지의 수명 주기를 직접 관리하지 않는 한 이 솔루션은 권장되지 않습니다.

최적화 계획

위 실험을 통해 나는 내 요구 사항을 충족하기 위해 DOM에서 페이지의 수명 주기만 직접 관리할 수 있다는 것도 알게 되었습니다. 그런 다음 다음 질문이 포함됩니다. 페이지는 언제 만료됩니까(즉, DOM에서 삭제됩니까?) 내 필요에 따라 test2에서 test1로 돌아갈 때 test2를 dom에서 삭제해야 합니다. 마찬가지로 test1에서 main으로 돌아올 때 test1을 dom에서 삭제해야 합니다. 기본에서 test1로 다시 이동하는 경우 get 요청을 시작해야 합니다. 사용자가 새 페이지에 대한 링크를 클릭하면 캐싱이 필요하다고 생각하지 않기 때문에 이것이 합리적이라고 생각합니다. 그래서 페이지가 표시되기 전후의 기록을 삭제해야 하므로 pagebeforeshow 및 pageshow 중에 삭제 작업을 했습니다. 즉, 다음 스크립트(플러그인 형식)를 했습니다.

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

결과는 비생산적이었습니다. 페이지가 반환되었을 때 아래와 같이 js 스크립트 오류가 발생했습니다.

그럼 이유가 뭔가요? 이 사건이 처리되지 않으면 어디서 처리해야 합니까? 그래서 jQuery Mobile 소스 코드를 주의 깊게 연구한 결과 다음과 같은 단락을 발견했습니다.

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

페이지 전환 후 페이지 변경 이벤트가 발생하므로 페이지 전 쇼를 페이지 변경으로 변경했습니다. 모든 것이 예상대로 실행되었으며 마침내 완료되었습니다.

요약

이 플러그인을 사용할 때 다음 사항에 주의하세요.

1. 스크립트를 인용하기 전에 jquery 및 jquery 모바일 스크립트 파일을 인용해야 합니다.

2. Data-dom-cache="true"를 페이지에 추가해야 합니다.

위는 jQuery Mobile 페이지를 다시 가져오지 않고 반환하기 위해 편집자가 소개한 관련 지침입니다. 모든 분들께 도움이 되길 바랍니다!