はじめに
ここにあるすべての情報は、私のブログARTICLEにもあります。実際の例もあります。
pageinit と pageshow の違い
最初から始めましょう。ご存知のように、jQuery 開発者は、ドキュメントの準備ができていないギャップを埋めるためにページ イベントを提供してくれました。ドキュメントの準備ができているということは、コンテンツが DOM 内で準備ができていることを示していますが、jQuery Mobile はコンテンツのマークアップを強化する (コンテンツ スタイルを強化する) 必要があるため、それ以上のことが必要です。
いくつかのページ イベントがあり、それぞれに目的があります。動的コンテンツを追加できるように、ページ コンテンツを拡張する前に ( pagebeforecreateのように) トリガーするものもあります。pagebeforechangeのように、ページの変更中にのみトリガーされるものもあります。
しかし、あなたの質問に戻りましょう。Pageinitは、 の jQuery Mobile バージョンになりdocument readyます。引き続き使用できますが、ページイベント間で同じ代替手段を使用するdocument readyことは依然として論理的です。
既に述べたようにpageinit、イベント バインディング (クリックやスワイプ イベントなど) に使用していますが、これは良い解決策です。主な理由jQuery Mobileは、「複数のイベント バインディング」と呼ばれる問題に悩まされているためです。たとえば、要素にバインドされたクリック イベントがある場合、別のクリック イベントが同じ要素にバインドされるのを防ぐことはできません。pageshowそして、イベントを使用するとそれが起こります。イベント中にイベント バインディングを使用するpageshowと、ページにアクセスするたびに同じイベントが何度もバインドされます。これは簡単に防ぐことができますが、同じように防ぐには、Web アプリの残りの部分を処理するために使用できるのと同じプロセッサ処理能力が追加で必要になります。
ここで別の質問 (あなたの質問の 1 つ) があります。では、目的はpageshow何ですか? 明らかな答えは、利用可能で表示されているページで何かをすることです。正解ですが、それほど重要ではありません。Pageshowページの高さを正しく計算でき、0 ではない唯一のページ イベントであるため、これは重要です。これで、その時点でカルーセルを初期化する必要がある理由がわかります。他の多くのプラグイン (グラフ、画像ギャラリー) と同様に、カルーセルには正しいページの高さが必要であり、pageshow高さが 0 になる前にそれらを初期化すると、それらは存在しますが、表示できなくなります。
最後の質問に関しては、アプリケーションが正しく構築されている場合、キャッシュは役割を果たしません。ページ要素が存在するかどうかは気にしないため、最初は常に委譲イベントバインディングを使用する必要があります。基本的に、イベントをドキュメントなどの親要素にバインドする場合、ページがキャッシュされているか、DOM から削除されているかは問題ではありません。それが戻ってくるとすぐに、同じイベントが再び機能します。
例：
$(document).on('click', '#some-button',function(){
});
このメソッドはクリック イベントをドキュメントにバインドしますが、同じクリック イベントは ID が ' の要素でのみ機能しますsome-button'。ドキュメントオブジェクトは常に存在するため、その要素が存在するかどうかは問題ではありません。
ページのリロード/更新が一般的な通常の Web ページで作業する場合、これと同じロジックはそれほど重要ではありません。または、ajax がオフになっている場合は jQuery Mobile を使用しているため、すべてのページ変更は基本的にページの更新/再読み込みです。
これですべての質問に答えられることを願っています。説明が必要な場合は、コメント セクションで質問してください。
編集 ：
- データをどこにロードするかは、何をロードする必要があるかによって異なります。1 回だけ実行する場合は、 を使用します
pageinit。ページにアクセスするたびに必要な場合は、を使用しますpagebeforeshow(pageshowそのコンテンツを使用すると、どこにも表示されず、ユーザーを混乱させる可能性があるため)。pagebeforecreateイベント終了後にコンテンツが読み込まれるため使用しないでください。使用しても意味がありません。
ある間隔でコンテンツをロードする場合はpageinit、setinterval 関数を使用します。動的コンテンツが追加されるたびに、ページ コンテンツ スタイルを手動で強化することを忘れないでください。
Pageshowページの高さが必要なプラグインの初期化からのみ役立ちます。他には特に何もありません。回答 1 から、どこからともなく表示されるため、動的コンテンツには適していないことがわかります。
Pageinitイベントバインディングと動的コンテンツ生成に使用する必要があります。
- 明日、すべてのページイベントのユースケースで回答を更新します。これで十分だと思います。