Override une fonction

[Evaelis]

<p><strong>Override une fonction</strong><br/>
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.<br/>
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 <abbr title="Genre de popup dans le cas de bootstrap">modal</abbr> bootstrap (Pour ce qui ne connaissent pas <abbr title="Bootstrap Framework">bootstrap </abbr><a href="http://getbootstrap.com/javascript/" rel="external nofollow">http://getbootstrap.com/javascript/</a>). Bien que je ne connaissais pas la technique dans ce cas précis, je la classe tout de même comme base à avoir)<br/>
 </p>
<br/><pre class="ipsCode prettyprint lang-auto">
    window.alert = function(message){
        $("#fast_alert_js").find("p").html(message);
        $(".modal").modal('show');
    }</pre>
<p>L'argument message est celui de base de la fonction mais vous pouvez très bien rajouter des arguments.<br/>
Le but ici est donc d'afficher le message dans une balise de paragraphe. <abbr title="Bootstrap Framework">Bootstrap </abbr>se charge du reste.</p>
<p style="text-align:center;"><img alt="8QhGe.png" src="https://puu.sh/8QhGe.png"/></p>
<p>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é.<br/>
 <br/>
A noter que ce "tutoriel" ou plutôt code source utilise <abbr title="Bibliothèque javascript">JQuery </abbr>pour fonctionner<br/>
En passant : Si vous souhaitez utiliser ce même exemple appliqué à <abbr title="Bibliothèque javascript">JQuery </abbr>:</p>
<pre class="ipsCode prettyprint lang-auto">
(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
};
})();
</pre>
<p>Code provenant de la documentation officielle. Il est basé sur la même base que le premier exemple.<br/>
Au lieu de simplement exécuter la fonction, il va simplement log l'événement avant d’exécuter normalement celle-ci.<br/>
 </p>
<p style="text-align:right;">Evaelis</p>

[Azad]

<p>Merci du partage.<br/>
Etrangement, j'ai jamais utilisé le JS de Bootstrap, je fais souvent from scratch. J'y penserais. <br/><br/>
+1 rep.</p>

[Evaelis]

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