Usage avancé des fonctions JavaScript
►http://jpvincent.developpez.com/tutoriels/javascript/usage-avance-fonctions-javascript
Renvoi de fonction
Une fonction peut se redéfinir elle-même quand elle s’exécute. Ça a l’air sale dit comme ça, mais nous allons voir un cas concret où cela est bien utile. Imaginez que vous construisez une minibibliothèque dont une des fonctions permet de se rattacher à un événement du DOM. Pour supporter tous les navigateurs, il y a deux méthodes aux noms distincts et aux arguments légèrement différents que vous pouvez encapsuler dans une fonction en faisant un simple if.
var onDOMEvent =
function( el, ev, callback) {
// le monde de Microsoft
if(document.body.attachEvent){
el.attachEvent(’on’+ev, callback) ;
// le monde du W3C
} else {
el.addEventListener( ev, callback, false) ;
}
} ;
Cette fonction marche très bien, mais à chaque fois qu’elle est exécutée, le test sur la condition aussi est exécuté. Si vous faites une bibliothèque, vous vous devez de ne pas ralentir les développeurs qui l’utiliseraient. Or cette fonction pourrait très bien être appelée des centaines de fois, exécutant ainsi inutilement du code. Pour optimiser cela, nous allons redéfinir la fonction à la volée lors de sa première exécution.
var onDOMEvent =
function( ) {
if(document.body.attachEvent) {
return function(element, event, callback) {
element.attachEvent(’on’+ event, callback) ;
} ;
} else {
return function(element, event, callback) {
element.addEventListener( event, callback) ;
} ;
}
}() ;
Comme vous le voyez :
cette fonction est auto-exécutée grâce aux deux parenthèses finales et n’a plus besoin des arguments puisqu’elle ne sera plus jamais exécutée après ;
le if reste, mais il ne sera exécuté qu’une seule fois ;
la fonction renvoie des fonctions anonymes contenant les codes spécifiques au navigateur, notez que ces fonctions attendent toujours les mêmes paramètres ;
lorsque onDOMEvent() sera appelée, seul l’un ou l’autre corps de fonction sera exécuté, nous avons atteint notre objectif.