Saya menggunakan RequireJS dan perlu menginisialisasi sesuatu di DOM siap. Sekarang, RequireJS menyediakan domReady
plugin , tetapi kami sudah memiliki jQuery $(document).ready()
, yang tersedia untuk saya karena saya memerlukan jQuery.
Jadi saya punya dua pilihan:
Gunakan
domReady
plugin:require(['domReady'], function (domReady) { domReady(function () { // Do my stuff here... }); });
Penggunaan
$(document).ready()
:$(document).ready(function() { // Do my stuff here... });
Mana yang harus saya pilih, dan mengapa?
Kedua opsi tersebut tampaknya berfungsi seperti yang diharapkan. Saya tidak yakin dengan jQuery karena RequireJS melakukan keajaibannya; yaitu, karena RequireJS akan menambahkan skrip secara dinamis, saya khawatir bahwa siap DOM mungkin terjadi sebelum semua skrip yang diminta secara dinamis dimuat. Padahal, RequireJS akan menambah beban pada JS tambahan hanya domReady
ketika saya sudah memiliki jQuery yang dibutuhkan.
Pertanyaan
- Mengapa RequireJS menyediakan
domReady
plugin ketika kita bisa memiliki jQuery$(document).ready();
? Saya tidak melihat keuntungan apa pun dari menyertakan ketergantungan lain. - Jika ini hanya untuk memenuhi kebutuhan, lalu mengapa tidak menyediakannya untuk AJAX lintas browser?
Sejauh yang saya tahu, modul yang membutuhkan domReady
tidak akan diambil atau dieksekusi setelah dokumen siap, dan Anda juga dapat melakukan hal yang sama yang membutuhkan jQuery:
require(['jQuery'], function ($) {
$(document).ready(function () {
// Do my stuff here...
});
});
Untuk lebih jelasnya pertanyaan saya: apa perbedaan antara Requirement domReady
atau jQuery
?
sumber
I am not confident in jquery's dom ready
saya ingin menandainya sebagai ofensif:p
script
tag Anda pergi, atau apakah Anda menulis perpustakaan / plug-in yang akan digunakan orang lain (sehingga mereka mengontrol lokasiscript
tag di markup)?I am not confident in jquery's dom ready because requirejs is doing its magic.
Karena, Require adalah merangkum jquery dalam lingkup lokal yang terbatas. Bukan itu intinya. (sejauh pertanyaannya).Jawaban:
Sepertinya semua poin penting sudah tercapai, tetapi beberapa detail jatuh melalui celah. Terutama:
domReady
Ini adalah plugin dan modul. Jika Anda memasukkannya ke dalam larik persyaratan tanpa tambahan,
!
modul Anda tidak akan dieksekusi sampai "aman" untuk berinteraksi dengan DOM:Perhatikan bahwa memuat dan mengeksekusi berbeda; Anda ingin semua file Anda dimuat secepat mungkin, itu adalah eksekusi konten yang peka waktu.
Jika Anda menghilangkan
!
, maka itu hanya modul normal yang kebetulan menjadi sebuah fungsi, yang dapat menerima callback yang tidak akan dijalankan sebelum DOM aman untuk berinteraksi dengan:Keuntungan saat menggunakan domReady sebagai plugin
Kode yang bergantung pada modul yang pada gilirannya bergantung
domReady!
memiliki keuntungan yang sangat signifikan: Tidak perlu menunggu DOM siap!Katakanlah kita memiliki blok kode, A, yang bergantung pada modul, B, yang bergantung
domReady!
. Modul B tidak akan selesai memuat sebelum DOM siap. Pada gilirannya, A tidak akan berjalan sebelum B dimuat.Jika Anda akan menggunakannya
domReady
sebagai modul biasa di B, A juga perlu bergantungdomReady
, serta menggabungkan kodenya di dalamdomReady()
pemanggilan fungsi.Lebih jauh, ini berarti
domReady!
menikmati keunggulan yang sama$(document).ready()
.Re perbedaan antara domReady dan $ (document) .ready ()
Keduanya mengendus apakah DOM siap pada dasarnya dengan cara yang sama.
Kembali takut jQuery menembak pada waktu yang salah
jQuery akan mengaktifkan callback siap apa pun bahkan jika DOM dimuat sebelum jQuery melakukannya (kode Anda seharusnya tidak peduli mana yang terjadi lebih dulu.).
sumber
Upaya menjawab pertanyaan utama Anda:
Mereka melakukan dua hal yang berbeda. Ketergantungan RequireJS
domReady
menandakan bahwa modul ini membutuhkan DOM untuk dimuat sepenuhnya sebelum dapat dijalankan (dan oleh karena itu dapat ditemukan di sejumlah modul dalam aplikasi Anda jika Anda menginginkannya), sementara$(document).ready()
sebagai gantinya mengaktifkan fungsi panggilan baliknya ketika DOM selesai memuat.Perbedaannya mungkin tampak tidak kentara, tetapi pikirkan ini: Saya memiliki modul yang perlu digabungkan ke DOM dalam beberapa cara, jadi saya dapat bergantung
domReady
dan memasangkannya pada waktu definisi modul, atau meletakkannya$(document).ready()
di akhir. dengan panggilan balik ke fungsi init untuk modul. Saya akan menyebut pendekatan pertama lebih bersih.Sementara itu, jika saya memiliki acara yang perlu terjadi tepat saat DOM siap,
$(document).ready()
acara tersebut akan menjadi tujuan, karena itu tidak secara khusus bergantung pada RequireJS yang sedang dilakukan memuat modul, asalkan dependensi kode Anda memanggilnya dari terpenuhi.Perlu juga dipertimbangkan bahwa Anda tidak perlu menggunakan RequireJS dengan jQuery. Modul perpustakaan apa pun yang membutuhkan akses DOM (tetapi tidak bergantung pada jQuery) akan tetap berguna dengan menggunakan
domReady
.sumber
domReady
bukan ketergantungan untuk requirejs. Ini akan menjadi ketergantungan untuk kode jika Anda menggunakandomReady
untuk acara DocumentReady. Plus, Anda tampaknya membingungkan.domReady
sebagai ketergantungan, karena begitulah penggunaannya. Bukan sebagai dependensi RequireJS, tetapi sebagai modul tempatnya digunakan. Mungkin saya harus membuatnya lebih jelas dalam teks saya, apakah Anda punya saran bagaimana?Menjawab peluru Anda dalam urutan tampilan:
Ketika sampai pada itu, Anda terlalu memikirkannya. Ini adalah mekanisme untuk mengeksekusi javascript di domReady. Jika Anda tidak memiliki jQuery, saya akan menganjurkan plugin domReady. Karena Anda memiliki jQuery maka jangan memuat lebih banyak skrip untuk melakukan sesuatu yang sudah tersedia.
Pembaruan Kejelasan
Plugin domReady mengumpulkan fungsi yang akan dipanggil saat dokumen 'siap'. Jika sudah dimuat maka mereka segera dieksekusi.
JQuery mengumpulkan fungsi dan mengikat objek yang ditangguhkan ke dom yang 'siap'. Saat dom siap, objek yang ditangguhkan akan diselesaikan dan fungsinya akan diaktifkan. Jika dom sudah 'ready' maka deferred sudah terselesaikan sehingga fungsi akan langsung dijalankan.
Artinya, secara efektif mereka melakukan hal yang persis sama.
sumber
Setelah beberapa percobaan dengan requirejs dengan beberapa modul saya sarankan menggunakan domReady .
Saya perhatikan bahwa fungsi yang terkait dengan $ (document) .ready (...) tidak dipanggil ketika beberapa modul dimuat oleh requirejs. Saya menduga dom sedang bersiap-siap sebelum semua kode require dijalankan dan jquery ready callback handler dipanggil sebelum ia terikat dengan fungsi yang ditentukan pengguna yaitu dalam kode modul utama.
sumber
$(document).ready
akan segera dijalankan.Saya menemukan saya melakukan ini sebagai bagian dari entri utama sehingga semua javascript saya dijamin bahwa DOM sudah siap dan jquery dimuat. Tidak yakin seberapa hebat ini, kami menyambut baik umpan balik tetapi inilah main.js saya:
sumber