Penjelasan terperinci tentang pattern_jquery pemerhati jQuery

Dalam jQuery, kaedah on boleh mengikat peristiwa kepada elemen, dan kaedah pencetus boleh mencetuskan peristiwa secara manual Dengan memfokuskan pada dua kaedah ini, mari kita alami Corak Pemerhati dalam jQuery.

■ Kaedah on mengikat peristiwa terbina dalam dan mencetuskannya secara semula jadi

Sebagai contoh, jika kita mengikat acara klik pada elemen badan halaman, tulis seperti ini.

Salin kod Kod adalah seperti berikut: $(function() { $('body').on('click', function () { console.log('Diklik~~'); }); }); hello

Di atas, kita hanya boleh mencetuskan acara klik dengan mengklik pada badan. Maksudnya, apabila peristiwa terbina dalam terikat pada elemen halaman, peristiwa itu dicetuskan pada saat peristiwa terbina dalam berlaku.

■ Kaedah on mengikat peristiwa terbina dalam dan mencetuskannya secara manual

Menggunakan kaedah pencetus, anda juga boleh mencetuskan peristiwa terbina dalam yang terikat pada elemen secara manual.

$(function() { $('body').on('click', function () { console.log('Diklik~~'); }); $('body').trigger('click'); }); Dalam perkara di atas, tidak perlu mengklik badan Selepas halaman dimuatkan, badan mencetuskan acara klik secara automatik.

■ Kaedah on mengikat peristiwa tersuai dan mencetuskannya secara manual Kami tahu bahawa klik ialah peristiwa terbina dalam jquery Jadi, bolehkah acara itu disesuaikan dan dicetuskan secara manual?

Salin kod Kod adalah seperti berikut: $(function() { $('body').on('someclick', function () { console.log('Diklik~~'); }); $('body').trigger('someclick'); });

Di atas, kami menyesuaikan acara someclick, dan hasilnya adalah sama seperti di atas.

Jadi, kami mendapati bahawa kami boleh mengikat acara tersuai pada elemen dan mencetuskan acara menggunakan kaedah pencetus.

Sudah tentu, nama acara tersuai boleh ditulis dalam bentuk "ruang nama.nama acara tersuai", seperti app.someclick Ini amat berguna dalam projek besar, yang boleh mengelakkan konflik nama acara tersuai dengan berkesan.

Dari perspektif "terbitkan dan langgan", kaedah hidup adalah bersamaan dengan pelanggan dan pemerhati, dan kaedah pencetus adalah bersamaan dengan penerbit.

■ Alami mod pemerhati jQuery daripada "Dapatkan data json secara tak segerak"

Dalam direktori akar, terdapat fail data.json.

{ "one" : "Hello", "dua" : "Dunia" } Sekarang, dapatkan data json secara tidak segerak.

Salin kod Kod adalah seperti berikut: $(fungsi () { $.getJSON('data.json', fungsi(data) { console.log(data); }); });

Jika anda menggunakan pembolehubah global untuk menerima data json yang diperoleh secara tidak segerak.

Salin kod Kod adalah seperti berikut: $(fungsi () { var data; $.getJSON('data.json', fungsi(hasil) { data = keputusan; }); console.log(data); });

Kali ini, keputusan yang kami dapat adalah tidak pasti.

--Oleh kerana, semasa kaedah $.getJSON masih mendapat data, console.log(data) telah dilaksanakan dan data tidak mempunyai data pada masa ini. Bagaimana untuk menyelesaikan masalah ini?

--Jika anda mula-mula mentakrifkan kaedah yang perlu dilaksanakan sebagai tambahan kepada kaedah $.getJSON, dan kemudian sebenarnya mencetuskan kaedah ini dalam fungsi panggil balik kaedah $.getJSON, bukankah ia akan diselesaikan?

Salin kod Kod adalah seperti berikut: $(fungsi () { $.getJSON('data.json', fungsi(hasil) { $(document).trigger('app.myevent', results); //Setara dengan penerbitan }); $(document).on('app.myevent', function(e, results) { //Setara dengan langganan console.log(hasil); }); });

Di atas, kaedah on adalah seperti pelanggan, yang melanggan aplikasi acara tersuai.myevent; dan kaedah pencetus adalah seperti penerbit, yang menerbitkan acara dan parameter sebelum kaedah pelanggan benar-benar dilaksanakan.

■ Kaedah pelanjutan corak pemerhati jQuery

Untuk tujuan ini, kita juga boleh menulis kaedah sambungan khusus untuk corak pemerhati jQuery.

Salin kod Kod adalah seperti berikut: $(fungsi () { $.getJSON('data.json', fungsi (hasil) { $.publish('app.myevent', results); }); $.subscribe('app.myevent', function(e, results) { console.log(hasil); }); }); (fungsi($) { var o = $({});//Objek acara tersuai $.setiap ({ pencetus: 'terbitkan', pada: 'langgan', dimatikan: 'nyahlanggan' }, fungsi (kunci, val) { jQuery[val] = function() { o[key].apply(o, arguments); }; }); })(jQuery);

Perkara di atas mentakrifkan kaedah penerbitan dan langganan global, yang boleh kami hubungi pada bila-bila masa.

Salin kod Kod adalah seperti berikut: $(fungsi () { $.getJSON('data.json', fungsi (hasil) { $.publish('app.myevent', results); }); $.subscribe('app.myevent', function(e, results) { $('body').html( hasil.satu ); }); });

Ringkasan: Mod pemerhati jQuery sebenarnya membenarkan peristiwa tersuai yang terikat oleh kaedah on tidak dilaksanakan sehingga kaedah pencetus digunakan untuk mencetuskan acara. Kelebihan menggunakan corak pemerhati jQuery ialah: terbitkan sekali dan langgan beberapa kali.