Corak Pemerhati JavaScript (Klasik)_petua javascript

Corak Pemerhati, juga dipanggil corak Pemerhati, ialah salah satu daripada 23 corak reka bentuk perisian yang dicadangkan oleh GoF. Corak Pemerhati ialah salah satu corak tingkah laku Fungsinya ialah apabila keadaan objek berubah, ia boleh memberitahu objek lain yang berkaitan secara automatik dan menyegarkan keadaan objek secara automatik.

Konsep corak Pemerhati

Mod pemerhati ialah salah satu mod gelagat Fungsinya adalah untuk memberitahu objek lain yang berkaitan secara automatik dan menyegarkan keadaan objek secara automatik apabila keadaan objek berubah.
Corak Pemerhati menyediakan cara komunikasi segerak untuk objek yang berkaitan untuk mengekalkan penyegerakan keadaan antara objek dan objek lain yang bergantung padanya.

Peranan mod pemerhati:

Subjek (diperhatikan)
Objek yang diperhatikan. Apabila keadaan yang perlu diperhatikan berubah, semua objek pemerhati dalam baris gilir perlu dimaklumkan. Subjek perlu mengekalkan (menambah, memadam, memberitahu) senarai baris gilir objek pemerhati.
ConcreteSubject
Kesedaran konkrit orang yang diperhatikan. Mengandungi beberapa keadaan atribut asas dan operasi lain.
Pemerhati
Antara muka atau kelas abstrak. Apabila keadaan Subjek berubah, objek Pemerhati akan dimaklumkan melalui fungsi panggil balik.
Pemerhati Konkrit
Pelaksanaan konkrit pemerhati. Selepas dimaklumkan, beberapa pemprosesan logik perniagaan tertentu akan diselesaikan.

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.

div.onclick = function click (){
alert ( ”click' )
}

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

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

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

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

Tetapi rakan sekerja A yang menulis modul ini pergi ke luar negara Jadi saya memanggilnya, hello Di mana fungsi loadImage anda Bolehkah saya mengubahnya? Kegusaran berlaku. Bagaimana jika kita boleh menulisnya seperti ini:

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.

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 bersama-sama resume 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 persatu di. masa yang sesuai untuk memberitahu mereka tentang keputusannya

Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}

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

//订阅者
var adultTv = Event();
adultTv .listen( ”play', function( data ){
alert ( “今天是谁的电影” + data.name );
});
//发布者
adultTv .trigger( ”play', { ‘name': ‘麻生希' } )