Corak Reka Bentuk JavaScript Corak Pemerhati (Pola Penerbit-Pelanggan)_kemahiran javascript

Corak pemerhati (juga dipanggil corak penerbit-pelanggan) harus menjadi salah satu corak yang paling biasa digunakan dalam banyak bahasa, termasuk acara dom yang biasa kita temui. Ia juga dilaksanakan antara js dan dom Corak pemerhati.

Salin kod Kod adalah seperti berikut:

div.onclick = fungsi klik (){
makluman ( ”klik’ )
}

Selagi anda melanggan acara klik div Apabila div diklik, klik fungsi akan dicetuskan.

Jadi apakah corak pemerhati? Mari kita lihat dahulu corak pemerhati dalam kehidupan.

Ada pepatah terkenal di Hollywood "Jangan panggil saya, saya akan panggil awak." Di mana "Saya" ialah penerbit dan "anda" ialah pelanggan.

Untuk contoh lain, apabila saya datang ke syarikat untuk temu duga, setiap penemuduga akan berkata kepada saya selepas temu duga: "Sila tinggalkan maklumat hubungan anda dan kami akan memberitahu anda jika terdapat sebarang berita." Di sini "Saya" ialah pelanggan dan penemuduga ialah penerbit. Jadi saya tidak perlu bertanya tentang keputusan temuduga setiap hari atau setiap jam Inisiatif komunikasi terletak pada penemuduga. Dan saya hanya perlu memberikan maklumat hubungan.

Corak pemerhati boleh mencapai penyahgandingan antara dua modul. Katakan saya sedang membangunkan permainan HTML5 dalam satu pasukan Apabila permainan bermula, beberapa bahan imej perlu dimuatkan. Selepas memuatkan imej ini, logik permainan dilaksanakan Anggapkan ini adalah projek yang memerlukan kerjasama berbilang orang. Saya telah melengkapkan modul Pemain dan Peta, dan rakan sekerja saya A menulis pemuat imej.

Kod untuk loadImage adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

loadImage( imgAry, function(){
Map.init();
Gamer.init();
} )

Selepas imej dimuatkan, peta diberikan dan logik permainan dilaksanakan Nah, program ini berjalan dengan baik pada suatu hari, saya teringat bahawa saya harus menambah satu baris kod pemuat imej.

Salin kod Kod adalah seperti berikut:

loadImage( imgAry, function(){
Map.init();
Gamer.init();
Sount.init();
} )

Tetapi rakan sekerja A yang menulis modul ini pergi ke luar negara Jadi saya menelefonnya, hello Di mana fungsi loadImage anda Adakah terdapat kesan sampingan selepas menukarnya? tidak selesa. Bagaimana jika kita boleh menulisnya seperti ini:

Salin kod Kod adalah seperti berikut:

loadImage.listen( ”ready’, function(){
Map.init();
})
loadImage.listen( ”ready’, function(){
Gamer.init();
})
loadImage.listen( ”ready’, function(){
Sount.init();
})

Selepas loadImage selesai, ia tidak kisah apa yang berlaku pada masa hadapan, kerana kerjanya telah selesai Seterusnya ia hanya perlu menerbitkan isyarat.

Salin kod Kod adalah seperti berikut:

loadImage.trigger( ”ready’ );

Kemudian objek yang mendengar acara 'sedia' loadImage akan dimaklumkan Sama seperti contoh temuduga yang lepas, penemuduga langsung tidak peduli ke mana penemuduga akan pergi makan selepas menerima keputusan temuduga untuk menjalankan temuduga. Kumpul resume calon-calon apabila keputusan temuduga keluar, anda akan dimaklumkan satu persatu mengikut nombor telefon di resume

Setelah bercakap tentang banyak konsep, mari kita berikan pelaksanaan yang konkrit Proses pelaksanaannya sebenarnya sangat mudah Penemuduga melemparkan resume ke dalam kotak, dan kemudian penemuduga mengambil resume di dalam kotak dan memanggil satu demi satu. masa yang sesuai untuk memberitahu mereka tentang keputusan

Salin kod Kod adalah seperti berikut:

Peristiwa = fungsi() {
var dengar, log, obj, satu, alih keluar, picu, __ini;
obj = {};
__ini = ini;
listen = function( key, eventfn ) { //Lempar resume anda ke dalam kotak, kuncinya ialah maklumat hubungan anda.
var stack, _ref; //stack ialah kotak
tindanan = ( _ref = obj[key] ) != null _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
alih keluar(kunci);
kembali dengar( kunci, eventfn );
};
alih keluar = fungsi( kunci ) {
var _ref;
pulangkan ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //Pewawancara memanggil untuk memberitahu penemuduga
var fn, tindanan, _i, _len, _ref, kunci;
key = Array.prototype.shift.call( arguments );
tindanan = ( _ref = obj[ key ] ) != null _ref : obj[ key ] = [];
untuk ( _i = 0, _len = stack.length; _i < _len; _i ) {
fn = tindanan[ _i ];
if ( fn.apply( __this, arguments ) === false) {
pulangkan palsu;
}
}
kembali {
dengar: dengar,
satu: satu,
alih keluar: buang,
pencetus: pencetus
}
}

Akhir sekali, gunakan mod pemerhati untuk membuat aplikasi TV dewasa kecil.

Salin kod Kod adalah seperti berikut:

//Pelanggan
var adultTv = Acara();
adultTv .listen( ”main', fungsi( data ){
makluman ("filem siapa hari ini" data.name );
});
//Diterbitkan oleh
adultTv .trigger( ”main', { ‘nama’: ‘Aso Nozomi’ } )