jQuery Mobile 애플리케이션을 구성하는 가장 좋은 방법은 무엇입니까?

Question

나는 이것을 극복 한 article을 발견했습니다. 하지만 내 주요 질문은 각 화면마다 별도의 .html 파일이 필요합니까? 나는 그렇다고 생각하지만 만장일치의 투표를 원합니다. 또한, 그것은 별도의 JS 파일에 대한 이동합니까?

편집 : JQM 앱은 기본적으로 사용자와 역할을 관리합니다.

Answer 1

우리는 생산 방식의 jQM 사이트를 운영하고 있습니다. 그렇기 때문에 다른 사이트에서는 동의하지 않을 수 있지만 매우 큰 사이트에서 작동하는 것으로 나타났습니다.

당신 (귀하의 사이트가 작은 경우를 제외하고) 당신이 시작할 때 모든 HTML을로드하고 있기 때문에

1. 를 사용하여 여러 하나의 HTML 페이지, 대형 멀티 페이지 템플릿은 JQM의 아약스로드의 혜택을 패배 확실히 아약스 로딩을 사용하려면, JQM은 당신의 <div data-role="page">의 코드에 끌어하지만 이것이 당신의 JS가

2. 여러 JS 파일이 필요하지 않습니다 아래 참조 복잡하게,하지만 당신은 시작에 모든 JS를로드 할 필요합니까, 우리는 두 가지를 수행하여 이것을 수행합니다 : 1. 우리는 on 청취자를 문서 루트에두고 pageinit/pageshow 이벤트를 수신합니다. 페이지가로드 될 때마다 이러한 페이지가 트리거되고 현재 페이지를 쉽게 참조 할 수 있으며 페이지의 attr을 사용하여 페이지가 무엇인지 판별 할 수 있습니다. 2. 모든 JS가 PHP (또는 CF 등)를 사용하고 있습니다. (사용자가 PHP, CF 등을 사용하고 있습니다.) 사용자가 모바일 사이트를 탐색 할 때 어떤 진입 점이 있더라도 모든 페이지에이 코드를 넣으십시오. 모든 코드는

단점은 모든 JS가 처음로드,하지만 우리가 별거 아니, 그것은이 문제가 정말 경우 RequireJS 들여다 찾을 축소 된 것입니다로드 - 플러스는 JS 이후 바람을 디버깅합니다 거기에 모두 우리가 쉽게 디버거와 장소 중단 점을 사용할 수 있습니다. 각 페이지마다 동적으로 JS를로드하는 경우 각 페이지 전환시 반환해야하는 데이터가 증가하고 중복 된 JS를 다시로드하고 동적 JS를 디버그하기가 쉽지 않으므로 추함이 발생합니다.

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){ 

    var pageType = $(this).data('pagetype'); 

    //handle pageinit/pageshow (oEvent.type) for each pageType 

Answer 2

각 화면마다 다른 HTML 파일을 가지고 있다고 생각합니다. 앱 코드를 올바르게 관리하고 변경 사항을 추적하는 데 도움이 될뿐만 아니라 필요한 경우 페이지가 추가 될 때 DOM이 부피가 커지는 것을 방지합니다.
js에 관해서는 개발 및 디버깅 중에 별도의 js 파일을 가질 수 있지만 앱을 배포하고 릴리스하기 전에이를 묶어서 축소시켜야한다고 제안합니다.

Answer 3

이것은 매우 주관적인 주제이지만 훨씬 더 큰 경향이되고 있습니다. 일부는 single page web sites (모바일 앱)을 선호합니다. 여기에있는 위키 문서는 단일 페이지 앱이 해결하는 문제를 논의하는 훌륭한 작업입니다.

특히 JQM에서 한 페이지에서 다음 페이지로의 전환은 데이터가 동일한 페이지에있을 때 훨씬 부드럽게 나타납니다. 이 영향은 링크에 data-prefetch 속성을 추가하여 자주 사용하는 페이지를 미리 가져 오는 경우에도 얻을 수 있습니다.

그러나 프로젝트 크기에 따라 크게 다를 수 있습니다. large DOMs here의 성능 문제 중 일부는 jQuery Mobile 설명서를 참조하십시오.

Answer 4

여러 개의 단일 HTML 페이지를 사용하십시오. 여러 개의 JS 파일이 필요하지 않습니다. 각 페이지는 완전히 독립적이어야하며 단독으로 서 있어야합니다. 축소, 결합 및 압축.항상 모든 페이지에서 글로벌 구성 스크립트를 사용하십시오. 전화 번호,지도 및 전자 메일

href="tel:+1[your telephone number here (numbers only)]" 
href="[standard link to google maps here]" 
href=mailto:[your email address] 

유효성 검사 jQuery를 사용하여 유효성 검사 ThemeRoller를 사용하십시오. 선택 메뉴 대신 라디오 버튼 그룹을 사용하십시오. Google 웹 로그 분석 추가 사용할 탐색 스타일을 결정하십시오. 코드로 시작하지 마십시오.