Override une fonction
-
<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>
<br/><br/>
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login