Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript

2,899 views
2,533 views

Published on

JavaScript las partes feas y geniales, y patrones

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

No Downloads
Views
Total views
2,899
On SlideShare
0
From Embeds
0
Number of Embeds
490
Actions
Shares
0
Downloads
80
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript

  1. 1. Dominando JavaScript por David Avellaneda @davsket
  2. 2. @davsket?
  3. 3. acerca de mi • Ingeniero de Sistemas… • Cofundador de monoku y monomi.co • Co-organizador de BogotáJS • Co-organizador de JSConf.co
  4. 4. Agenda
  5. 5. Agenda • JavaScript: Las partes buenas • JavaScript Orientado a Objetos (OO) • Closures, Mixins, Objetos, Prototipos • Patrones de Diseño y MV* • APIs Rest, AJAX y Sockets (*)
  6. 6. JavaScript: Las Partes Buenas
  7. 7. Recomendación: Compren el Libro
  8. 8. Las Partes Buenas?
  9. 9. JavaScript: The Good Parts 80% Intro a JS 2% Hermosas características 10% Feas características 10% Malas partes
  10. 10. Las Partes Feas
  11. 11. Scope
  12. 12. var a = 5, b = 10 ! function noGlobal( a ){ var b = 3 a = a*2 return a * b } ! noGlobal( 1 ) // 6 a // 5 b // 3
  13. 13. typeof
  14. 14. typeof new Number(8) == "object" typeof 8 == "number"
  15. 15. parseInt
  16. 16. parseInt ¡cuidado con los legacy browsers!
  17. 17. parseInt( "08" ) // 0 parseInt( "08", 10 ) // 8 ! Chrome ya no...
  18. 18. Números Flotantes
  19. 19. Gracias a "Binary Floating-Point Arithmetic (IEEE 754)" ! 0.1 + 0.2 != 0.3
  20. 20. Valores Falsos (abstract equality comparison)
  21. 21. '' == '0' // false 0 == '' // true 0 == '0' // true ! false == 'false' // false false == '0' // true ! false == undefined // false false == null // false null == undefined // true ! ' trn ' == 0 // true
  22. 22. '' === '0' // false 0 === '' // false 0 === '0' // false ! false === 'false' // false false === '0' // false ! false === undefined // false false === null // false null === undefined // false ! ' trn ' === 0 // false
  23. 23. hasOwnProperty
  24. 24. Cualquiera puede modificar el prototipo y generarte problemas!
  25. 25. with
  26. 26. var a = { p: 0 }, c ! with( a ){ p = 3 c = 5 } ! a.p // 3 a.c // undefined c // 5
  27. 27. eval
  28. 28. No es tan maaaalo como lo pintan!
  29. 29. eval("myValue = myObject." + myKey + ";");
  30. 30. en vez de:
  31. 31. myvalue = myObject[myKey]
  32. 32. No usen eval para ejecutar código desde el servidor u otro servicio AJAX
  33. 33. switch
  34. 34. ... fall through .. ! va de case en case naturalmente (requiere usar break) valida con equivalencia simple
  35. 35. var blah = 0; switch (blah) { case -1: alert('negative 1'); case 0: alert(0) case 1: alert(1); break; case 2: alert(2); break; default: alert('default'); }
  36. 36. Doble Filo!!
  37. 37. Punto y Coma Opcional (optional semicolon) ! - Código más limpio -
  38. 38. Declaraciones Sin Corchetes (block-less statements)
  39. 39. if( a ){ a.b = 3 }
  40. 40. if( a ) a.b = 3
  41. 41. if( a ){ a.b = 3 a.c = 4 }
  42. 42. if( a ) a.b = 3 a.c = 4
  43. 43. if( a ){ a.b = 3 } a.c = 4
  44. 44. ++ --
  45. 45. var a = [1,2,3,4], i = 0 a[i++] // 1 a[++i] // 3
  46. 46. new
  47. 47. "this"
  48. 48. métodos vs funciones
  49. 49. hoisting
  50. 50. el orden de definición de variables y funciones afecta el resultado
  51. 51. function f(){ alert( a ) a = 5 } f()
  52. 52. function f(){ alert( a ) a = 5 } f() // ReferenceError a is not defined
  53. 53. function f(){ alert( a ) var a = 5 } f()
  54. 54. function f(){ alert( a ) var a = 5 } f() // undefined
  55. 55. function f(){ var a alert( a ) a = 5 } f() // undefined
  56. 56. var a = 10 ! function f(){ alert( a ) var a = 5 } ! f()
  57. 57. var a = 10 ! function f(){ alert( a ) var a = 5 } ! f() // undefined
  58. 58. var a = 10 ! function f(){ var a alert( a ) a = 5 } ! f() // undefined
  59. 59. var a = 10 ! function f(){ a = 5 alert( a ) function a(){} } ! f() // ? a // ?
  60. 60. var a = 10 function f(){ a = 5 alert( a ) function a(){} } f() // 5 a // ?
  61. 61. var a = 10 function f(){ a = 5 alert( a ) function a(){} } f() // 5 a // 5 ? no... 10!!
  62. 62. The Cool Parts + Patterns
  63. 63. Prototype
  64. 64. JavaScript es Orientado a Objetos (OO) pero no tiene Clases ! JavaScript es basado en Prototipos
  65. 65. functions con prototype
  66. 66. function Persona( name ){ this.name = name } Persona.prototype.alertName = function(){ alert( this.name ) } Persona.prototype.setAge = function( age ){ this.age = age } var juan = new Persona( 'juan' )
  67. 67. juan.alertName() // juan juan.setAge( 25 ) ! Persona.prototype.sayYolo = function(){ alert(this.name + ': YOLO!') } ! juan.sayYolo() // juan: YOLO!
  68. 68. Object.create( proto, properties )
  69. 69. constructor
  70. 70. juan.constructor // function Persona( ...
  71. 71. __proto__ (no es standard) (firefox, chrome, opera, android, ie11)
  72. 72. juan.__proto__
  73. 73. Function are first-class objects
  74. 74. ¿first-class objects? • se pueden asignar a variables • se puede recibir/pasar como argumentos • se pueden retornar en una función • son objetos y por lo tanto tienen propiedades
  75. 75. Function are first-class objects => Chain Callback Observable Delegation Closure MVC MVVM MV*
  76. 76. Chain
  77. 77. var o = { i: 0, f: function(){ ++ this.i return this } } o.f().f().f() o.i // 3
  78. 78. $('#myelem') .hide() .css({..}) .data(..) .fadeIn(..)
  79. 79. Callback ( Async ) "las funciones pueden ser pasadas como argumentos"
  80. 80. Es como una sala de espera en la que dependiendo del turno tu puedes ser llamado
  81. 81. function caller( cb ){ setTimeout(function(){ cb( new Date() ) }, 1000) } caller(function( now ){ alert( now ) })
  82. 82. $(document).on('click', click) function click(){ alert('auch!') }
  83. 83. $.ajax({ url: ".", type: "get" }) .done(function(){ console.log("async!") }) console.log("sync")
  84. 84. Observable + "y Las funciones pueden asignarse a variables"
  85. 85. Este patrón permite que diferentes interesados se suscriban a un objeto escuchando eventos
  86. 86. GIST!
  87. 87. Delegación
  88. 88. Observar cientos de elementos con cientos de eventListeners no es recomendable
  89. 89. Aplica en listados
  90. 90. document.getElementById("parent-list") .addEventListener("click",function(e) { if(e.target && e.target.nodeName == "LI") { console.log("List item ", e.target.id.replace("post-")," was clicked!"); } });
  91. 91. $('#padre').on('click', '.hijo', callback)
  92. 92. Closures
  93. 93. se reduce a: invocación inmediata de funciones
  94. 94. (function(){ var hidden = 8 }()) ! console.log( typeof hidden ) // undefined
  95. 95. MVC / MVVM / MV*
  96. 96. Sfotipy!
  97. 97. Sfotipy! • Agregar jQuery • Crear nuestro Modelo • Crear nuestra Vista • Crear nuestro Controlador • Observables!
  98. 98. Gracias!!

×