Mengintegrasikan Kaedah Awam dan Panggilan Balik
Tambahkan kaedah awam pada pemalam untuk interaksi luaran dan sertakan fungsi panggilan balik supaya pengguna boleh menyambung pada peristiwa pemalam tertentu.
Mengintegrasikan Kaedah Awam dan Panggilan Balik ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.
Berinteraksi dengan Pemalam Anda
Pemalam yang hebat bukan sekadar berdiri sendiri. Pemalam tersebut membolehkan pengguna berinteraksi dengannya selepas dimulakan! Pelajaran ini mengajar anda cara menambahkan kaedah awam untuk kawalan luaran dan fungsi panggil balik untuk tindak balas tersuai.
- Kaedah Awam: Fungsi yang boleh dipanggil oleh pengguna pada tika pemalam yang telah dimulakan.
- Panggil Balik: Fungsi yang dijalankan apabila peristiwa tertentu berlaku dalam pemalam anda.
Mengimbas Kembali Asas Pemalam
Ingat bahawa pemalam jQuery biasanya dibungkus dalam Immediately Invoked Function Expression (IIFE) untuk mengelakkan pencemaran skop global. Struktur ini menyediakan tempat yang selamat untuk logik dan pemboleh ubah dalaman pemalam anda.
Kita akan membina berdasarkan corak yang sudah biasa ini.
(function($) {
$.fn.myPlugin = function(options) {
// Default settings
var settings = $.extend({}, $.fn.myPlugin.defaults, options);
return this.each(function() {
var $this = $(this); // The element the plugin is applied to
// Plugin logic goes here
console.log("Plugin initialized on: " + $this.attr('id'));
});
};
// Default options
$.fn.myPlugin.defaults = {
message: "Hello from plugin!"
};
})(jQuery);
// How to use (in HTML <div id="myElement"></div>):
// $('#myElement').myPlugin();Apakah Kaedah Awam?
Kaedah awam ialah fungsi yang didedahkan oleh pemalam anda dan boleh dipanggil dari luar skop dalaman, walaupun selepas pemalam dimulakan pada sesuatu elemen.
Anggaplah ia sebagai alat kawalan jauh untuk pemalam anda. Anda boleh mengarahkannya melakukan perkara seperti "reset", "kemas kini" atau "mendapatkan nilai".
Melaksanakan Kaedah Awam
Untuk menambahkan kaedah awam, biasanya kita menyimpan data tika pemalam (termasuk kaedahnya) terus pada elemen DOM menggunakan kaedah .data() jQuery.
Mari cipta pemalam "counter" ringkas dan tambahkan kaedah getValue.
(function($) {
$.fn.counterPlugin = function(options) {
var settings = $.extend({
initialValue: 0
}, options);
return this.each(function() {
var $this = $(this);
var value = settings.initialValue;
var methods = {
getValue: function() {
return value;
},
increment: function() {
value++;
$this.text(value); // Update display
},
init: function() {
$this.text(value); // Initial display
}
};
// Store methods on the element's data
$this.data('counterPlugin', methods);
methods.init(); // Initialize display
});
};
})(jQuery);
// HTML: <div id="myCounter"></div>
// Usage: $('#myCounter').counterPlugin();
// Later: $('#myCounter').data('counterPlugin').getValue();Memanggil Kaedah Awam
Setelah pemalam anda dimulakan dan kaedahnya disimpan melalui .data(), anda boleh mengakses dan memanggilnya secara terus.
Caranya adalah dengan mendapatkan tika yang disimpan daripada elemen terlebih dahulu, kemudian memanggil kaedah pada tika tersebut.
// Assume counterPlugin from previous scene is loaded
// HTML: <div id="myCounter"></div>
$(document).ready(function() {
// Initialize the plugin
$('#myCounter').counterPlugin({ initialValue: 5 });
// Get the plugin instance
var counterInstance = $('#myCounter').data('counterPlugin');
// Call public methods
console.log("Current value: " + counterInstance.getValue());
counterInstance.increment();
console.log("After increment: " + counterInstance.getValue());
});Apakah Panggil Balik?
Fungsi panggil balik ialah fungsi yang anda hantarkan kepada pemalam, dan pemalam melaksanakannya pada masa tertentu sepanjang kitar hayatnya atau apabila peristiwa dalaman tertentu berlaku.
Fungsi ini membolehkan pengguna "menyambung" pada tingkah laku pemalam anda dan menambahkan logik tersuai mereka sendiri tanpa mengubah kod sumber pemalam.
- Anggaplah fungsi ini seperti pendengar peristiwa untuk tindakan dalaman pemalam.
- Panggil balik biasa:
onInit,onChange,onComplete.
Melaksanakan Panggil Balik
Untuk melaksanakan panggil balik, tentukan dahulu fungsi tersebut dalam pilihan lalai pemalam anda. Kemudian, dalam pemalam anda, panggil fungsi ini apabila peristiwa yang berkaitan berlaku, sambil menghantar sebarang data yang berguna.
Mari kembangkan pemalam counter kita dengan panggil balik onChange.
(function($) {
$.fn.counterPlugin = function(options) {
var settings = $.extend({
initialValue: 0,
onChange: function(newValue) {} // Default empty callback
}, options);
return this.each(function() {
var $this = $(this);
var value = settings.initialValue;
var methods = {
getValue: function() {
return value;
},
increment: function() {
value++;
$this.text(value);
// Call the callback when value changes
settings.onChange.call($this[0], value);
},
init: function() {
$this.text(value);
}
};
$this.data('counterPlugin', methods);
methods.init();
});
};
})(jQuery);
// Usage: See next scene!Menghantar Fungsi Panggil Balik
Pengguna menghantar fungsi panggil balik tersuai mereka terus dalam objek pilihan pemalam semasa pemulaan. Fungsi ini kemudiannya akan dipanggil oleh pemalam pada masa yang sesuai.
Perhatikan penggunaan .call($this[0], value). Ini menetapkan this dalam panggil balik kepada elemen DOM dan menghantar nilai baharu sebagai argumen.
// Assume counterPlugin with onChange callback is loaded
// HTML: <div id="myCounter"></div>
$(document).ready(function() {
$('#myCounter').counterPlugin({
initialValue: 10,
onChange: function(newValue) {
console.log("Counter changed to: " + newValue + " on element: " + this.id);
if (newValue % 2 === 0) {
$(this).css('color', 'blue');
} else {
$(this).css('color', 'red');
}
}
});
var counterInstance = $('#myCounter').data('counterPlugin');
counterInstance.increment(); // Triggers callback
counterInstance.increment(); // Triggers callback
});Pelbagai Kaedah dan Panggil Balik
Anda boleh menentukan beberapa kaedah awam dan panggil balik yang berbeza untuk mengendalikan pelbagai peristiwa dalam pemalam anda. Ini menghasilkan komponen yang fleksibel dan berkuasa.
- Kaedah awam membolehkan pengguna memberikan arahan kepada pemalam.
- Panggil balik membolehkan pemalam memaklumkan kod pengguna tentang perkara yang sedang berlaku.
(function($) {
$.fn.advancedCounter = function(options) {
var settings = $.extend({
initial: 0,
onIncrement: null, // New callback
onDecrement: null, // New callback
onReset: null // New callback
}, options);
return this.each(function() {
var $this = $(this);
var value = settings.initial;
var methods = {
getValue: function() { return value; },
increment: function() {
value++;
$this.text(value);
if ($.isFunction(settings.onIncrement)) {
settings.onIncrement.call($this[0], value);
}
},
decrement: function() {
value--;
$this.text(value);
if ($.isFunction(settings.onDecrement)) {
settings.onDecrement.call($this[0], value);
}
},
reset: function() {
value = settings.initial;
$this.text(value);
if ($.isFunction(settings.onReset)) {
settings.onReset.call($this[0], value);
}
},
init: function() { $this.text(value); }
};
$this.data('advancedCounter', methods);
methods.init();
});
};
})(jQuery);
// HTML: <div id="myAdvancedCounter"></div>
$(document).ready(function() {
$('#myAdvancedCounter').advancedCounter({
initial: 100,
onIncrement: function(v) { console.log("Inc: " + v); },
onReset: function(v) { console.log("Reset to: " + v); }
});
var inst = $('#myAdvancedCounter').data('advancedCounter');
inst.increment();
inst.reset();
});Petua Kaedah Awam dan Panggil Balik
Semasa mereka bentuk antara muka awam pemalam anda, ingat petua berikut:
- Penamaan Konsisten: Gunakan nama yang jelas dan deskriptif untuk kaedah serta panggil balik.
- Pengendalian Ralat: Semak sama ada panggil balik benar-benar merupakan fungsi sebelum memanggilnya (contohnya,
$.isFunction(settings.onComplete)). - Konteks: Gunakan
.call()atau.apply()untuk menetapkan konteksthisbagi panggil balik, biasanya kepada elemen yang digunakan oleh pemalam. - Argumen: Hantar data yang berkaitan kepada panggil balik (contohnya, nilai baharu atau objek peristiwa).
Kuiz Interaksi Pemalam
Pertimbangkan pemalam jQuery yang dimulakan pada #myElement. Pemalam tersebut mempunyai kaedah awam bernama doSomething() dan panggil balik onComplete.
Coretan kod manakah yang memanggil kaedah awam dengan betul DAN menghantar panggil balik tersuai semasa pemulaan?
Imbas Kembali dan Langkah Seterusnya
Anda telah menguasai cara menjadikan pemalam jQuery benar-benar interaktif dan fleksibel!
- Kaedah awam membolehkan kod luaran mengawal dan menyoal pemalam anda selepas pemalam dimulakan.
- Panggil balik menyediakan ruang sambungan untuk pengguna menyuntik logik tersuai sebagai tindak balas terhadap peristiwa dalaman pemalam.
Teknik ini amat penting untuk membina pemalam jQuery yang mantap, boleh digunakan semula dan mesra pengguna.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Mengintegrasikan Kaedah Awam dan Panggilan Balik” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Mengintegrasikan Kaedah Awam dan Panggilan Balik”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.
Apakah yang akan saya pelajari dalam “Mengintegrasikan Kaedah Awam dan Panggilan Balik”?
Tambahkan kaedah awam pada pemalam untuk interaksi luaran dan sertakan fungsi panggilan balik supaya pengguna boleh menyambung pada peristiwa pemalam tertentu. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 3.
Berapa lamakah pelajaran “Mengintegrasikan Kaedah Awam dan Panggilan Balik” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Corak Reka Bentuk Pemalam dan Skop
- Membina Pemalam yang Boleh Dikonfigurasi dan Digunakan Semula
- Mengintegrasikan Kaedah Awam dan Panggilan Balik