Your SlideShare is downloading. ×
0
Dominando
JavaScript
por David Avellaneda
@davsket
@davsket?
acerca de mi
• Ingeniero de Sistemas…
• Cofundador de monoku y monomi.co
• Co-organizador de BogotáJS
• Co-organizador de ...
Agenda
Agenda
• JavaScript: Las partes buenas
• JavaScript Orientado a Objetos (OO)
• Closures, Mixins, Objetos, Prototipos
• Pat...
JavaScript:
Las Partes Buenas
Recomendación:
Compren el Libro
Las Partes Buenas?
JavaScript: The Good Parts
80% Intro a JS
2% Hermosas características
10% Feas características
10% Malas partes
Las Partes Feas
Scope
var a = 5, b = 10
!
function noGlobal( a ){
var b = 3
a = a*2
return a * b
}
!
noGlobal( 1 ) // 6
a // 5
b // 3
typeof
typeof new Number(8) == "object"
typeof 8 == "number"
parseInt
parseInt
¡cuidado con los legacy browsers!
parseInt( "08" ) // 0
parseInt( "08", 10 ) // 8
!
Chrome ya no...
Números Flotantes
Gracias a "Binary Floating-Point
Arithmetic (IEEE 754)"
!
0.1 + 0.2 != 0.3
Valores Falsos
(abstract equality comparison)
'' == '0' // false
0 == '' // true
0 == '0' // true
!
false == 'false' // false
false == '0' // true
!
false == undefined /...
'' === '0' // false
0 === '' // false
0 === '0' // false
!
false === 'false' // false
false === '0' // false
!
false === u...
hasOwnProperty
Cualquiera puede modificar el
prototipo y generarte problemas!
with
var a = { p: 0 }, c
!
with( a ){
p = 3
c = 5
}
!
a.p // 3
a.c // undefined
c // 5
eval
No es tan maaaalo como lo pintan!
eval("myValue = myObject." + myKey + ";");
en vez de:
myvalue = myObject[myKey]
No usen eval para ejecutar código desde el
servidor u otro servicio AJAX
switch
... fall through ..
!
va de case en case naturalmente
(requiere usar break)
valida con equivalencia simple
var blah = 0;
switch (blah) {
case -1:
alert('negative 1');
case 0:
alert(0)
case 1:
alert(1);
break;
case 2:
alert(2);
br...
Doble Filo!!
Punto y Coma Opcional
(optional semicolon)
!
- Código más limpio -
Declaraciones Sin Corchetes
(block-less statements)
if( a ){
a.b = 3
}
if( a )
a.b = 3
if( a ){
a.b = 3
a.c = 4
}
if( a )
a.b = 3
a.c = 4
if( a ){
a.b = 3
}
a.c = 4
++ --
var a = [1,2,3,4], i = 0
a[i++] // 1
a[++i] // 3
new
"this"
métodos vs funciones
hoisting
el orden de definición de variables y
funciones afecta el resultado
function f(){
alert( a )
a = 5
}
f()
function f(){
alert( a )
a = 5
}
f() // ReferenceError a is not
defined
function f(){
alert( a )
var a = 5
}
f()
function f(){
alert( a )
var a = 5
}
f() // undefined
function f(){
var a
alert( a )
a = 5
}
f() // undefined
var a = 10
!
function f(){
alert( a )
var a = 5
}
!
f()
var a = 10
!
function f(){
alert( a )
var a = 5
}
!
f() // undefined
var a = 10
!
function f(){
var a
alert( a )
a = 5
}
!
f() // undefined
var a = 10
!
function f(){
a = 5
alert( a )
function a(){}
}
!
f() // ?
a // ?
var a = 10
function f(){
a = 5
alert( a )
function a(){}
}
f() // 5
a // ?
var a = 10
function f(){
a = 5
alert( a )
function a(){}
}
f() // 5
a // 5 ? no... 10!!
The Cool Parts + Patterns
Prototype
JavaScript es
Orientado a Objetos
(OO) pero no tiene
Clases
!
JavaScript es basado
en Prototipos
functions con
prototype
function Persona( name ){
this.name = name
}
Persona.prototype.alertName = function(){
alert( this.name )
}
Persona.protot...
juan.alertName() // juan
juan.setAge( 25 )
!
Persona.prototype.sayYolo = function(){
alert(this.name + ': YOLO!')
}
!
juan...
Object.create( proto, properties )
constructor
juan.constructor // function Persona( ...
__proto__
(no es standard)
(firefox, chrome, opera,
android, ie11)
juan.__proto__
Function are
first-class
objects
¿first-class objects?
• se pueden asignar a variables
• se puede recibir/pasar como
argumentos
• se pueden retornar en una ...
Function are
first-class objects
=>
Chain
Callback
Observable
Delegation
Closure
MVC
MVVM
MV*
Chain
var o = {
i: 0,
f: function(){
++ this.i
return this
}
}
o.f().f().f()
o.i // 3
$('#myelem')
.hide()
.css({..})
.data(..)
.fadeIn(..)
Callback ( Async )
"las funciones pueden ser pasadas
como argumentos"
Es como una sala de espera en
la que dependiendo del turno
tu puedes ser llamado
function caller( cb ){
setTimeout(function(){
cb( new Date() )
}, 1000)
}
caller(function( now ){
alert( now )
})
$(document).on('click', click)
function click(){
alert('auch!')
}
$.ajax({
url: ".",
type: "get"
})
.done(function(){
console.log("async!")
})
console.log("sync")
Observable
+ "y Las funciones pueden
asignarse a variables"
Este patrón permite
que diferentes
interesados se
suscriban a un
objeto escuchando
eventos
GIST!
Delegación
Observar cientos de
elementos con cientos de
eventListeners no es
recomendable
Aplica en listados
document.getElementById("parent-list")
.addEventListener("click",function(e) {
if(e.target && e.target.nodeName == "LI") {...
$('#padre').on('click', '.hijo', callback)
Closures
se reduce a:
invocación inmediata de
funciones
(function(){
var hidden = 8
}())
!
console.log( typeof hidden )
// undefined
MVC / MVVM / MV*
Sfotipy!
Sfotipy!
• Agregar jQuery
• Crear nuestro Modelo
• Crear nuestra Vista
• Crear nuestro Controlador
• Observables!
Gracias!!
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Upcoming SlideShare
Loading in...5
×

Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript

2,200

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,200
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
71
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "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!!
  1. A particular slide catching your eye?

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

×