jQuery Mobile ページを返すには re-get_jquery は必要ありません-jsチュートリアル-php.cn

jQuery Mobile ページを返すには re-get_jquery は必要ありません

WBOY

リリース： 2016-05-16 15:04:03

オリジナル

1156 人が閲覧しました

jQuery Mobile は、モバイル Web アプリケーションを作成するためのフロントエンド開発フレームワークです。

jQuery Mobile はスマートフォンやタブレットで使用できます。

jQuery Mobile は、HTML5 と CSS3 の最小限のスクリプトを使用して Web ページをレイアウトします。

最近、会社の Web アプリプロジェクトのおかげで、jQuery Mobile に連絡し、学習し続けることができて光栄です。これは確かに非常に優れたモバイル開発ライブラリであり、Web 開発が得意なエンジニアがすぐに開始して独自のモバイルアプリケーションを構築するのに役立ちます。しかし、ここ 2 日間で問題が発生したため、多くの情報を確認しましたが、適切な解決策が見つかりませんでした。結局、jQuery Mobile のソースコードを読み、それを解決するための拡張機能を作成する必要がありました。。以下に説明させてください。

問題の説明

プロジェクト内に main.html、test1.html、test2.html (以下、それぞれ main、test1、test2 と呼びます) という 3 つのページがあり、メインページには test1 ページへのリンクが含まれているとします (つまり、タグ）、test1 には属性 data-rel="back" を持つリンクと test2 へのリンクがあり、test2 には属性 data-rel="back" を持つリンクが 1 つだけあります。 main が test1 に転送された後、戻るリンクをクリックして main に戻ります (ブラウザの戻るボタンをクリックするのと同じです)。get リクエストを再送信する必要はありませんが、test1 が test2 に転送するときに、test2 の戻るリンクをクリックします。ページに戻り、test1 に戻りたい場合は、get リクエストが再送信されます。これによって生じる問題は、test2 が戻った後、test1 によって実行されたすべての操作が無効になることです。たとえば、A はページ分割されたリストページで、2 ページ目に移動してから B にリダイレクトすると、A に戻っても 2 ページ目に移動できなくなります。

原因分析

最初に firebug を使用して HTML の構造を調べたところ、jQuery Mobile が test1 から test2 に切り替えると、main と test1 がページ構造に追加され、dom ツリーが自動的に削除されることがわかりました。 main と test2 のみが含まれるため、test2 が test1 を返すと、get リクエストが送信されます。つまり、履歴ページを dom にキャッシュできる限り (main や test1 と同様に)、この問題は解決できるということになります。

問題を解決してください

少し検索した結果、jQuery Mobile の公式 Web サイトに「DOM でのページのキャッシュ」に関する説明が見つかりました。

DOM 内のページのキャッシュ
以前にアクセスしたすべてのページを DOM 内に保持するには、次のように、ページプラグインの domCache オプションを true に設定します。
$.mobile.page.prototype.options.domCache = true;
あるいは、特定のページだけをキャッシュするには、data-dom-cache="true" 属性をページのコンテナに追加できます:

次のようにプログラムでページをキャッシュすることもできます:
pageContainerElement.page({ domCache: true });
DOM キャッシュの欠点は、DOM が非常に大きくなり、一部のデバイスで速度低下やメモリの問題が発生する可能性があることです。DOM キャッシュを有効にする場合は、DOM を自分で管理し、さまざまなデバイスで徹底的にテストするように注意してください。

この引用から、これら 3 つの方法でページを dom にキャッシュできることがわかります。そこで、ページの div true" 属性に data-dom-cache=” を追加する 2 番目の方法を使用しました。しかし、次の 2 つの問題が発生しました:

1. 以下の図に示すように、アクセスパスが main->test1->test2->test1 の場合 (test2 はhistory.back() によって返されます)、test2 がDOM にまだ存在する場合、結果は赤い部分で説明されているとおりです。DOM が非常に大きくなり、一部のデバイスでページの速度が低下し、メモリエラーが発生します。

2. このようなページがある場合、さまざまなパラメーターを通じてさまざまなコンテンツが表示され、ページ上の要素に対して何らかの処理を行う js スクリプトがページ上にあります。一般的な方法は ID を使用することです。目的の要素を取得するにはキャッシュを使ってページをキャッシュするため、jsイベントや操作の混乱が発生します。たとえば、ここでは test1_1 ページを追加しました。その内容は test1 とほぼ同じです。両方とも同じ ID を持つ div と、同じイベント処理を持つボタンを持ちます。このイベントは、アクセス時にこの div にコンテンツを追加します。パスは main ->test1->test1_1 で、test1_1 のボタンをクリックすると、このイベントはトリガーされていないように見えますが、実際にはトリガーされていますが、コンテンツは test1 の div に追加されます。以下の図に示すように

So for most current applications, this solution is not advisable unless you manage the life cycle of the page in the DOM yourself.

Optimization plan

Through the above experiment, I also know that to meet my needs, I can only manage the life cycle of the page in the DOM myself. Then it involves a question: When will the page expire (that is, be deleted from the dom)? According to my needs, when returning from test2 to test1, test2 should be deleted from the dom. Similarly, when returning to main from test1, test1 should be deleted from the dom. If you navigate from main to test1 again, you have to initiate a get request. I think this is reasonable because the user will not think that clicking the link to a new page requires caching. So I should delete the history after the page before or after it is displayed, so I did the deletion operation during pagebeforeshow and pageshow, that is, the following script (plug-in form):

(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);

ログイン後にコピー

The result was counterproductive. When the page was returned, a js script error occurred, as shown below:

So what’s the reason? If this incident is not handled, then where should it be handled? So I carefully studied the jQuery Mobile source code and found the following paragraph:

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 );
});

ログイン後にコピー

After the page is switched, the pagechange event will be triggered, so I changed pagebeforeshow to pagechange. Everything ran as expected and there were no errors. I was finally done.

Summary

When using this plug-in, please pay attention to the following points:

1. You must quote jquery and jquery mobile script files before quoting the script;

2. Data-dom-cache="true" must be added to the page.

The above is the relevant instructions introduced by the editor to return jQuery Mobile pages without re-getting. I hope it will be helpful to everyone!