Attribution de fonction sur un onclick, quelle approche ?

Yop,

Lorsque vous attribuez une fonction sur un évenement onclick sur un élement, vous la définissez habituellement en tant que fonction anonyme ou en référence à une fonction déjà définie ?
J'avais l'habitude de toujours définir mes fonctions et de faire pointer les .onclick dessus, mais en regardant les exemples de jQuery (entre autres) je vois qu'ils font toujours appel à des tas de fonctions anonymes.

J'avoue que j'avais dans la tête depuis trés longtemps qu'il était plus interessant de faire appel à une vraie fonction plutot qu'à une anonyme. Que faire référence à un objet déjà créé prendrais moins de temps de calcul que reexecuter à chaque fois une "nouvelle" fonction mais à voir des tas d'exemple usant et abusant des fonctions anonymes j'me dis que finalement j'ai p't'etre pas la bonne approche

Bref, à choisir entre les deux approches suivantes, laquelle utilisez-vous plutot, et qu'est-ce que ca change concretement ?

var a = document.getElementsByTagName("a");
var j = a.length;
while (j--) {
	a[j].onclick = function() { return confirm("Etes-vous sur de 
vouloir suivre ce lien ?");} 
}

OU

var a = document.getElementsByTagName("a");
var j = a.length;
while (j--) {
	a[j].onclick = confirmLink;
}
function confirmLink() {
	return confirm("Etes-vous sur de vouloir suivre ce lien ?");
}

Voilou, en esperant pouvoir ainsi me coucher moins bête demain (ouais parce que pour ce soir c'est raté )

Personnellement j'utilise un event listener avec des garbages collector custom

bonsoir,

les fonctions anonymes conviennent bien lors d'utilisation unique de ces fonctions .

Mais comme elle n'ont pas de nom , on ne peut pas les appeller ... par leur nom

enfin presque vu que :

var e = function(x) {return x*x;}; // definit une fonction et la stocke

...est permis !

... si ta fonction doit reservir , le constructeur function nom_fonction() est plus indiqué

C'est peut-etre l'avantage et le désavantage d'un langage peut typé : de pouvoir mettre n'importe quoi dans tout , et le contraire ...(je vais recevoir des pierres moi )

kzone a écrit :
bonsoir,

les fonctions anonymes conviennent bien lors d'utilisation unique de ces fonctions .

C'est absolument pas le cas ici, puisqu'on parle de passage par référence.

Si j'ai besoin d'une fonction de callback que je sais qui ne sera appellée qu'une fois sur la page, par exemple au chargement, alors je la mets en anonyme bien sur, mais là la question est pour les event, qui vont être appellés, a priori, plusieurs fois.

Je pense qu'il est moins gourmand de stocker une référence à une fonction plutot qu'en redéfinir une anonyme à chaque fois non? ou alors je fais vraiment fausse route?
Modifié par Tymlis (31 Oct 2007 - 15:17)

Salut Tymlis,
suite à un deux petits tests (sur IE et un pc pourri hein, chut ) :

var d = new Date().getTime();
function go() { return 1+1; }
for(var i = 0; i < 100000; i++) go();
alert(new Date().getTime() - d); // ~ 203ms, 10 test

var d = new Date().getTime();
for(var i = 0; i < 100000; i++) (function() { return 1+1; })();
alert(new Date().getTime() - d); // ~ 391ms, 10 test

Soit la réponse me parrait claire, soit je viens de faire un truc inutile

Ze Nenex a écrit :
Salut Tymlis,
suite à un deux petits tests (sur IE et un pc pourri hein, chut ) :

var d = new Date().getTime();
function go() { return 1+1; }
for(var i = 0; i < 100000; i++) go();
alert(new Date().getTime() - d); // ~ 203ms, 10 test

var d = new Date().getTime();
for(var i = 0; i < 100000; i++) (function() { return 1+1; })();
alert(new Date().getTime() - d); // ~ 391ms, 10 test

Soit la réponse me parrait claire, soit je viens de faire un truc inutile

Tu te rends compte que dans le deuxième cas tu recrées la fonction à chaque fois?

Alors qu'ici on parle de binder à la fonction à l'élement?

Shinuza a écrit :
Tu te rends compte que dans le deuxième cas tu recrées la fonction à chaque fois?

Alors qu'ici on parle de binder à la fonction à l'élement?

Bha, justement, c'est le fond de ma question...
Binder 1000 fonctions anonymes "identiques" à 1000 objets différents, ca créé bien 1000 nouvelles fonctions, non ?

En bref, pour une utilisation d'une "même" fonction sur 2 objets différents on a
- si elle est déclarée: une fonction + 2 références dans le stack.
- en mode anonyme: 2 fonctions (bien distinctes) dans le stack.

Je pense simplement qu'à partir du moment ou une fonction est réuitlisée, une référence coûte moins cher qu'une fonction anonyme. Après, pour rentrer dans le fond du débat, il faudrait savoir sur quelle longueur est encodée une variable référence (32, 64 ?) et faire une comparaison.

Mes connaissances s'arrêtent là.

shinusa a écrit :

C'est absolument pas le cas ici, puisqu'on parle de passage par référence...

Ben dans ce cas c'est une question de choix que pose Tymlis ...

De toute façon les fonctions sont pré-compilées , et ensuite exécutée (lors de l'appel ) et également pour la fonction anonyme littérale (lorsqu'elle utilise 'function' )
ce n'est pas vrai avec le constructeur Function ...

kzone a écrit :
De toute façon les fonctions sont pré-compilées

JavaScript est un langage interprêté, surtout pas (pré)compilé.

ce n'est pas parce que le langage javascript est peu typé
que le moteur Js présent sur le navigateur ne 'pré-compile' pas le code source
(si c'est le mot compilation qui choque , c'est en tous les cas celui qu'emploie David Flanagan; on pourrait dire 'traité' ou bien 'interprété' mais il
n'y a pas de relation ici avec les langages 'haut niveau' qui sont eux soit compilé ou interpertré (bytecode))

Une fonction qui se trouve dans le code source tel

function maFonction() { ....} est 'compilée' par le moteur JS ' (mise en mémoire sous une forme qui pourra etre exécutée lors de son appel) .
C'est parfois ce qui pose problème , lors d'appel de fonction que le moteur (l'interpreteur js !? ) n'a pas encore traité !

en tous les cas , on n'a pas apporté de réponse probante à la question posée !
Modifié par kzone (01 Nov 2007 - 13:20)

kzone a écrit :
function maFonction() { ....} est 'compilée' par le moteur JS ' (mise en mémoire sous une forme qui pourra etre exécutée lors de son appel) .

Là j'suis d'accord je pense que l'emploie de compilation est plus un abus de langage.

kzone a écrit :
en tous les cas , on n'a pas apporté de réponse probante à la question posée !

Pour moi, une référence à une fonction côute beaucoup moins cher à la reutilisation que la fonction elle même. Et je préfère sans hésiter attribuer une référence à un gestionnaire d'événement - en sachant que plusieurs
appels à la fonction référencée seront effectués, que recréer une fonction anonyme pour chaque gestionnaire :

// je préfère de loin :
myObject.addEventHandler('onXXX', handlerReference);
// à :
myObject.addEventHandler('onXXX', function() { /* ... */ });

Bonne solution ou pas... Je pense que Javascript est suffisemment souple pour que chacun développe une préférence pour tel ou tel idiome.

Tymlis a écrit :


Bha, justement, c'est le fond de ma question...
Binder 1000 fonctions anonymes "identiques" à 1000 objets différents, ca créé bien 1000 nouvelles fonctions, non ?

Non, ça crée une fonction anonyme mais avec un identifiant interne. Laquelle est bindée 1000 fois.

re-bijour,

le post de Maxroucool window.onload et arguments donnent quelques "pistes" supplémentaires quand à l'utilisation de fonctions anonymes : les arguments

++

Shinuza a écrit :
Non, ça crée une fonction anonyme mais avec un identifiant interne. Laquelle est bindée 1000 fois.

Ah, merci c'était ça que je me demandais