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

jQuery Mobile은 모바일 웹 애플리케이션을 만들기 위한 프런트엔드 개발 프레임워크입니다.

jQuery Mobile은 스마트폰과 태블릿에서 사용할 수 있습니다.

jQuery Mobile은 HTML5 및 CSS3 최소 스크립트를 사용하여 웹 페이지를 레이아웃합니다.

최근 회사의 웹 앱 프로젝트를 통해 jQuery Mobile에 계속 연락하고 배울 수 있는 영광을 얻었습니다. 이것은 실제로 웹 개발에 능숙한 엔지니어가 신속하게 시작하고 자신의 모바일 애플리케이션을 구축하는 데 도움이 되는 매우 훌륭한 모바일 개발 라이브러리입니다. 그런데 지난 이틀 동안 많은 정보를 확인했지만 좋은 해결책을 찾을 수 없는 문제가 발생했습니다. 결국에는 jQuery Mobile의 소스 코드를 읽고 이를 해결하기 위한 확장 기능을 작성해야 했습니다. . 아래에서 설명해 드리겠습니다.

문제 설명

프로젝트에 main.html, test1.html, test2.html(이하 각각 main, test1, test2라고 함)이라는 세 개의 페이지가 있고, 메인 페이지에는 test1 페이지에 대한 링크가 포함되어 있다고 가정합니다(예: 태그), test1에는 data-rel="back" 속성이 있는 링크와 test2에 대한 링크가 있고, test2에는 data-rel="back" 속성이 있는 링크가 하나만 있습니다. 메인이 test1로 전송된 후 뒤로 링크를 클릭하여 메인으로 돌아갑니다(브라우저의 돌아가기 버튼을 클릭하는 것과 동일). get 요청을 다시 보낼 필요는 없지만 test1이 test2로 전송되면 test2에서 뒤로 링크를 클릭합니다. 페이지에서 test1로 돌아가고 싶으면 get 요청을 다시 보냅니다. 이로 인해 발생하는 문제는 test1이 수행한 모든 작업이 test2가 반환된 후에 유효하지 않게 된다는 것입니다. 예를 들어 A는 페이지가 매겨진 목록 페이지입니다. 두 번째 페이지로 이동한 후 B로 리디렉션한 다음 A로 돌아오면 두 번째 페이지로 이동할 수 없습니다.

원인 분석

먼저 Firebug를 사용하여 html의 구조를 살펴보았는데, jQuery Mobile이 test1에서 test2로 전환하면 test1이 자동으로 삭제되므로 dom 트리가 페이지 구조에 추가되는 것을 발견했습니다. main과 test2만 포함하므로 test2가 test1을 반환하면 get 요청이 전송됩니다. 이는 기록 페이지가 DOM(main 및 test1과 마찬가지로)에 캐시될 수 있는 한 이 문제가 해결될 수 있음을 의미합니까?

문제 해결

몇번의 검색 끝에 jQuery Mobile 공식 웹사이트에서 "캐싱 페이지 in the DOM"에 대한 설명을 보았습니다.

DOM의 페이지 캐싱
이전에 방문한 모든 페이지를 DOM에 유지하려면 다음과 같이 페이지 플러그인의 domCache 옵션을 true로 설정하세요.
$.mobile.page.prototype.options.domCache = true;
또는 특정 페이지만 캐시하려면 페이지 컨테이너에 data-dom-cache="true" 속성을 추가할 수 있습니다.
a1dbf17f7da170618838a4bbf99f2b2d
다음과 같이 프로그래밍 방식으로 페이지를 캐시할 수도 있습니다.
pageContainerElement.page({ domCache: true });
DOM 캐싱의 단점은 DOM이 매우 커져서 일부 기기에서 속도가 느려지고 메모리 문제가 발생할 수 있다는 것입니다. DOM 캐싱을 활성화하는 경우 DOM을 직접 관리하고 다양한 기기에서 철저하게 테스트하세요.

이 인용문에서 이 세 가지 방법이 페이지를 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 페이지를 다시 가져오지 않고 반환하기 위해 편집자가 소개한 관련 지침입니다. 모든 분들께 도움이 되길 바랍니다!