Bagaimana untuk melanjutkan pemalam jquery

jQuery ialah perpustakaan JavaScript yang sangat popular dan digunakan secara meluas dalam pembangunan antara muka hadapan Web. Ramai pembangun menulis pemalam jQuery mereka sendiri untuk memenuhi keperluan mereka sendiri atau berkongsinya dengan pembangun lain. Sambungan pemalam juga sangat penting, kerana ia boleh menjadikan pemalam lebih fleksibel dan berkuasa. Artikel ini akan memperkenalkan cara melanjutkan pemalam jQuery.

1. Struktur asas pemalam jQuery

Sebelum menulis pemalam jQuery, anda perlu memahami struktur asasnya. Secara umumnya, pemalam jQuery yang ringkas mengandungi sekurang-kurangnya bahagian berikut:

1. Gunakan fungsi tanpa nama untuk membalut keseluruhan pemalam

(function($) {
/ / kod pemalam anda di sini
})(jQuery);

Cara penulisan ini adalah untuk mengelakkan pencemaran pembolehubah global.

2. Tentukan nama dan pilihan lalai pemalam

$.fn.myPlugin = function(options) {
var settings = $.extend({

option1: 'default value',
option2: 123,
option3: true

}, pilihan );
}

Kaedah $.extend digunakan di sini untuk menggabungkan pilihan lalai dan pilihan yang ditentukan pengguna bersama-sama.

3. Tulis fungsi utama pemalam

$.fn.myPlugin = function(options) {
var settings = $.extend({

option1: 'default value',
option2: 123,
option3: true

}, pilihan );

// kod pemalam anda di sini
// Nota: ini dalam pemalam menghala ke objek jQuery, bukan elemen DOM.
}

Di sini anda boleh menulis kod fungsi yang sepadan seperti yang diperlukan.

4. Menyokong panggilan berantai

$.fn.myPlugin = function(options) {
var settings = $.extend({

option1: 'default value',
option2: 123,
option3: true

}, pilihan );

// kod pemalam anda di sini

// menyokong panggilan berantai
kembalikan ini;
}

Ini biasanya akan dikembalikan Raw objek jQuery untuk menyokong panggilan berantai.

2. Lanjutkan pemalam jQuery

Sekarang mari kita lihat cara melanjutkan pemalam jQuery yang sedia ada. Yang berikut mengandaikan bahawa kami ingin melanjutkan pemalam jQuery.validate.

1. Gunakan kaedah $.fn.extend()

$.fn.extend({
myFunction: function() {

console.log('This is my function.');

}
});

Ini akan menambah kaedah bernama myFunction pada objek jQuery.

2. Gunakan kaedah $.validator.addMethod()

$.validator.addMethod('myRule', function(value, element) {
return this . pilihan(elemen) ||. /^[a-zA-Z]+$/.test(value);
}, 'Sila masukkan huruf Inggeris');

Fail bernama Peraturan pengesahan myRule digunakan untuk mengesahkan sama ada ia adalah huruf Inggeris.

3. Ubah suai pilihan lalai

$.validator.setDefaults({
sorotan: fungsi(elemen) {

$(element).addClass('highlight');

},
nyahserlahkan: function(elemen) {

$(element).removeClass('highlight');

}
});

Kaedah penyerlahan dan nyahserlah lalai diubah suai di sini dan ditukar untuk menambah atau memadam kelas serlahan .

4. Timpa kaedah

$.validator.prototype.showLabel = function(elemen, mesej) {
var label = this.errorsFor(elemen) ;
jika (label.length) {

// 修改错误提示信息
label.removeClass(this.settings.validClass).addClass(this.settings.errorClass);
label.html(message || "");

} lain {

// 显示错误提示信息
label = $('<' + this.settings.errorElement + '/>', {
  'for': this.idOrName(element),
  generated: true
})
  .addClass(this.settings.errorClass)
  .addClass('highlight')
  .attr('generated', true)
  .html(message || "");

if (this.settings.wrapper) {
  // 将错误提示信息包在指定的容器中
  label = label.hide().show().wrap('<' + this.settings.wrapper + '/>').parent();
}
if (!this.labelContainer.append(label).length)
  this.settings.errorPlacement
  ? this.settings.errorPlacement(label, $(element))
  : label.insertAfter(element);

}
};

Kaedah showLabel ditindih di sini untuk pengubahsuaian Mesej ralat lalai gaya pemalam.

Ringkasan

Melalui contoh di atas, kita dapat melihat bahawa kaedah melanjutkan pemalam jQuery adalah sangat mudah, dan anda hanya perlu membuat pengubahsuaian yang sepadan seperti yang diperlukan. Pemalam sambungan bukan sahaja dapat memenuhi keperluan anda sendiri, tetapi juga memberi manfaat kepada pembangun lain, jadi anda harus mempertimbangkan kebolehlanjutannya semasa menulis pemalam jQuery.

Atas ialah kandungan terperinci Bagaimana untuk melanjutkan pemalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!