Override une fonction

[Evaelis]

Override une fonction
Dans un de mes récents projets j'ai eu besoin d'override la fonction Alert en javascript afin qu'elle affiche une popup stylisé, en accord avec le thème de mon site et qui ne peux pas être bloquée nativement.
L'idée peut paraitre facile mais je n'avais pas imaginé que l'on pouvait modifier une fonction membre de window donc voilà mon code fonctionnant avec un modal bootstrap (Pour ce qui ne connaissent pas bootstrap http://getbootstrap.com/javascript/). Bien que je ne connaissais pas la technique dans ce cas précis, je la classe tout de même comme base à avoir)

    window.alert = function(message){
        $("#fast_alert_js").find("p").html(message);
        $(".modal").modal('show');
    }

L'argument message est celui de base de la fonction mais vous pouvez très bien rajouter des arguments.
Le but ici est donc d'afficher le message dans une balise de paragraphe. Bootstrap se charge du reste.

Le rendu obtenu est ainsi bien mieux que celui de départ. Il vous permettras d'éviter de recréer une fonction pour une même utilité.
 
A noter que ce "tutoriel" ou plutôt code source utilise JQuery pour fonctionner
En passant : Si vous souhaitez utiliser ce même exemple appliqué à JQuery :

(function() {
var originMethod= jQuery.fn.setArray; //Sauvegarde de la fonction de base
jQuery.fn.setArray = function() { // Début de l'override
console.log( this, arguments ); // Log
return originMethod.apply( this, arguments ); // Exécution de la méthode originale
};
})();

Code provenant de la documentation officielle. Il est basé sur la même base que le premier exemple.
Au lieu de simplement exécuter la fonction, il va simplement log l'événement avant d’exécuter normalement celle-ci.

Evaelis

[Azad]

Merci du partage.
Etrangement, j'ai jamais utilisé le JS de Bootstrap, je fais souvent from scratch. J'y penserais.

+1 rep.

[Evaelis]

A vrai dire, depuis que j'ai découvert les applications de bootstrap couplé à jquery, j'utilise plus que ça.