Pour ceux qui font de la programmation orientée objet A.K.A POO, le terme d’héritage est familier. Il s’agit simplement de prendre une fonction et de l’enrichir de nouvelles possibilités. On dit que la fonction fille hérite de la fonction mère (bien qu’en POO on hérite des classes et non des fonctions). Nous allons donc voir comment ajouter des fonctionnalités aux méthodes ou fonctions du cœur de jQuery.

Vous savez certainement qu’il est possible de réécrire des fonctions de base, qu’il s’agisse de fonction javascript ou jQuery, cela est très simple et très rapide :

function alert(message) {
    $('body').append('<div id="dialog" title="Message">' + message + '</div>');  
    $('#dialog').dialog();
}

Ici par exemple, on réécrit la fonction alert() de javascript pour ne pas que le message s’affiche dans la fenêtre par défaut du navigateur. En lieu et place de celle-ci, on affiche le message dans une fenêtre de dialogue de jQuery UI.

Cependant, en réécrivant de la sorte une fonction, on perd tout son comportement de base, or, ce n’est pas ce que nous recherchons puisque nous voulons simplement lui ajouter des fonctionnalité. Pour cela, on va d’abord stocker la méthode originale dans une variable, puis ajouter les traitements que l’on veut lui adjoindre et enfin appliquer la méthode d’origine.

// on "hérite" la méthode hide
// on stocke donc tout d'abord la méthode dans une variable
var originalHide = jQuery.fn.hide;

// On défini ensuite le(s) comportement(s) supplémentaire(s)
jQuery.fn.hide = function() {
    // on effectue ici tous nos traitements
    console.log('un simple console log pour l\'exemple !');

    // On applique enfin la méthode originale
    originalHide.apply(this, arguments);
}

Certaines méthodes ne s’appliquent pas à un objet jQuery, mais font partie du namespace jQuery (par opposition aux autres, qui font partie du prototype jQuery). Ces méthodes, à l’instar de $.post, s’héritent d’une manière légèrement différente.

En effet, les méthodes appelées sur un objet jQuery font partie du $.fn namespace, tandis que les autres font partie du $ namespace, le jQuery “core”. Ainsi, pour modifier $.post par exemple, vous irez chercher post non dans le namespace jQuery.fn.post, mais bien dans jQuery.post. Un petit exemple sera plus parlant :

jQuery.post = function() {
    // on effectue ici tous nos traitements
    console.log('un simple console log pour l\'exemple !');

    // On applique la méthode originale
    originalPostMethod.apply(this, arguments);
}

Vous pouvez maintenant personnaliser les fonctions jQuery pour mieux répondre aux besoins de votre application.

Une question ? Une remarque ? Les commentaires sont là !