3

私のサイトでは、ブラウザの進むボタンの選択中に pageinit が呼び出されています。これは正しいです。これは、登録されたイベントを 2 回バインドしませんか。

First.html

<!DOCTYPE HTML>
<html>
    
    <head>
        <title>Test1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="../scripts/common.js"></script>
    </head>
    
    <body>
        <div data-role="page" id="first">
             <h1 style="background: red">Swipe 1</h1>
         <a href="second.html">Click</a>
        </div>
    </body>

</html>

Second.html

<!DOCTYPE html>
<html>

    <head>
        <title>Test2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="../scripts/common.js"></script>
    </head>

    <body>
        <div data-role="page" id="second">
            <div data-role="header">
                <h1>jQuery Mobile</h1>
            </div>
            <div data-role="content">   
              <a href="third.html">Click</a>
            </div>
            <div data-role="footer">
                <h4>www.jboss.org/developer</h4>
            </div>
        </div>
    </body>

</html>

third.html

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Mobile Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="third">
            <div data-role="header">
                    <h1>jQuery Mobile</h1> 
            </div>
            <div data-role="content">
                <ul id="listOfItems" data-role="listview" data-inset="true" data-filter="true">
                    <li><a href="">One</a>
                    </li>
                    <li><a href="">Two</a>
                    </li>
                    <li><a href="">Three</a>
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>www.jboss.org/developer</h4> 
            </div>
        </div>
    </body>

</html>

common.js

$(document).on('pageinit', "#first", function (event) {
    console.log("first");
});


$(document).on('pageinit', "#second", function (event) {
    console.log("second");
});


$(document).on('pageinit', "#third", function (event) {
    console.log("third");
});

上記のコードを確認して、毎回 pageinit が呼び出される理由を教えてください。

4

2 に答える 2

5

はじめに

ページ イベントについて説明する前に、jQuery Mobile ページ アーキテクチャについて説明する必要があります。jQuery Mobile アプリケーションは、複数ページのテンプレートまたは複数のHTMLページという 2 つの異なる方法で作成できます。

さまざまな jQuery Mobile ページ アーキテクチャ

マルチページ テンプレート

この種のテンプレートでは、すべてが にロードされますDOM。あるページから別の前のページへのユーザー遷移が何回行われても、DOM. これは、ページ間のスムーズな遷移には最適なソリューションですが、DOM. これは通常、デスクトップ ブラウザーでは問題になりませんが、モバイル ブラウザーでは、特にロー エンドのデバイスで問題が発生する可能性があります。

マルチ HTML テンプレート

このテンプレート ソリューションには、複数のHTMLページが必要です。これは、大規模なモバイル アプリの構築に最適なオプションですが、落とし穴があります。複数ページのテンプレートとは異なり、ページにアクセスするたびに に読み込まれますDOM。低速のデバイスでは、特に宛先ページが大きい場合、遷移の問題が発生する可能性があります。これは、プライマリ ページがロードされてpagecreateイベントがトリガーされた後に、jQuery Mobile がターゲット ページをバックグラウンドでロードするページ プリフェッチで解決できます。BUT別の大きな問題があり、これは jQuery Mobile のドキュメントでは十分に説明されていません。ページ遷移中、前のページは から削除されますDOM。これは、 内にコンテンツが蓄積するのを防ぐために行われDOMます。これは、次の別の属性を使用して防止することもできます。

data-dom-cache="true"

またはグローバルパラメータを初期化することによって：

$.mobile.page.prototype.options.domCache = true;

ページ アーキテクチャがページ イベントに与える影響

jQuery Mobile にはいくつかのページ イベントがあります (詳細については、こちらまたはこちらを参照してください)。これらは、完全なページのロード / 遷移プロセスをカバーするためにここにいます。jQuery Mobile の上級ユーザーpageinitは、jQuery の従来のイベントの代わりにイベントを使用することを知っていますdocument ready。と同様document readyにpageinit、ページの初期化中に 1 回だけトリガーします。

しかし、キャッチがあり、pageinit内のページの初期化中に 1 回だけトリガーされますDOM。DOMページが(マルチ HTML テンプレートで)から削除され、再度読み込まれると、再びpageinitトリガーされます。

簡単に言えば、各ページのDOM初期化により、新しいページ イベントの初期化がトリガーされます。前述のように、これはページ キャッシングで防ぐことができます。

ページキャッシングの影響

これは開発者にとってほとんどタブーなテーマjQuery Mobileなので、何か言わせてください。ページのキャッシュを恐れる必要はありません。信じてください。jQuery Mobile は堅牢なフレームワークであり、通常、利用可能なすべてのプラットフォームでうまく機能します。jQuery Mobile に関連する膨大な数の苦情は、その大きな DOM サイズ要件に直接関係していないため、キャッシングについて心配する必要はありません。

DOMそれは、酔った船乗りのように満たす必要があるという意味ではありません. すべてのアプリ開発は事前に計画する必要があります。頻繁に使用されるページは、永続的に DOM 内にとどまる必要があります。他のすべてはアドホックに使用する必要があります (必要に応じてロード/削除)。

于 2013-06-07T14:04:45.713 に答える
2

編集済み:
複数ページのテンプレート アプローチ (すべてのページが含まれる単一の html) を使用するとpageinit、ページが DOM に読み込まれ、ページ間の遷移時にそこにとどまるため、一度起動されるようです。

ただし、複数のページを使用して Ajax をナビゲートするとdata-external-page="true"、最初のページ以外の属性がページに含まれていることに気付くでしょう。domCache false を使用している場合でも、最初のページは常に DOM にキャッシュされます。ただし、最初のページを除くページは、ページを離れた後に読み込まれ、消去されます。そのためpageinit、戻る/進むボタンのクリックで が発生します。

domCacheは、ユーザーがページから移動した後、そのページを DOM に保持するかどうかを設定します。jQM docsでそれについて読むことができます。デフォルトでは、domCacheオプションの値はfalseです。

追加:

$(document).on('mobileinit', function () {
    $.mobile.page.prototype.options.domCache = true;
});

jQuery js と jQuery Mobile js の間では、ページが DOM にキャッシュされます。したがって、pageinit は起動しません。

data-dom-cache="true"別の方法は、アンカーを追加することです。

domCache を使用することの欠点は、DOM が大きくなり、メモリの問題が発生する可能性があることです。このようなアプローチでは、DOM の管理は開発者に任されます。

最後に、ページで同じ jQ、jQM バージョンを使用していることを確認してください。最初の 2 ページは jQ 1.9.1、jQm 1.3.1 を使用しており、3 ページ目は jQ 1.7.1、jQM 1.1.0 を使用しています。これは特定の問題とは無関係ですが、言及する価値があります。

これが役立つことを願っています。

于 2013-06-05T17:21:00.317 に答える