Recommander un plug-in jQuery template_jquery

J'utilise jQuery depuis un certain temps et j'écris souvent des plugins pour celui-ci. J'ai essayé différentes façons de l'écrire, et maintenant ce modèle est mon préféré :

Copier le code Le code est le suivant :

;(fonction($) {
// plusieurs plugins peuvent aller ici
(fonction (nom du plugin) {
var valeurs par défaut = {
      couleur : 'noir',
       testFor : function(div) {
        return true ;
>
};
$.fn[pluginName] = fonction(options) {
options = $.extend(true, {}, valeurs par défaut, options);
                                                                      Renvoie this.each(function() {
var elem = ceci,
             $elem = $(elem);

// voici les tripes du plugin
Si (options.testFor(elem)) {
$elem.css({
borderWidth : 1,
borderStyle : 'solide',
                 borderColor : options.color
            });
          }
});
};
$.fn[pluginName].defaults = valeurs par défaut
})('borderize');
})(jQuery);

//Ce qui suit est l'utilisation
$('div').borderize();
$('div').borderize({color: 'red'});

Voici les raisons pour lesquelles j'aime ce modèle

1. Vous pouvez toujours accéder aux options par défaut à l'intérieur, même si elles sont remplacées (simplement accessibles via l'attribut parent)

　2. Vous pouvez changer le nom du plug-in en modifiant le pluginName. (Cette méthode est également très bénéfique pour la compression du code)

Le point n°1 est très puissant. Par exemple, si nous voulons surcharger cette méthode, mais que nous voulons quand même conserver la méthode d'origine, nous pouvons regarder l'exemple suivant :

Copier le code Le code est le suivant :

$('.borderize').borderize({
TestFor : fonction (élément) {
        var $elem = $(elem);
Si (elem.is('.inactive')) {
              return false ;
         } autre {
                          // appel de la fonction "parent"
                   return $.fn.borderize.defaults.testFor.apply(this, arguments);
>
>
});
Nous pouvons même le faire avec des propriétés régulières comme celle-ci

var someVarThatMayBeSet = false;
/* code ... */

$('.borderize').borderize({
couleur : someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});

Amis, vous aimerez aussi ce modèle de plug-in jQuery, il est tellement flexible.