Daftar Isi:
- Cara menggunakan $ (dokumen). siap ()
- Menggunakan dokumen. mekanisme siap
- Alternatif untuk mendokumentasikan. siap
Video: Laravel Model dan menampilkan isi tabel 2024
Banyak halaman HTML5 dan CSS3 memerlukan fungsi inisialisasi. Mekanisme onload tubuh sering digunakan di DOM / JavaScript untuk membuat halaman dimuat segera setelah dokumen mulai dimuat. Ini adalah fungsi yang dijalankan lebih awal untuk menyiapkan sisa halaman. Sementara body onload melakukan pekerjaan ini dengan baik, ada beberapa masalah dengan teknik tradisional:
-
Hal ini membutuhkan perubahan pada HTML. Kode JavaScript harus benar-benar terpisah dari HTML. Anda tidak perlu mengubah HTML agar bisa bekerja dengan JavaScript.
-
Waktunya masih kurang tepat. Kode yang ditentukan dalam body onload tidak dijalankan sampai seluruh halaman ditampilkan. Akan lebih baik jika kode itu terdaftar setelah DOM dimuat tapi sebelum halaman ditampilkan.
Cara menggunakan $ (dokumen). siap ()
jQuery memiliki alternatif yang hebat untuk overload tubuh yang mengatasi kekurangan ini. Lihatlah kode untuk melihat cara kerjanya:
siap html $ (dokumen). siap (changeMe); function changeMe () {$ ("# output"). html ("Saya berubah");}
Menggunakan dokumen. mekanisme siap
Apakah ini berubah?
Kode ini menggunakan teknik jQuery untuk menjalankan kode inisialisasi:
-
Tag bodi tidak lagi memiliki atribut onload . Ini adalah fitur umum pemrograman jQuery. HTML tidak lagi memiliki tautan langsung ke JavaScript karena jQuery memungkinkan kode JavaScript melampirkan dirinya ke halaman web.
-
Fungsi inisialisasi dibuat dengan $ (document). siap () fungsinya. Teknik ini memberitahu browser untuk menjalankan fungsi saat DOM selesai loading (sehingga memiliki akses ke semua elemen dalam bentuk) tapi sebelum halaman ditampilkan (sehingga efek apapun dari bentuk tersebut muncul seketika dengan pengguna).
-
$ document membuat objek jQuery dari keseluruhan dokumen. Seluruh dokumen dapat diubah menjadi objek jQuery dengan menentukan dokumen di dalam fungsi $ (). Perhatikan bahwa Anda tidak menggunakan tanda kutip dalam kasus ini.
-
Fungsi yang ditentukan otomatis dijalankan. Dalam kasus khusus ini, Anda ingin menjalankan fungsi changeMe (), jadi Anda menempatkannya dalam parameter metode siap (). Perhatikan bahwa ini mengacu pada changeMe sebagai variabel, sehingga tidak memiliki tanda petik atau tanda kurung.
Anda melihat beberapa tempat lain (terutama dalam penanganan acara) di mana jQuery mengharapkan sebuah fungsi sebagai parameter. Fungsi seperti ini sering disebut fungsi callback karena dipanggil setelah beberapa peristiwa telah terjadi.Anda juga melihat fungsi panggil balik yang merespons peristiwa keyboard, gerakan mouse, dan penyelesaian permintaan AJAX.
Alternatif untuk mendokumentasikan. siap
Anda terkadang melihat beberapa shortcut karena sangat umum untuk menjalankan kode inisialisasi. Anda dapat mempersingkat
$ (dokumen). siap (changeMe);
ke kode berikut:
$ (changeMe);
Jika kode ini tidak didefinisikan di dalam fungsi dan changeMe adalah fungsi yang didefinisikan pada halaman, jQuery secara otomatis menjalankan fungsinya secara langsung seperti dokumen. pendekatan siap
Anda juga dapat membuat fungsi anonim secara langsung:
$ (document). siap (function () {$ ("# output"). html ("saya berubah");});
Metode (fungsi anonim) ini tidak praktis, namun Anda sering melihat kode jQuery menggunakan teknik ini. Anda bisa membuat fungsi yang disebut init () dan menyebutnya dengan garis seperti ini:
$ (init);
Teknik ini sederhana dan mudah dipahami namun Anda mungkin menemukan variasi lain saat Anda memeriksa kode di web.
