Comment étendre le plug-in jquery

jQuery est une bibliothèque JavaScript très populaire et largement utilisée dans le développement d'interfaces Web frontales. De nombreux développeurs écrivent leurs propres plug-ins jQuery pour répondre à leurs propres besoins ou les partagent avec d'autres développeurs. L'extension des plug-ins est également très importante, car elle peut rendre les plug-ins plus flexibles et plus puissants. Cet article explique comment étendre le plug-in jQuery.

1. La structure de base du plug-in jQuery

Avant d'écrire un plug-in jQuery, vous devez comprendre sa structure de base. De manière générale, un simple plug-in jQuery contient au moins les parties suivantes :

1. Utilisez une fonction anonyme pour envelopper l'intégralité du plug-in

(function($) {
// votre code de plugin ici
})( jQuery);

Cette façon d'écrire vise à éviter la pollution des variables globales.

2. Définissez le nom et les options par défaut du plugin

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

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

}, options );
}

$ est utilisé ici. La méthode extend fusionne les options par défaut et les options définies par l'utilisateur.

3. Écrivez les principales fonctions du plug-in

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

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

}, options );

// votre code de plugin ici
// Remarque : ceci dans le plugin pointe vers l'objet jQuery, pas l'élément DOM.
}

Ici, vous pouvez écrire le code de fonction correspondant selon vos besoins.

4. Prend en charge les appels en chaîne

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

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

}, options );

// votre code de plugin ici

// Prend en charge les appels enchaînés
renvoient ceci ;
}

L'objet jQuery d'origine est généralement renvoyé ici pour prendre en charge les appels enchaînés.

2. Étendre le plug-in jQuery

Voyons maintenant comment étendre un plug-in jQuery existant. Ce qui suit suppose que nous souhaitons étendre le plug-in jQuery.validate.

1. Utilisez la méthode $.fn.extend()

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

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

}
});

Cela ajoutera un nouvel objet nommé méthode de myFunction .

2. Utilisez la méthode $.validator.addMethod()

$.validator.addMethod('myRule', function(value, element) {
return this.optional(element) || /^[a-zA- Z ]+$/.test(value);
}, 'Veuillez saisir des lettres anglaises ');

Une règle de vérification nommée myRule est définie ici pour vérifier s'il s'agit de lettres anglaises.

3. Modifier les options par défaut

$.validator.setDefaults({
highlight: function(element) {

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

},
unhighlight: function(element) {

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

}
});

Modifié ici Modifiez les méthodes de surbrillance et de désaccentuation par défaut pour ajouter ou supprimer des classes de surbrillance.

4. Remplacer une méthode

$.validator.prototype.showLabel = function(element, message) {
var label = this.errorsFor(element);
if (label.length) {

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

} else {

// 显示错误提示信息
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);

}
};

La méthode showLabel est réécrite ici pour modifier le style de message d'erreur par défaut du plug-in.

Résumé

À travers les exemples ci-dessus, nous pouvons voir que la méthode d'extension du plug-in jQuery est très simple et qu'il vous suffit d'apporter les modifications correspondantes si nécessaire. Les plug-ins d'extension peuvent non seulement répondre à vos propres besoins, mais également bénéficier à d'autres développeurs, vous devez donc tenir compte de leur extensibilité lors de l'écriture de plug-ins jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!