jQuery
Plugins

Plugins - Mise en route

L'API jQuery peut être étendue en ajoutant à son prototype. Par exemple, l’API existante dispose déjà de nombreuses fonctions telles que .hide() , .fadeIn() , .hasClass() , etc.

Le prototype jQuery est exposé via $.fn , le code source contient la ligne

jQuery.fn = jQuery.prototype

L'ajout de fonctions à ce prototype permettra à ces fonctions d'être disponibles pour être appelées depuis n'importe quel objet jQuery construit (ce qui se fait implicitement avec chaque appel à jQuery, ou chaque appel à $ si vous préférez).

Un objet jQuery construit contiendra un tableau interne d'éléments basé sur le sélecteur qui lui est transmis. Par exemple, $('.active') va créer un objet jQuery contenant des éléments avec la classe active, au moment de l'appel (comme dans, il ne s'agit pas d'un ensemble d'éléments).

La valeur this intérieur de la fonction plugin fera référence à l'objet jQuery construit. Par conséquent, this est utilisé pour représenter l'ensemble correspondant.

Plugin de base :

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

jsFiddle exemple

Chaînabilité et réutilisabilité

Contrairement à l'exemple ci - dessus , les plug-ins jQuery sont censés être Chainable .
Cela signifie qu'il est possible de chaîner plusieurs méthodes dans une même collection d'éléments, comme $(".warn").append("WARNING! ").css({color:"red"}) (voir comment nous avons utilisé le .css() méthode .css() après le .append() , les deux méthodes s’appliquent à la même collection .warn )

Autoriser l'utilisation du même plug-in sur différentes collections en passant par différentes options de personnalisation joue un rôle important dans la personnalisation / réutilisation

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsfiddle démo

Liberté

Les exemples ci-dessus concernent la compréhension de la création de plug-ins de base. N'oubliez pas de ne pas restreindre un utilisateur à un ensemble limité d'options de personnalisation.

Disons par exemple que vous voulez construire un .highlight() où vous pouvez passer une chaîne de texte souhaitée qui sera mise en évidence et autoriser une liberté maximale en ce qui concerne les styles:

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

l'utilisateur peut maintenant transmettre un texte souhaité et contrôler complètement les styles ajoutés en utilisant une classe CSS personnalisée:

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

jsFiddle exemple

Méthode jQuery.fn.extend ()

Cette méthode étend l'objet prototype jQuery ($ .fn) pour fournir de nouvelles méthodes personnalisées pouvant être chaînées à la fonction jQuery ().

Par exemple:

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>