Comment développer un plugin jQuery

Guide de développement du plug-in jQuery: Création de composants réutilisables

Points de base:

• Créer un plug-in jQuery permet aux développeurs de créer des composants qui peuvent être réutilisés sur n'importe quelle page Web, réduisant le risque de conflits de nom de fonction. Le plug-in utilise la définition de la fonction fn de jQuery. this
Lors du développement de plug-ins jQuery, le traitement des paramètres est très important. Pour éviter le traitement des paramètres complexes, passez un seul objet JSON au lieu de plusieurs paramètres. Vous pouvez utiliser la fonction
• de jQuery pour fusionner les paramètres par défaut et les paramètres de l'utilisateur. extend
Assurez-vous que la méthode renvoie
• pour permettre à d'autres fonctions de passer des appels enchaînés, une caractéristique clé de jQuery appelé "appels enchaînés". Le plugin doit être enregistré avec l'extension this et inclus dans la page HTML après le chargement de la bibliothèque JQuery. .js

jQuery est la bibliothèque JavaScript la plus populaire, que de nombreux sites Web utilisent pour obtenir des effets dynamiques et des fonctionnalités AJAX. Cependant, relativement peu de développeurs plongent dans le développement des plugins. Ce tutoriel créera un plugin simple pour expliquer ses bases. Notre code inversera le texte à partir d'un ou plusieurs nœuds sélectionnés - affichez la page de démonstration.

Pourquoi créer un plugin jQuery?

en bref: réutilisation. En étendant JQuery, vous pouvez créer des composants qui peuvent être réutilisés sur n'importe quelle page Web. Votre code est encapsulé et il est peu probable que vous utilisiez le même nom de fonction ailleurs.

Comment fonctionne jQuery

Dans la partie centrale, jQuery reçoit un élément DOM ou une chaîne contenant un sélecteur CSS. Il renvoie un objet jQuery, qui est une collection de nœuds DOM de type tableau. Ensuite, une ou plusieurs méthodes

peuvent être appelées dans une chaîne à ce groupe de nœuds, par exemple:

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

Remarque: Bien que la bibliothèque jQuery soit appelée "jQuery", "$" est une variable de raccourci qui le fait référence. Notez que d'autres bibliothèques peuvent occuper "$".

Comment fonctionne le plugin jQuery

jQuery permet d'ajouter des méthodes à ses bibliothèques. Lorsque ces méthodes sont appelées, l'objet jQuery est passé comme un objet

de JavaScript. Le nœud DOM peut être utilisé selon les besoins et la méthode doit retourner this afin que d'autres fonctions puissent être appelées enchaînées. Notre exemple de plugin sera appelé en utilisant le code suivant: this

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

Nous ajouterons également deux paramètres facultatifs:

et minlength. Si ces deux paramètres sont définis, la longueur de la chaîne doit être entre ces deux limites afin d'être inversée. maxlength

Instruction du plugin Le plugin

utilise la définition de la fonction de jQuery

, par exemple: fn

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

L'utilisation de "jQuery" au lieu de "$" garantit qu'il ne fait pas entrer en conflit avec d'autres bibliothèques JavaScript. Tout notre code interne doit également se référer à "jQuery" au lieu de "$". Cependant, nous pouvons utiliser des fonctions anonymes pour enregistrer des entrées et réduire la taille du fichier:

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

Cette fonction s'exécute immédiatement et passe JQuery en tant que paramètre nommé "$". Étant donné que "$" est une variable locale, nous pouvons supposer qu'il fait toujours référence à la bibliothèque jQuery, plutôt que la première autre bibliothèque pour obtenir la variable "$" globale.

Paramètres du plugin

Notre plugin nécessite deux paramètres: minlength et maxlength. Le moyen le plus simple est de les définir comme des paramètres de fonction, par exemple:

jQuery.fn.reverseText = function(params) { ... };

Mais que se passe-t-il si nous décidons d'ajouter plus de paramètres plus tard? Notre plugin peut avoir des dizaines d'options - le traitement des paramètres peut rapidement devenir compliqué. Comme alternative, nous pouvons passer un seul objet JSON, par exemple:

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

La première ligne de la fonction doit définir un ensemble de paramètres par défaut, puis remplacer les paramètres

avec n'importe quelle valeur définie par l'utilisateur reverseText. La fonction de jQuery peut nous aider à résoudre ce problème: extend

Par conséquent, à moins que le code d'appel écrase ces valeurs,

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

est 0 et

est 99999. params.minlength params.maxlength

Code de plugin

Maintenant, nous pouvons écrire notre code de plugin principal:

Explication:

(function($) {
    $.fn.reverseText = function(params) { ... }
})(jQuery);

// 示例
$("p").reverseText( { minlength: 0, maxlength: 100 } );

Les fonctions traversent tous les nœuds jQuery Dom et appellent une fonction anonyme.
1. this.each Dans la fonction, "ce" contient un seul nœud. Une collection de nœuds jQuery est attribuée à
afin que nous puissions exécuter la méthode jQuery.
2. $t La variable
est attribuée en tant que chaîne de texte dans le nœud DOM.
3. Définir sur une chaîne vide. origText newText Si la longueur de
est entre
4. et origText, la boucle crée une chaîne de texte inversée dans params.minlength. Mettez ensuite à jour le nœud DOM en conséquence. params.maxlength newText

Ne brisez pas l'appel de la chaîne!

Enfin, nous devons nous rappeler de retourner l'objet jQuery afin que d'autres méthodes puissent être appelées enchaînées:

// 合并默认参数和用户参数
params = $.extend( {minlength: 0, maxlength: 99999}, params);

Code complet

Notre code de plugin est maintenant terminé:

Enregistrez ce fichier sous

// 遍历所有节点
this.each(function() {

    // 将单个节点表示为 jQuery 对象
    var $t = $(this);

    // 查找文本
    var origText = $t.text(), newText = '';

    // 文本长度是否在定义的限制内？
    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {
        for (var i = origText.length; i--; ) newText += origText.substr(i, 1);
        $t.text(newText);
    }

});

. Nous pouvons ensuite inclure la bibliothèque jQuery dans n'importe quelle page HTML une fois qu'il a été chargé, par exemple:

jquery.reversetext.js

La liste de cette page inverse désormais le texte dans les première et troisième balles (rappelez-vous, le premier élément commence par 0):

return this;

Ressources:

• Afficher la page de démonstration du plugin
• Afficher le code javascript du plugin
• Télécharger des plugins et un exemple de code

Vous devriez maintenant avoir une bonne compréhension du développement du plug-in jQuery. Le Forum JavaScript SitePoint est également une excellente ressource pour rechercher de l'aide et des conseils. À venir bientôt: un nouveau tutoriel en trois parties sur la façon de créer des composants de page utiles dans les plugins jQuery.

(La partie FAQ du document d'origine est omise ici car le contenu de cette partie ne correspond pas aux exigences pseudo-originales et est trop long.)

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!