ClosuresEl amigo incomprendido de Javascript.
FUNCIONESJunto a los Objetosson actores principales.
FUNCIONESComo Freddyproveen CONTEXTO.
FUNCIONESvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabo...
FUNCIONESvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabo...
FUNCIONESvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabo...
FUNCIONES CONTEXTO GLOBALvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = func...
FUNCIONES CONTEXTO GLOBALvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = func...
FUNCIONES CONTEXTO GLOBALvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = func...
RESULTADOcrearPizza(8);Hacer una pizza se trata sobre todo del sabor MargaritaLa mia la quiero con Pepperoni y 8 rebanadas...
Ahora, si. Closures
CLOSURES ES:Una función que es evaluadaa través del contexto léxicoen la que fue definida, junto alas variables libresasoc...
WAT?
CLOSURES ES:Una declaración de función.El contexto en la quefue declarada.
CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre...
CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre...
CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre...
CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre...
CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre...
Y si devolvemos una función......que acepte parámetros?
CLOSURES ES:function crearSaludo(nombre){return function(numero) {console.log(nombre+, me ves +numero+ veces);}}var saludo...
CLOSURES ES:function crearSaludo(nombre){return function(numero) {console.log(nombre+, me ves +numero+ veces);}}var saludo...
CLOSURES ES:var saludoPablo = crearSaludo(Pablo);var saludoChris = crearSaludo(Christian);saludoPablo(2);"Pablo, me ves 2 ...
ZOMFG!:O
( Y esto para qué sirve? )
USANDO CLOSURES● Fábrica de funciones● Ocultar código● Definir Módulos● Extender el lenguaje(si da el tiempo, ejemplo)
ClosuresFABRICANDO FUNCIONES
FABRICANDOFUNCIONESfunction crearSaludo(nombre){return function(numero) {console.log(nombre+, me ves +numero+ veces);}}var...
FABRICANDOFUNCIONESfunction resizer(size){return function() {document.body.style.fontSize = size+px;}}var size14 = resizer...
FABRICANDOFUNCIONES$(#size14).on(click, size14);$(#size16).on(click, size16);$(#size18).on(click, size18);<a href="#" id="...
ClosuresOCULTAR CÓDIGO
PRIVACIDAD DEL CÓDIGOvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decreme...
PRIVACIDAD DEL CÓDIGOvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decreme...
PRIVACIDAD DEL CÓDIGOvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decreme...
PRIVACIDAD DEL CÓDIGOContador.ver();0Contador.incrementar();Contador.incrementar();Contador.incrementar();Contador.ver();3...
ClosuresDEFINIR MÓDULOS
Quizás lo más importanteque veamos sobre Closures
Lo bueno, es que ya lo vimos.
MÓDULOSvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : functio...
Closure Anónimo(function() {/*se ejecuta enseguida*/}())
MÓDULOSvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : functio...
MIXINSvar Emergencias = (function($, mod2) {function privado_alertar() {$(#alerta).html(Socorro!);mod2.notificar();}return...
EXTENSIÓN DE MÓDULOSvar Emergencias = (function(mod) {function llamar911() {window.location.href = "http://911.com";}mod.l...
Suficiente por ahora...
Diseño ModularPOTENCIA PARAAPLICACIONES EN JAVASCRIPT
¿QUÉ ES ESTO?
MÓDULOSANDBOXMÓDULOSANDBOXMÓDULOSANDBOXNUCLEO DE LA APLICACIÓNjQuery Backbone RequireJS Mediator.js Otras... másAsí deberí...
Upcoming SlideShare
Loading in …5
×

Closures, el amigo incomprendido de Javascript

9,400
-1

Published on

Presentación dada sobre Closures para el curso de Frontend de Mejorando.la Plataforma

Published in: Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,400
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
294
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Closures, el amigo incomprendido de Javascript

  1. 1. ClosuresEl amigo incomprendido de Javascript.
  2. 2. FUNCIONESJunto a los Objetosson actores principales.
  3. 3. FUNCIONESComo Freddyproveen CONTEXTO.
  4. 4. FUNCIONESvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabor = "Pepperoni";console.log("La mia la quiero con " + sabor +" y " + rebanadas + " rebanadas");}console.log("Hacer una pizza se trata sobre todo delsabor " + sabor);helper();}crearPizza(8);
  5. 5. FUNCIONESvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabor = "Pepperoni";console.log("La mia la quiero con " + sabor +" y " + rebanadas + " rebanadas");}console.log("Hacer una pizza se trata sobre todo delsabor " + sabor);helper();}crearPizza(8);CONTEXTO GLOBAL
  6. 6. FUNCIONESvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabor = "Pepperoni";console.log("La mia la quiero con " + sabor +" y " + rebanadas + " rebanadas");}console.log("Hacer una pizza se trata sobre todo delsabor " + sabor);helper();}crearPizza(8);CONTEXTO GLOBALCONTEXTO crearPizza
  7. 7. FUNCIONES CONTEXTO GLOBALvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabor = "Pepperoni";console.log("La mia la quiero con " + sabor +" y " + rebanadas + " rebanadas");}console.log("Hacer una pizza se trata sobre todo delsabor " + sabor);helper();}crearPizza(8);CONTEXTO crearPizzaCONTEXTO helper
  8. 8. FUNCIONES CONTEXTO GLOBALvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabor = "Pepperoni";console.log("La mia la quiero con " + sabor +" y " + rebanadas + " rebanadas");}console.log("Hacer una pizza se trata sobre todo delsabor " + sabor);helper();}crearPizza(8);CONTEXTO crearPizzaCONTEXTO helper
  9. 9. FUNCIONES CONTEXTO GLOBALvar sabor = "Mermelada";function crearPizza(rebanadas) {var sabor = "Margarita";var helper = function() {var sabor = "Pepperoni";console.log("La mia la quiero con " + sabor +" y " + rebanadas + " rebanadas");}console.log("Hacer una pizza se trata sobre todo delsabor " + sabor);helper();}crearPizza(8);CONTEXTO crearPizzaCONTEXTO helper
  10. 10. RESULTADOcrearPizza(8);Hacer una pizza se trata sobre todo del sabor MargaritaLa mia la quiero con Pepperoni y 8 rebanadasJavascript utiliza un Contexto Léxico.Utilizando el valor de las variablesal momento de definir la función/método.
  11. 11. Ahora, si. Closures
  12. 12. CLOSURES ES:Una función que es evaluadaa través del contexto léxicoen la que fue definida, junto alas variables libresasociadas.
  13. 13. WAT?
  14. 14. CLOSURES ES:Una declaración de función.El contexto en la quefue declarada.
  15. 15. CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre);}}}var saludo = crearSaludo(pablo);
  16. 16. CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre);}}}var saludo = crearSaludo(pablo);
  17. 17. CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre);}}}var saludo = crearSaludo(pablo);
  18. 18. CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre);}}}var saludo = crearSaludo(Pablo);saludo();"Si me ves, Pablo".
  19. 19. CLOSURES ES:function crearSaludo(nombre){var meVes = "Si";return function() {if(meVes) {console.log(meVes+ me ves, +nombre);}}}var saludo = crearSaludo(Christian);saludo();"Si me ves, Christian".
  20. 20. Y si devolvemos una función......que acepte parámetros?
  21. 21. CLOSURES ES:function crearSaludo(nombre){return function(numero) {console.log(nombre+, me ves +numero+ veces);}}var saludoPablo = crearSaludo(Pablo);var saludoChris = crearSaludo(Christian);
  22. 22. CLOSURES ES:function crearSaludo(nombre){return function(numero) {console.log(nombre+, me ves +numero+ veces);}}var saludoPablo = crearSaludo(Pablo);var saludoChris = crearSaludo(Christian);
  23. 23. CLOSURES ES:var saludoPablo = crearSaludo(Pablo);var saludoChris = crearSaludo(Christian);saludoPablo(2);"Pablo, me ves 2 veces"saludoPablo(7);"Pablo, me ves 7 veces"saludoChris(10)"Christian, me ves 7 veces"
  24. 24. ZOMFG!:O
  25. 25. ( Y esto para qué sirve? )
  26. 26. USANDO CLOSURES● Fábrica de funciones● Ocultar código● Definir Módulos● Extender el lenguaje(si da el tiempo, ejemplo)
  27. 27. ClosuresFABRICANDO FUNCIONES
  28. 28. FABRICANDOFUNCIONESfunction crearSaludo(nombre){return function(numero) {console.log(nombre+, me ves +numero+ veces);}}var saludoPablo = crearSaludo(Pablo);var saludoChris = crearSaludo(Christian);
  29. 29. FABRICANDOFUNCIONESfunction resizer(size){return function() {document.body.style.fontSize = size+px;}}var size14 = resizer(14);var size16 = resizer(16);var size18 = resizer(18);
  30. 30. FABRICANDOFUNCIONES$(#size14).on(click, size14);$(#size16).on(click, size16);$(#size18).on(click, size18);<a href="#" id="size14">14</a><a href="#" id="size16">16</a><a href="#" id="size18">18</a>
  31. 31. ClosuresOCULTAR CÓDIGO
  32. 32. PRIVACIDAD DEL CÓDIGOvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : function() {_contador--;},ver : function() {console.log(_contador);},}})();
  33. 33. PRIVACIDAD DEL CÓDIGOvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : function() {_contador--;},ver : function() {console.log(_contador);},}})();INTERFAZ PUBLICA
  34. 34. PRIVACIDAD DEL CÓDIGOvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : function() {_contador--;},ver : function() {console.log(_contador);},}})();INTERFAZ PUBLICAINTERFAZ PRIVADA
  35. 35. PRIVACIDAD DEL CÓDIGOContador.ver();0Contador.incrementar();Contador.incrementar();Contador.incrementar();Contador.ver();3Contador.decrementar();Contador.decrementar();Contador.ver();1
  36. 36. ClosuresDEFINIR MÓDULOS
  37. 37. Quizás lo más importanteque veamos sobre Closures
  38. 38. Lo bueno, es que ya lo vimos.
  39. 39. MÓDULOSvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : function() {_contador--;},ver : function() {console.log(_contador);},}})();
  40. 40. Closure Anónimo(function() {/*se ejecuta enseguida*/}())
  41. 41. MÓDULOSvar Contador = (function() {var _contador = 0;return {incrementar : function() {_contador++;},decrementar : function() {_contador--;},ver : function() {console.log(_contador);},}})();
  42. 42. MIXINSvar Emergencias = (function($, mod2) {function privado_alertar() {$(#alerta).html(Socorro!);mod2.notificar();}return {alertar : privado_alertar}})(jQuery, otroModulo);
  43. 43. EXTENSIÓN DE MÓDULOSvar Emergencias = (function(mod) {function llamar911() {window.location.href = "http://911.com";}mod.llamar911 = llamar911;return mod;})(Emergencias || {});
  44. 44. Suficiente por ahora...
  45. 45. Diseño ModularPOTENCIA PARAAPLICACIONES EN JAVASCRIPT
  46. 46. ¿QUÉ ES ESTO?
  47. 47. MÓDULOSANDBOXMÓDULOSANDBOXMÓDULOSANDBOXNUCLEO DE LA APLICACIÓNjQuery Backbone RequireJS Mediator.js Otras... másAsí debería versetu aplicación web
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×