Saat ini, aplikasi asli dan aplikasi web adalah arus utama, yang berarti bahwa berbagai kerangka kerja aplikasi web berbasis browser menjadi semakin populer, dan mereka yang melakukan JS menjadi semakin menjanjikan. Saya juga memutuskan untuk secara bertahap pindah dari pengembangan back-end ke pengembangan front-end dan pengembangan seluler. Jangan bicara omong kosong, mari kita ke topik "JS Callback Function".
Berbicara tentang fungsi panggilan balik, meskipun banyak orang tahu artinya, mereka masih memiliki sedikit pemahaman. Adapun cara menggunakannya, masih agak bingung. Beberapa hal terkait di internet belum menjelaskan secara rinci apa yang terjadi, dan mereka lebih sepihak. Selanjutnya, saya hanya akan berbicara tentang pemahaman pribadi saya, jangan mengkritik saya. Mari kita lihat definisi kasar "Fungsi A memiliki parameter, dan parameter ini adalah fungsi b. Ketika fungsi A dieksekusi, fungsi B dieksekusi. Kemudian proses ini disebut panggilan balik." Kalimat ini berarti bahwa fungsi B disahkan ke fungsi A dalam bentuk parameter dan dieksekusi dalam urutan pelaksanaan A pertama, dan kemudian mengeksekusi parameter B, B adalah fungsi panggilan balik. Mari kita lihat contoh berikut.
Salinan kode adalah sebagai berikut:
fungsi a (callback) {
waspada ('a');
callback.call (this); // atau callback (), callback.apply (ini), tergantung pada preferensi pribadi
}
fungsi b () {
waspada ('b');
}
//Panggilan
a (b);
Hasilnya adalah 'A' muncul lebih dulu dan 'B' muncul. Dengan cara ini, seseorang mungkin bertanya, "Apa gunanya menulis kode seperti itu? Tampaknya tidak banyak berguna!"
Ya, saya benar -benar berpikir tidak ada artinya untuk menulis seperti ini, "Jika Anda memanggil fungsi, sebut saja langsung di fungsi." Saya hanya menulis contoh kecil bagi Anda untuk memberi Anda pemahaman awal. Jenis parameter ini jarang digunakan dalam proses benar -benar menulis kode, karena dalam sebagian besar skenario, kita harus lulus parameter. Berikut adalah parameter:
Salinan kode adalah sebagai berikut:
fungsi c (callback) {
waspada ('c');
callback.call (ini, 'd');
}
//Panggilan
c (function (e) {
waspada (e);
});
Apakah panggilan ini terlihat familiar? Di sini parameter E ditugaskan ke 'D'. Kami hanya menetapkan nilai untuk menyemprotkan karakter, tetapi sebenarnya kami juga dapat menetapkan nilai ke objek. Apakah ada parameter E di jQuery? Mari kita bicarakan di bawah ini
Bagaimana parameter E dalam jQuery yang ditetapkan oleh panggilan balik?
Saya pikir semua orang akrab dengan kerangka kerja jQuery. Telah dirilis sejak lama dan digunakan selama pengembangan. Itu relatif sederhana. Sangat nyaman untuk mencari API secara online dan mudah untuk memulai. Di bawah kerangka kerja jQuery, kadang -kadang kita perlu mendapatkan beberapa parameter dalam acara tersebut, seperti koordinat klik saat ini dan objek elemen klik. Persyaratan ini mudah ditangani di jQuery:
Salinan kode adalah sebagai berikut:
$ ("#id"). bind ('klik', fungsi (e) {
//e.pagex, e.pagey, e.target ...... berbagai data
});
Cukup nyaman untuk digunakan. Bahkan, penugasan parameter E ini juga dicapai melalui fungsi callback. Parameter ini diberikan nilai objek untuk menggunakan parameter callback. Teman -teman yang telah dengan cermat mempelajari kode sumber JJQuery seharusnya menemukan ini.
Ada juga prinsip yang sama dalam parameter data AJAX $ .get ('', {}, function (data) {}).
Mari kita lihat bagaimana fungsi callback diterapkan di objek acara jQuery.
Untuk kenyamanan, saya hanya menulis tentang beberapa implementasi yang terkait dengan $. Saya telah menulis sebelumnya bahwa "Xiaotan JQuery" memiliki metode yang relatif dekat dengan implementasi kerangka kerja. Saya hanya menulis pemilih sederhana di bawah ini.
Salinan kode adalah sebagai berikut:
<Div id = "container">
</div>
<script>
var _ $ = fungsi (id)
{
this.element = document.getElementById (id);
}
_ $. Prototipe = {
Bind: Function (EVT, Callback)
{
var itu = ini;
if (document.addeventlistener)
{
this.element.addeventListener (evt, function (e) {
callback.call (this, that.standadize (e));
} ,PALSU);
}
lain jika (document.attachevent)
{
this.element.attachevent ('on'+evt, function (e) {
callback.call (this, that.standadize (e));
});
}
kalau tidak
this.element ['on'+evt] = function (e) {
callback.call (this, that.standadize (e));
};
},
Standadize: function (e) {
var evt = e || window.event;
Var Pagex, Pagey, Layerx, Layery;
// pagex koordinat horizontal pagey vertikal koordinat Layerx klik terletak di horizontal koordinat lapisan klik terletak di koordinat vertikal elemen
if (evt.pagex)
{
pagex = evt.pagex;
pagey = evt.pagey;
}
kalau tidak
{
pagex = document.body.scrollleft+evt.clientx-document.body.clientleft;
pagey = document.body.scrolltop+evt.clienty-document.body.clientltop;
}
if (evt.layerx)
{
Layerx = evt.layerx;
layery = evt.layery;
}
kalau tidak
{
Layerx = evt.offsetx;
Layerxy = evt.offsety;
}
kembali {
Pagex: Pagex,
Pagey: pagey,
Layerx: Layerx,
Lapisan: Lapisan
}
}
}
window. $ = function (id)
{
mengembalikan _ $ (id) baru;
}
$ ('container'). bind ('click', function (e) {
waspada (e.pagex);
});
$ ('container1'). bind ('click', function (e) {
waspada (e.pagex);
});
</script>
Kami terutama melihat implementasi fungsi standadize. Saya tidak akan banyak bicara tentang kode ini, objek pengembalian
Salinan kode adalah sebagai berikut:
kembali {
Pagex: Pagex,
Pagey: pagey,
Layerx: Layerx,
Lapisan: Lapisan
}
Kemudian lihat kode callback.call (this, that.standadize (e)) dalam fungsi BIND. Kode ini sebenarnya diberi nilai ke parameter E, yang diimplementasikan menggunakan callback callback.
Fungsi anonim disahkan ketika fungsi panggilan balik dipanggil
Salinan kode adalah sebagai berikut:
fungsi (e) {
}
callback.call (ini, itu.
Salinan kode adalah sebagai berikut:
(function (e) {
}) (Standadize (e))
Ini juga merupakan hal klasik tentang jQuery menggunakan fungsi callback. Beginilah parameter E ditetapkan. Setelah mengatakan ini, Anda mungkin memiliki pemahaman yang baik tentang ini dan bagaimana menggunakannya.
Callback lebih sering digunakan dalam berbagai kerangka kerja. Terkadang saat menulis sesuatu sendiri, Anda juga dapat menggunakannya sesuai dengan situasi yang sebenarnya.