Tutoriel détaillé sur le plug-in jQuery development

L'extension des plug-ins et des méthodes jQuery est très puissante et peut faire gagner beaucoup de temps de développement. Cet article décrit les bases, les meilleures pratiques et les pièges courants du développement de plugins jQuery.

1. Commencer

L'écriture d'un plug-in jQuery commence par l'ajout d'un nouvel attribut de fonction à jQuery.fn. Le nom de l'attribut d'objet ajouté ici est le nom de votre plug-in :

. Copiez le code Le code est le suivant :

jQuery.fn.myPlugin = function(){

 //Le vôtre code du plug-in

};

Où est le symbole $ que les utilisateurs aiment tant ? Il existe toujours, mais afin d'éviter les conflits avec d'autres bibliothèques JavaScript, il est préférable de transmettre jQuery à un programme fermé auto-exécutable, où jQuery est mappé sur le signe $, afin d'éviter que le signe $ ne soit écrasé par d'autres bibliothèques. .

Copier le code Le code est le suivant :

(fonction ($) {
 $.fn .my​​​Plugin = function () {
           //Votre propre code de plug-in
     };
})(jQuery);

Dans ce programme fermé, nous pouvons avoir un nombre illimité. Utilisez le symbole $ pour représenter les fonctions jQuery.

2. Environnement

Maintenant, nous pouvons commencer à écrire le code du plug-in proprement dit. Cependant, avant cela, il faut avoir une idée de l’environnement dans lequel se trouve le plug-in. Dans le cadre du plug-in, le mot-clé this représente l'objet jQuery que le plug-in exécutera. Un malentendu courant est facile à survenir ici, car dans d'autres fonctions jQuery qui contiennent des rappels, le mot-clé this représente l'élément DOM natif. . Cela amène souvent les développeurs à envelopper par erreur le mot-clé this dans jQuery inutilement, comme indiqué ci-dessous.

Copier le code Le code est le suivant :

(fonction ($) {
 $.fn .m yplugin = function () {
 
 // Il n'est pas nécessaire d'envelopper ceci dans $ (this), car c'est déjà un objet jQuery this) est équivalent à $($('. #element'));

 this.fadeIn('normal', function () {

 Un élément DOM

 });

 }; 
})(jQuery);

$('#element').myPlugin();

3. Connaissances de base

Maintenant que nous comprenons les bases des plugins jQuery, écrivons un plugin qui fait plusieurs choses.

Copier le code Le code est le suivant :

(fonction ($) {
 
 $.fn.maxHeight = function () {

 var max = 0;

 this.each(function () {
 max = Math.max(max, $ (this).height());
      });

                                                                 ; la plus grande hauteur 

Il s'agit d'un simple plug-in qui utilise .height() pour renvoyer la hauteur de l'élément div ayant la plus grande hauteur sur la page. 

4. Maintenir la chaînabilité

Souvent, l'intention d'un plugin est simplement de modifier les éléments collectés d'une manière ou d'une autre et de les transmettre à la méthode suivante de la chaîne. C'est la beauté du design de jQuery et l'une des raisons pour lesquelles jQuery est si populaire. Par conséquent, pour maintenir la chaînabilité d'un plugin, vous devez vous assurer que votre plugin renvoie le mot-clé this.

Copier le code

Le code est le suivant :

(function ($) {

 $.fn.lockDimensions = function (type) {

 return this.each(function () {

 var $this = $(this);

 if (!type || type == 'width') {
 $this.width($this.width());
 }

 if (!type || type == 'height') {
 $this.height($this.height());
 }

 });

 };
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

Puisque le plugin renvoie ce mot-clé, il maintient la chaînabilité afin que les éléments collectés par jQuery puissent continuer à être contrôlés par des méthodes jQuery telles que .css. Par conséquent, si votre plugin ne renvoie pas de valeur intrinsèque, vous devez toujours renvoyer le mot-clé this dans sa portée. De plus, vous pouvez en déduire que les paramètres transmis à un plugin seront transmis dans la portée du plugin. Par conséquent, dans l'exemple précédent, la chaîne 'width' devient un paramètre de type du plugin.

5. Valeurs et options par défaut

Pour les plug-ins plus complexes offrant de nombreuses options personnalisables, il est préférable d'en avoir un qui peut être étendu lorsque le plug-in est appelé le paramètre par défaut (en utilisant $.extend). Ainsi, au lieu d'appeler un plugin avec un tas de paramètres, vous pouvez l'appeler avec un paramètre d'objet contenant les paramètres que vous souhaitez remplacer.

Copier le code Le code est le suivant :

(fonction ($) {
 
 $.fn.tooltip = function (options) {

 //Créez des valeurs par défaut et étendez toutes les options fournies
 var settings = $.extend({
 'location' : 'top',
 'background-color': 'blue'
 }, options);

 return this.each(function () {

 // Fiche d'info-bulle -in code

 });

 };
})(jQuery);

$('div').tooltip({
 'location ' : 'gauche' 
});

Dans cet exemple, lors de l'appel du plug-in d'info-bulle, l'option d'emplacement dans les paramètres par défaut est écrasée et l'option background-color reste à sa valeur par défaut, donc la valeur de paramètre finale appelée est :

Copier le code Le code est le suivant :

{
 'emplacement' : 'gauche',
 'background-color' : 'blue'
>

Il s'agit d'un moyen très flexible de fournir un plugin hautement configurable sans obliger le développeur à définir toutes les options disponibles.

6. Espace de noms

Nommer correctement votre plugin est une partie très importante du développement d'un plugin. Avec le bon espace de noms, vous pouvez garantir que votre plugin aura très peu de chances d'être écrasé par d'autres plugins ou par un autre code sur la même page. Les espaces de noms vous facilitent également la vie en tant que développeur de plugins, car ils vous aident à mieux suivre vos méthodes, vos événements et vos données.

7. Méthode du plug-in

En aucun cas, un seul plugin ne doit avoir plusieurs espaces de noms dans l'objet jQuery.fnjQuery.fn.

Copier le code Le code est le suivant :

(fonction ($) {

$.fn.tooltip = fonction (options) {
.fn.tooltipHide = function () {
// mauvais
};
$.fn.tooltipUpdate = fonction (contenu) {
// !!!
};

})(jQuery);

Ceci est déconseillé car $.fn encombre l'espace de noms $.fn. Pour résoudre ce problème, vous devez collecter toutes les méthodes du plugin dans le texte de l'objet et les appeler en transmettant le nom de chaîne de la méthode au plugin.

Copier le code Le code est le suivant :

(fonction ($) {
 
 var méthodes = {
 init : fonction (options) {
 },
 show : fonction () // est
 },
 cacher : Fonction () {
 // Bien 
}, 
 Mise à jour : Fonction (Contenu) {
 // !!! 
} 
} ; 
 
 $. ) {

                                                                                                                                                                                                         // Appel de méthode (arguments, 1));
      } typeof method === 'objet' || !method) {
                 return méthodes.init.apply( 🎜>                                                                                                                                                       >//Appelez la méthode d'initialisation
$('div').tooltip();

//Appelez la méthode d'initialisation
$('div'). tooltip({
 foo: 'bar'
});

//Appelez la méthode hide
$('div').tooltip('hide');

//Appelez la méthode Update
 $('div').tooltip('update', 'Ceci est le nouveau contenu de l'info-bulle !');



Ce type d'architecture de plugin vous permet d'encapsuler toutes les méthodes dans un package parent et de les appeler en transmettant le nom de chaîne de la méthode et les paramètres supplémentaires requis par cette méthode. Ce type d'encapsulation et d'architecture est standard dans la communauté des plug-ins jQuery et est utilisé par d'innombrables plug-ins, y compris les plug-ins et les widgets de l'interface utilisateur jQuery. 



8. Événements 


Une fonction peu connue de la méthode bind permet de lier les espaces de noms d'événements. Si votre plugin lie un événement, une bonne pratique consiste à créer un espace de noms pour cet événement. De cette façon, lorsque vous dissocierez, vous n'interférerez pas avec d'autres événements du même type qui pourraient déjà être liés. Vous pouvez le faire en ajoutant l'espace de noms à l'événement que vous devez lier via '.'. 

Copier le code

Le code est le suivant :

(function ($) {

    var méthodes = {
        init : function (options) {

             return this.each(function () {
 $(window).bind('resize.tooltip', méthodes.reposition);
             });

        },
        destroy: function () {

             renvoie ceci. each(function () {
                $(window).unbind('.tooltip');
            })

        },
        reposition: function () {
            //. ..
        },
       afficher : fonction () {
            //...
        },
        masquer : fonction () {
            //...
        } ,
        mise à jour : fonction (contenu) {
             //...
        }
    };

    $.fn.tooltip = fonction (méthode) {

        if (methods[method]) {
            retourne les méthodes[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object ' || !method) {
            return méthodes.init.apply(this, arguments);
        } else {
            $.error('La méthode 'méthode' n'existe pas sur jQuery.tooltip'); 
        }
    };

})(jQuery);

$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');

在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。稍后，当开发人员需要销毁tooltip的时候， Il s'agit d'un repositionnement d'un redimensionnement.全地解除事件的绑定并不会影响到此插件之外的绑定。

九、数据

通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元Les données de jQuery sont également disponibles.于记录大量的不同名字的分离的data, 空间读取这个对象不失为一个更好的方法。

复制代码代码如下 :

(function ($) {

    var méthodes = {
        init : function (options) {

             return this.each(function () {

               var $this = $(this),
                    data = $this.data('tooltip'),
                    tooltip = $('

',                 texte : $ this.attr('title')
                    });

                // Si le plugin n'a pas encore été initialisé
                if (!data)          /*
                     Faites plus de configuration ici
                     */

                   $(this).data('tooltip', {
                        cible : $this,
                        info-bulle : info-bulle
                     });

                }
            });
        },
        détruire : function () {

             return this.each(function () {

                var $this = $(this),
                    data = $this.data('tooltip');

                // Espacement de noms FTW
                 $(window).unbind('.tooltip');
data.tooltip.remove();
                $this.removeData('tooltip');

            })

        },
        reposition: function (
            / / ...
        },
        afficher : fonction () {
            // ...
        },
        masquer : fonction () {
            // ...
        },
        mise à jour : fonction (contenu) {
             // ...
        }
    };

    $.fn.tooltip = fonction (méthode) {

        if (methods[method]) {
            return méthodes[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'objet' || !method) {
            return méthodes.init.apply(this, arguments);
        }else {
                $.error('La méthode 'méthode' n'existe pas sur jQuery.tooltip'>
);
L'encapsulation des données dans un objet via un espace de noms facilite la lecture de toutes les propriétés du plugin à partir d'un emplacement centralisé.

10.Résumé et bonnes pratiques

L'écriture de plug-ins jQuery vous permet de créer des bibliothèques qui intègrent les fonctions les plus utiles dans du code réutilisable, ce qui fait gagner du temps aux développeurs et rend le développement plus efficace. Lorsque vous développez des plugins jQuery, gardez à l'esprit :

1. Toujours emballé dans un plug-in fermé :

Copier le code

Le code est le suivant : (function ($) {/* le plugin va ici */})(jQuery);2 N'encapsulez pas de manière redondante ce mot-clé dans la portée de la fonction du plug-in.

3. Sauf si le plugin renvoie une valeur spécifique, sinon le mot-clé this est toujours renvoyé pour maintenir la chaînabilité.

Transmettez un paramètre d'objet par défaut extensible au lieu d'un grand nombre de paramètres au plug-in. 
Ne nommez pas différentes méthodes plusieurs fois dans un plug-in. 
Toujours les méthodes, événements et données d'espace de noms. 

Tutoriel détaillé sur le plug-in jQuery development_jquery