jQuery Mobileアプリケーションを構成するベストプラクティスは何ですか？

Question

私はarticleを見つけました。しかし、私の主な質問は、各画面に別々の.htmlファイルが必要なのですか？私ははいと思っていますが、私は全会一致の投票を希望します。また、それは別にJSファイルのために行くのですか？

編集：JQMアプリは、基本的にユーザーと役割を管理します。

Answer 1

私たちは生産現場のjQMサイトを運営しています。他のサイトには同意しないかもしれませんが、非常に大きなサイトで動作することがわかりました。

あなた（あなたのサイトが小さい場合を除き）あなたは開始時にすべてのあなたのHTMLを読み込んでいるので、

1. 使用する複数の単一のHTMLページには、大規模なマルチページのテンプレートがjQMのAJAXロードの利点を破ります間違いなくajaxの読み込みを使用したい場合、jQMはあなたのコード内でコードを引き出します<div data-role="page">しかし、これはあなたのJSを以下のように複雑にします

2. 複数のJSファイルは必要ありませんが、 2つのことを行うことでこれを達成します：1.我々はonリスナをドキュメントルートに置き、pageinit/pageshowイベントを待ち受ける。ページが読み込まれるたびにこれらがトリガーされ、現在のページへの便利な参照があり、ページ上のattrを使用して、そのページがどのページであるかを判断できます。 2.すべてのJSをインクルードして（うまくいけばPHP、CFなどを使用しています）、これをすべてのページに配置します。ユーザーがモバイルサイトを参照するエントリポイントに関係なく、プラス、それはJSので、風をデバッグ可能 - すべてのコードが

をロードした欠点は、すべてのJSは、我々はそれは大したことない見つけ、そしてそれは本当に心配だ場合RequireJSに見て最初にロードされますが、縮小されていることですデバッガとブレークポイントを簡単に使用できます。各ページに動的に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（モバイルアプリ）を好む人もいます。ここのwiki記事は、単一ページのアプリケーションが解決する問題について議論しています。

特に、JQMでは、データが同じページにある場合、ページ間の遷移がはるかにスムーズになります。この影響は、リンクにdata-prefetch属性を追加してよく使用されるページをプリフェッチする場合にも達成できます。

ただし、プロジェクトのサイズによって大きく異なる場合があります。 jQuery Mobileのドキュメントでは、パフォーマンス問題のいくつかについて触れています（large DOMs here）。

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アナリティクスを追加する使用するナビゲーションスタイルを決定します。コードで始まらないでください。