NB 141221 : utile avec la manipulation et conversion des types JavaScript
cf. mémo opérateurs JavaScript.
Pour l'efficacité du code, l'on peut vouloir éviter une condition par le recours à une clé ou un index appelant telle fonction :
var resultat; var faire = [ function(){ resultat = "a"; }, function(){ resultat = "b"; } ]; //variations de x entre 0 et 1, d'où : faire[x](); /* a la place de if (x == 1) etc. */
Voir par exemple Tal Bereznitskey - Javascript Hacks for Hipsters.
Imaginons maintenant une interface où deux zones (de 56 * 64) sont cliquables, en bas à gauche et en haut à droite de la page, et détection du clic avec 'if' :
document.body.onclick = function(ze){ var D = document, d = D.documentElement, b = D.body, x = ze ? ze.pageX : event.offsetX, y = ze ? ze.pageY : event.offsetY, X = d.scrollLeft > 0 ? d.scrollLeft : b.scrollLeft, Y = d.scrollTop > 0 ? d.scrollTop : b.scrollTop, w = d.clientWidth, h = d.clientHeight; if ((x < X + 57 && y > Y + h - 65) || (x > X + w - 57 && y < Y + 65)){ agir(); } }
Il peut y avoir deux équivalents mathématiques à la structure conditionnelle, une formule avec modulo et l'autre avec division :
//avec modulo : Math.ceil((x - x % (X + 57) + Y + h - 65 - (Y + h - 65) % y) / (x - x % (X + 57) + Y + h - 65 - (Y + h - 65) % y + 1)) * Math.ceil((X + w - 57 - (X + w - 57) % x + y - y % (Y + 65)) / (X + w - 57 - (X + w - 57) % x + y - y % (Y + 65) + 1)); //avec division Math.ceil((Math.floor(x / (X + 57)) + Math.floor((Y + h - 65) / y)) / (Math.floor(x / (X + 57)) + Math.floor((Y + h - 65) / y) + 1)) * Math.ceil((Math.floor((X + w - 57) / x) + Math.floor(y / (Y + 65))) / (Math.floor((X + w - 57) / x) + Math.floor(y / (Y + 65)) + 1));
Le résultat de chaque formule est zéro au clic dans l'une des zones cliquables, un sinon.
var agir = [ function(){ /* etc. */ }, function(){ return; }] document.body.onclick = function(ze){ var D = //... agir[formule](); }
En terme de performance, au-delà du fun :
- Mathematical operation vs conditional statement · jsPerf montre que la structure conditionnelle reste, dans ce cas, bien plus performante que le modulo (tests faits sur Mac donnant perte de 67% sur Firefox 27 et de 90% sur Chrome 29 - ordre de résultat retrouvé sur Win) ;
- par ailleurs, pour information, la formule avec modulo est par elle-même équivalente à la formule avec division (Firefox), ou plus performante (avec division : perte de 24% sur Chrome) : Modulus vs division · jsPerf - toujours sur Mac.
Pour finir sur le cas d'un index sans longue formule, Index vs condition · jsPerf, sur Mac, la structure conditionnelle est beaucoup plus rapide avec Firefox et légèrement plus lente avec Chrome.
Aucun commentaire:
Enregistrer un commentaire