Pengantar jQuery (Bagian 3): Menunggu Halaman Muat & Fungsi Anonim

Iklan

jQuery bisa dibilang keterampilan penting bagi modern pengembang web Bahasa Pemrograman Yang Dipelajari - Pemrograman WebHari ini kita akan melihat berbagai bahasa pemrograman web yang mendukung Internet. Ini adalah bagian keempat dari seri pemrograman pemula. Pada bagian 1, kami mempelajari dasar ... Baca lebih banyak , dan dalam mini-seri pendek ini saya berharap dapat memberi Anda pengetahuan untuk mulai memanfaatkannya dalam proyek web Anda sendiri. Dalam Bagian pertama dari tutorial jQuery kami jQuery Tutorial - Memulai: Dasar-Dasar & PenyeleksiMinggu lalu, saya berbicara tentang betapa pentingnya jQuery bagi pengembang web modern dan mengapa itu mengagumkan. Minggu ini, saya pikir sudah saatnya kita membuat tangan kita kotor dengan beberapa kode dan belajar bagaimana ... Baca lebih banyak , kami melihat beberapa dasar bahasa, dan cara menggunakan penyeleksi; di bagian 2, kami pindah ke metode memanipulasi DOM Pengantar jQuery (Bagian 2): Metode & FungsiIni adalah bagian dari pengenalan pemula yang sedang berjalan untuk seri pemrograman web jQuery. Bagian 1 membahas dasar-dasar jQuery tentang bagaimana memasukkannya ke dalam proyek Anda, dan penyeleksi. Di bagian 2, kami akan melanjutkan dengan ...

Baca lebih banyak .

Di bagian 3, kami akan mengatasi masalah tentang cara menunda jQuery hingga laman dimuat, lalu saya akan mencoba menjelaskan apa fungsi anonim dan mengapa Anda perlu mengetahuinya.

Memuat Tertunda: Bagaimana & Mengapa?

Jika Anda telah mencoba beberapa kode dari bagian 1 dan 2, Anda mungkin menemukan beberapa kesalahan, perilaku aneh, atau hal-hal yang jelas tidak berfungsi. Kesalahan paling umum yang saya alami ketika belajar jQuery adalah bahwa elemen DOM tidak ditemukan - bahkan meskipun saya dapat dengan jelas melihat mereka di sumber halaman, jQuery terus mengatakan kepada saya bahwa itu tidak dapat ditemukan mereka! Mengapa demikian?

Ya, itu semua berkaitan dengan urutan hal-hal yang dimuat oleh browser. Paling sederhana, jika Anda memiliki skrip jQuery yang berjalan di browser sebelum elemen DOM yang dicari benar-benar telah dibuat, skrip akan dimuat terlebih dahulu, tetapi tidak melakukan apa-apa karena tidak dapat menemukan elemen, maka elemen DOM akan dimuat nanti. Ini tidak terlalu menjadi masalah jika Anda meletakkan semua skrip Anda di dekat footer, tetapi itu masih bisa terjadi.

Solusinya adalah dengan membungkus skrip Anda dalam apa yang disebut a mendokumentasikan acara yang siap. Hal ini membuat kode terlampir menunggu sampai DOM telah dimuat penuh (hingga itu siap). Penggunaannya sederhana:

$ (dokumen) .ready (function () { // kode Anda untuk menunda ada di sini. });

Bahkan ada cara yang lebih singkat untuk melakukan hal ini diuraikan dalam dokumentasi jQuery, tetapi saya sangat menyarankan Anda menggunakan cara ini untuk keterbacaan kode.

Acara siap dokumen ini adalah contoh lain dari fungsi anonim, jadi mari kita mencoba memahami apa artinya ini.

Fungsi Anonim

Jika seperti saya, Anda memiliki pengalaman pemrograman tingkat pemula di bawah ikat pinggang, gagasan tentang fungsi anonim - yang merupakan inti dari jQuery dan Javascript - mungkin sedikit membingungkan. Untuk satu, itu membuat kesalahan karena kawat gigi tidak cocok sangat umum, itulah sebabnya saya akan menjelaskannya sekarang. Jika Anda ingin penjelasan menyeluruh tentang mengapa fungsi anonim lebih baik daripada nama biasa berfungsi pada tingkat yang lebih teknis, saya sarankan membaca posting blog yang cukup rumit ini [Tidak Lagi Tersedia].

Sampai sekarang, Anda mungkin hanya menemukan fungsi bernama. Ini adalah fungsi yang telah dideklarasikan dengan nama dan karena itu dapat dipanggil di tempat lain, sebanyak yang Anda suka. Pertimbangkan contoh sepele ini, yang akan mencatat pesan ke konsol saat halaman dimuat.

function doStuffOnPageLoad () { console.log ("melakukan hal-hal!"); } $ (dokumen) .ready (doStuffOnPageLoad);

Ini berguna jika fungsi Anda dirancang untuk digunakan kembali, tetapi dalam kasus ini agak berbelit-belit karena kami hanya benar-benar ingin memecatnya sekali ketika halaman dimuat. Alih-alih, kami tidak perlu repot mendefinisikan fungsi yang terpisah, dan hanya menyatakannya sebaris sebagai parameter saat dan ketika dibutuhkan. Oleh karena itu contoh sebelumnya akan lebih baik ditulis ulang sebagai:

$ (dokumen) .ready (function () { console.log ("melakukan hal-hal"); });

Anda mungkin tidak melihat banyak keuntungan dari ini saat ini - hanya sedikit kode dalam kasus ini - tetapi sebagai skrip Anda berkembang dalam kompleksitas, Anda akan menghargai tidak harus melompat-lompat mencoba menemukan fungsi definisi. Sayangnya, ini membuat segalanya sedikit lebih sulit bagi pemula - lihat saja semua kawat gigi itu - jadi pastikan untuk memeriksa poin-poin berikut jika Anda mendapatkan kesalahan:

• Jumlah benar kawat gigi yang sesuai - indentasi kode Anda membantu.
• Kurung vs kurung bundar.
• Penutupan pernyataan dengan titik koma - tetapi tidak diperlukan setelah kurung kurawal penutupan.

Menggunakan editor kode seperti Teks Luhur 2 Cobalah Sublime Text 2 Untuk Kebutuhan Pengeditan Kode Cross-Platform AndaSublime Text 2 adalah editor kode lintas-platform yang baru-baru ini saya dengar, dan saya harus mengatakan saya benar-benar terkesan meskipun label beta. Anda dapat mengunduh aplikasi lengkap tanpa membayar sepeser ... Baca lebih banyak dapat sangat membantu karena menyoroti kawat gigi yang sesuai dan secara otomatis indentasi kode untuk Anda. Editor kode khusus sangat penting.

Itu saja untuk pelajaran ini, tetapi Anda harus membiasakan diri dengan melampirkan beberapa manipulasi DOM dasar dalam acara siap dokumen sebelum melanjutkan, dan mulai mengedit file dalam editor kode jika Anda tidak sudah. Lain kali, kita akan melihat acara dan bagaimana mereka digunakan untuk menambahkan interaktivitas ke halaman - seperti membuat jQuery melakukan sesuatu ketika tombol diklik. Pertanyaan atau komentar selalu diterima di bawah ini.