Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CaenJS 1- les fonctions anonymes : Good or Evil ?

sylzys
September 14, 2013

CaenJS 1- les fonctions anonymes : Good or Evil ?

Good or Evil: les fonctions anonymes en Javascript

sylzys

September 14, 2013
Tweet

More Decks by sylzys

Other Decks in Technology

Transcript

  1. an nymes Les fonctions Sylvain Zyssman @sylzys sylzys CaenJS -

    14/09/2013 Good or Evil ? lundi 16 septembre 13
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. • Optimiser le Garbage Collector • Creer un scope temporaire

    / prive • Garder un code bref lundi 16 septembre 13
  8. 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
  9. 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
  10. 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
  11. 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