Mode pengamat (juga dikenal sebagai mode Penerbit-Pelanggan) harus menjadi salah satu mode yang paling umum digunakan. Ini banyak digunakan dalam banyak bahasa, termasuk acara DOM yang biasanya kami hubungi. Ini juga merupakan mode pengamat yang diimplementasikan antara JS dan DOM.
Salinan kode adalah sebagai berikut:
Div.onClick = fungsi klik () {
Peringatan ("Klik ')
}
Selama Anda berlangganan acara klik div, klik fungsi akan dipicu.
Jadi apa mode pengamatnya? Mari kita lihat mode pengamat dalam hidup.
Ada pepatah terkenal di Hollywood. "Jangan meneleponku, aku akan meneleponmu." Kalimat ini menjelaskan seluk beluk pola pengamat. Di antara mereka, "I" adalah penerbit dan "Anda" adalah pelanggan.
Izinkan saya memberi Anda contoh lain. Ketika saya datang ke perusahaan untuk wawancara, setiap pewawancara akan mengatakan kepada saya setelah saya selesai: "Silakan tinggalkan informasi kontak Anda, dan kami akan memberi tahu Anda jika ada berita." Di sini "I" adalah pelanggan dan pewawancara adalah penerbit. Jadi saya tidak perlu bertanya tentang hasil wawancara setiap hari atau setiap jam, dan inisiatif dalam komunikasi ada di tangan pewawancara. Dan saya hanya perlu memberikan informasi kontak.
Mode pengamat dapat mencapai decoupling antara kedua modul dengan sangat baik. Jika saya sedang mengembangkan game HTML5 di tim, ketika permainan dimulai, beberapa bahan gambar perlu dimuat. Logika game dieksekusi hanya setelah memuat gambar -gambar ini. Misalkan ini adalah proyek yang mengharuskan banyak orang untuk bekerja. Saya menyelesaikan modul gamer dan peta, dan kolega saya menulis pemuatan gambar gambar.
Kode LoadImage adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
loadImage (imgary, function () {
Peta.init ();
Gamer.init ();
})
Ketika gambar dimuat, peta diterjemahkan dan logika game dieksekusi. Nah, program ini berjalan dengan baik. Tiba -tiba suatu hari, saya ingat bahwa saya harus menambahkan fungsi suara ke permainan. Saya harus meminta loader gambar menambahkan baris kode.
Salinan kode adalah sebagai berikut:
loadImage (imgary, function () {
Peta.init ();
Gamer.init ();
Sount.init ();
})
Tetapi kolega saya A, yang menulis modul ini, melakukan perjalanan ke luar negeri. Jadi saya memanggilnya, hei. Dimana fungsi pemuatan Anda? Bisakah saya mengubahnya? Apakah akan ada efek samping setelah diubah? Seperti yang Anda pikirkan, semua jenis hal yang tidak nyaman terjadi. Jika kita bisa menulis dengan cara ini di awal:
Salinan kode adalah sebagai berikut:
LoadImage.Listen ("Ready ', function () {
Peta.init ();
})
LoadImage.Listen ("Ready ', function () {
Gamer.init ();
})
LoadImage.Listen ("Ready ', function () {
Sount.init ();
})
Setelah pemuatan selesai, tidak peduli tentang apa yang akan terjadi di masa depan, karena pekerjaannya selesai. Selanjutnya hanya menerbitkan sinyal.
Salinan kode adalah sebagai berikut:
loadImage.trigger ("siap ');
Kemudian subjek yang mendengarkan acara 'siap' pemuatan akan menerima pemberitahuan. Sama seperti contoh wawancara terakhir. Pewawancara tidak peduli di mana pewawancara akan makan setelah menerima hasil wawancara. Dia hanya bertanggung jawab untuk mengumpulkan resume pewawancara bersama. Ketika hasil wawancara keluar, mereka akan memberi tahu mereka satu per satu sesuai dengan nomor telepon di resume.
Setelah berbicara tentang banyak konsep, kita dapat mencapai implementasi tertentu. Proses implementasi sebenarnya sangat sederhana. Pewawancara melemparkan resume ke dalam kotak, dan kemudian pewawancara menelepon satu per satu untuk memberi tahu hasilnya pada waktu yang tepat.
Salinan kode adalah sebagai berikut:
Events = function () {
var dengarkan, log, obj, satu, hapus, pemicu, __ ini;
obj = {};
__ ini = ini;
Listen = function (key, eventfn) {// lemparkan resume ke dalam kotak, kunci adalah informasi kontak.
var stack, _ref; // Stack adalah sebuah kotak
stack = (_ref = obj [key])! = null? _ref: obj [key] = [];
return stack.push (eventfn);
};
satu = fungsi (key, eventfn) {
hapus (kunci);
return listen (kunci, eventfn);
};
hapus = fungsi (tombol) {
var _ref;
return (_ref = obj [key])! = null? _ref.length = 0: batal 0;
};
trigger = function () {// pewawancara menelepon untuk memberi tahu pewawancara
var fn, stack, _i, _len, _ref, key;
key = array.prototype.shift.call (argumen);
stack = (_ref = obj [key])! = null? _ref: obj [key] = [];
untuk (_i = 0, _len = stack.length; _i <_len; _i ++) {
fn = stack [_i];
if (fn.Apply (__ ini, argumen) === false) {
mengembalikan false;
}
}
kembali {
Dengarkan: Dengar,
Satu: satu,
Hapus: Hapus,
Pemicu: Pemicu
}
}
Akhirnya, gunakan mode pengamat untuk membuat aplikasi kecil untuk stasiun TV dewasa.
Salinan kode adalah sebagai berikut:
// Pelanggan
var adulttv = event ();
adulttv .listen ("play ', function (data) {
alert ("filmnya hari ini" + data.name);
});
//Penerbit
adulttv .trigger ("play ', {' name ':' ki aso '})