CaenJS 1- les fonctions anonymes : Good or Evil ?

Good or Evil: les fonctions anonymes en Javascript

Transcript

1. an nymes Les fonctions Sylvain Zyssman @sylzys sylzys CaenJS - 14/09/2013 Good or Evil ? lundi 16 septembre 13
2. lundi 16 septembre 13
3. 1 function hello() { 2 !alert('world'); 3 } 4 5 hello(); 1 var anon = fonction() { 2 !alert ('hello anonymous'); 3 } 4 anon(); Fonction nommee Fonction anonyme lundi 16 septembre 13
4. Ou encore 1 setTimeout(function() { 2 alert('Vive CaenJS'); 3 }, 1000); 1 $('.buzz').click(function(){ 2 !console.log(" To infinity and beyond "); 3 }); lundi 16 septembre 13
5. Rien a declarer ? 1 var add = new Function("x", "y", "return x + y;"); Function constructor 1 function add(x, y) { 2 return x + y; 3 } Function declaration Function expression 1 var add = function(x, y) { 2 return x + y; 3 }; lundi 16 septembre 13
6. Runtime VS Parsetime 1 plop(); // alerte plop! 2 function plop() { 3 alert('plop!'); 4 } 1 plop(); 2 var plop = function() 3 { 4 !alert('plop!'); //erreur 5 }; lundi 16 septembre 13
7. Une affaire de scope 1 var i = 100; 2 (function (){ 3 for(var i=0; i<10; i++) { 4 console.log(i); // 0...9 5 } 6 }()); 7 console.log(i); //100 Attention au hoisting 1 var x = 3; 2 (function (){ 3 console.log(x + 2); //NaN - x is not 4 defined 5 var x = 0; //var declaration 6 }()); } Scope fonctionnel { 1 function foo() { 2 ! var x = 1; 3 ! if (x) { 4 ! ! (function () { 5 ! ! ! var x = 2; 6 ! ! ! console.log(x); //2 7 ! ! }()); 8 ! } 9 ! console.log(x);//1. 10 } lundi 16 septembre 13
8. Des avantages ... lundi 16 septembre 13
9. • Optimiser le Garbage Collector • Creer un scope temporaire / prive • Garder un code bref lundi 16 septembre 13
10. Alors pourquoi nommer ses fonctions ? lundi 16 septembre 13
11. Rendre le code plus lisible Limiter les niveaux d’imbrication 1 fs.readdir(source, function(err, files) { 2 if (err) { 3 console.log('Error finding files: ' + err); 4 } else { 5 files.forEach(function(filename, fileIndex) { 6 console.log(filename); 7 gm(source + filename).size(function(err, 8 values) { 9 if (err) { 10 console.log('Error identifying file 11 size: ' + err); 12 } else { 13 console.log(filename + ' : ' + values); 14 aspect = (values.width / values.height); 15 widths.forEach(function(width, 16 widthIndex) { 17 height = Math.round(width / aspect); 18 console.log('resizing ' + filename + 19 'to ' + height + 'x' + 20 height); 21 this.resize(width, height).write( 22 destination + 'w' + width 23 + '_' + filename, 24 function(err) { 25 if (err) console.log('Error writing 26 file: ' + err); 27 }); 28 }.bind(this)); 29 } 30 }); 31 }); 32 } 33 }); • source: http://callbackhell.com/ EVIL lundi 16 septembre 13
12. Tracer, debugguer 1 function foo(){ 2 return bar(); 3 } 4 function bar(){ 5 return baz(); 6 } 7 function baz(){ 8 debugger; 9 } 10 foo(); 1 baz() 2 bar() 3 foo() 4 main.js() 1 function foo(){ 2 return bar(); 3 } 4 var bar = (function(){ 5 if (window.addEventListener) { 6 return function(){ 7 return baz(); 8 }; 9 } 10 else if (window.attachEvent) { 11 return function() { 12 return baz(); 13 }; 14 } 15 })(); 16 function baz(){ 17 debugger; 18 } 19 foo(); 1 baz() 2 (?)() 3 foo() 4 main.js() Code Stack source: http://kangax.github.io/nfe/ lundi 16 septembre 13
13. Utiliser la recursivite Access to arguments.caller and arguments.callee now throw an exception. Thus any anonymous functions that you want to reference will need to be named, like so: 1 setTimeout(function later(){ 2 // do stuff... 3 setTimeout( later, 1000 ); 4 }, 1000 ); 5 • nom de la fonction • argument.callee • variable in-scope ECMAScript 5 - strict mode lundi 16 septembre 13
14. Performance ? http://jsperf.com/immediate-vs-named lundi 16 septembre 13
15. http://www.empowernetwork.com lundi 16 septembre 13
16. Quelques liens utiles • https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference • http://callbackhell.com/ • http://kangax.github.io/nfe/ • http://ejohn.org/category/blog/ (auteur de ‘Secrets of the JS Ninja’) • http://javascriptweblog.wordpress.com/ lundi 16 septembre 13
17. Merci ! Des questions ? lundi 16 septembre 13