jQuery Mudah Alih: `$(document).ready()` lwn. `$(document).on('pageinit')` – Mana Yang Perlu Saya Gunakan?

Kemas Kini jQuery Mobile 1.4

Artikel asal bertujuan untuk cara lama mengendalikan halaman, yang digunakan sebelum jQuery Mobile 1.4. Cara lama ini kini tidak digunakan lagi dan akan kekal aktif sehingga jQuery Mobile 1.5 (inklusif), bermakna anda masih boleh menggunakan semua yang dinyatakan di bawah sehingga sekurang-kurangnya tahun depan dan jQuery Mobile 1.6.

Acara lama, termasuk pageinit , tidak lagi wujud dan telah digantikan dengan widget pagecontainer. Pageinit dipadamkan sepenuhnya dan anda boleh menggunakan pagecreate sebaliknya, yang kekal tidak berubah.

Jika anda berminat dengan cara baharu mengendalikan acara halaman, rujuk artikel ini. Jika tidak, sila teruskan membaca artikel ini, kerana ia merangkumi lebih daripada sekadar acara halaman dan mungkin memberikan maklumat yang berharga.

Kandungan lama

Artikel ini juga boleh didapati sebagai sebahagian daripada blog saya DI SINI.

$(document).on('pageinit') vs $(document).ready()

Apabila anda mula-mula mempelajari jQuery, anda diajar untuk memanggil kod di dalam fungsi $(document).ready() supaya semuanya dilaksanakan sebaik sahaja DOM dimuatkan. Walau bagaimanapun, dalam jQuery Mobile, Ajax digunakan untuk memuatkan kandungan setiap halaman ke dalam DOM semasa anda menavigasi, yang bermaksud $(document).ready() akan dicetuskan sebelum halaman pertama anda dimuatkan. Akibatnya, sebarang kod yang bertujuan untuk manipulasi halaman akan dilaksanakan selepas penyegaran halaman, yang boleh membawa kepada pepijat halus. Pada sesetengah sistem, ia mungkin kelihatan berfungsi dengan baik, tetapi pada yang lain, ia mungkin menyebabkan gelagat yang tidak menentu dan sukar untuk diulang.

Sintaks jQuery klasik:

$(document).ready(function() {

});

Untuk menyelesaikan isu ini (yang sememangnya menjadi masalah), pembangun jQuery Mobile mencipta acara halaman. Secara ringkasnya, peristiwa halaman ialah peristiwa yang dicetuskan pada titik pelaksanaan halaman tertentu. Satu acara halaman sedemikian ialah pageinit, yang boleh kita gunakan seperti berikut:

$(document).on('pageinit', function() {

});

Kita boleh pergi lebih jauh dengan menggunakan ID halaman dan bukannya pemilih dokumen. Katakan kita mempunyai halaman Mudah Alih jQuery dengan ID indeks:

<div data-role="page">

Untuk melaksanakan kod yang hanya tersedia pada halaman indeks, kita boleh menggunakan sintaks ini:

$('#index').on('pageinit', function() {

});

Acara pageinit akan dilaksanakan setiap kali halaman akan dimuatkan dan ditunjukkan buat kali pertama. Ia tidak akan mencetuskan lagi melainkan halaman dimuat semula secara manual atau pemuatan halaman Ajax dimatikan. Sekiranya anda mahu kod dilaksanakan setiap kali anda melawat halaman, lebih baik menggunakan acara pagebeforeshow.

Berikut ialah contoh yang berkesan untuk menunjukkan masalah ini: http://jsfiddle. net/Gajotres/Q3Usv/

Beberapa nota lagi tentang soalan ini. Tidak kira jika anda menggunakan 1 HTML dengan berbilang halaman atau paradigma fail HTML berbilang, anda dinasihatkan untuk memisahkan semua pengendalian halaman JavaScript tersuai anda ke dalam satu fail JavaScript yang berasingan. Ini tidak akan menjadikan kod anda lebih baik, tetapi ia akan memberikan gambaran keseluruhan kod yang lebih baik, terutamanya semasa mencipta aplikasi Mudah Alih jQuery.

Terdapat satu lagi acara Mudah Alih jQuery khas yang dipanggil mobileinit. Apabila jQuery Mobile bermula, ia mencetuskan acara mobileinit pada objek dokumen. Untuk mengatasi tetapan lalai, ikatkannya pada mobileinit. Satu contoh penggunaan mobileinit yang baik ialah mematikan pemuatan halaman Ajax atau menukar tingkah laku pemuat Ajax lalai.

$(document).ready(function() {

});

Tertib peralihan acara halaman

Senarai semua acara halaman boleh didapati di sini: http://api.jquerymobile.com/category/events/

Jom katakan kami mempunyai halaman A dan halaman B; ini ialah pesanan bongkar/muat:

1. halaman B - acara halamansebelumbuat
2. halaman B - acara halamancipta
3. halaman B - acara pageinit
4. halaman A - acara pagebeforehide
5. halaman A - acara pageremove
6. halaman A - acara pagehide
7. halaman B - acara pagebeforeshow
8. halaman B - acara pageshow

Untuk pemahaman yang lebih baik tentang acara halaman, baca ini:

• halaman sebelum dimuatkan, muatan halaman,

Atas ialah kandungan terperinci jQuery Mudah Alih: `$(document).ready()` lwn. `$(document).on('pageinit')` – Mana Yang Perlu Saya Gunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!