Este documento resume las características principales del lenguaje JavaScript. Explica que JavaScript es un lenguaje interpretado, de tipado dinámico y orientado a objetos que se ejecuta en el navegador del cliente. Describe algunas de sus características como variables sin tipo, uso de prototipos en lugar de clases, y la coerción de datos. También presenta las diferencias entre entidades primitivas y objetos en JavaScript.
2. JavaScript:
Potenciando
la
web
desde
1995
Indice
-‐
Introducción
al
lenguaje
-‐
El
JavaScript
me
confunde
-‐
Buenas
prácCcas
y
patrones
-‐
AJAX,
HIJAX,
SPI
y
otras
cosas
malas
-‐
El
futuro
de
JavaScript
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
4. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
de
lenguaje
JavaScript:
-‐
Interpretado
(no
compilado)
-‐
Lenguaje
de
ejecución
en
cliente
-‐
Tipado
blando
(no-‐Cpado)
-‐
Orientado
a
objetos
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
5. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
del
lenguaje
Lenguaje
Interpretado
-‐
No
es
un
lenguaje
compilado
-‐
Cada
instrucción
se
interpreta
en
Cempo
de
ejecución
-‐
La
opCmización
del
código
se
realiza
durante
la
fase
de
diseño.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
6. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Seguridad,
autoría
y
rendimiento
-‐
El
código
aparece
tal
cual
-‐
Compromete
la
seguridad
de
una
lógica
críCca
-‐
A
mayor
tamaño
de
archivo,
mayor
Cempo
de
carga
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
7. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Soluciones
poco
afortunadas:
-‐
Compresión
del
código:
JSMin
-‐
Ofuscación:
YUI
Compressor,
Packer
Inconvenientes:
-‐
Capa
muy
débil
de
seguridad
-‐
Ilegibilidad
del
código
para
adaptarlo
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
8. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Herramientas
para
medir
la
calidad
del
soZware
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
9. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Herramientas
para
medir
la
calidad
del
soZware
Douglas
Crockford
Developers
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
10. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
del
lenguaje
Tipado
blando,
dinámico
o
no-‐Cpado
-‐
Las
variables
se
declaran
sin
un
Cpo
de
datos
concreto
-‐
De
hecho,
es
posible
no
declarar
variables
de
forma
explícita
-‐
Los
Cpos
no
son
inalterables
-‐
La
coerción
de
datos
interna
determina
el
manejo
de
los
datos.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
11. JavaScript:
Potenciando
la
web
desde
1995
Tipado
dinámico
y
coerción
de
datos
Tipado
blando,
dinámico
o
no-‐Cpado
-‐
Las
variables
se
declaran
sin
un
Cpo
de
Coerción
de
datos
interna
datos
concreto
-‐
De
hecho,
es
posible
no
declarar
variables
de
forma
explícita
-‐
Los
Cpos
no
son
inalterables
-‐
La
coerción
de
datos
interna
determina
el
manejo
de
los
datos.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
12. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
del
lenguaje
Orientado
a
objetos
-‐
Alto
nivel
de
abstracción
-‐
No
implementa
el
concepto
de
clases
-‐
Se
fundamenta
en
los
protoCpos
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
13. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-‐
undefined
-‐
null
-‐
Todo
lo
demás
-‐
booleanos
-‐
cadenas
-‐
números
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
14. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-‐
undefined
-‐
null
constructores
-‐
Todo
lo
demás
-‐
booleanos
-‐
cadenas
-‐
números
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
15. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-‐
undefined
-‐
null
constructores
-‐
Todo
lo
demás
-‐
booleanos
-‐
cadenas
-‐
números
String
Boolean
Number
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
16. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-‐
undefined
-‐
null
constructores
-‐
Todo
lo
demás
-‐
booleanos
-‐
cadenas
-‐
números
String
Boolean
Number
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
17. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-‐
undefined
-‐
Todo
lo
demás
-‐
null
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
18. El
JavaScript
me
confunde
(O
por
qué
JavaScript
no
2ene
nada
que
ver
con
Java)
19. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
-‐
ECMAScript:
una
especificación
con
muchos
sabores
-‐
JavaScript:
Netscape
Corp.
-‐
AcConScript:
Macromedia
-‐
JScript:
Internet
Explorer
-‐
V8:
Google
Chrome
SpiderMonkey
-‐
Mozilla's
JavaScript:
Firefox
-‐
Rhino
(Java)
TraceMonkey
-‐
KJS
(KDE):
Conqueror
-‐
JavaScriptCore:
Apple
Inc.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
20. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Objetos
abiertos
var
treintaYDos
=
new
Number(32);
treintaYDos.duplicar
=
funcNon(){
return
2
*
this;
};
alert(treintaYDos.duplicar());
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
21. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Objetos
abiertos
var
pepe
=
"
Pepetn";
String.prototype.trim
=
funcNon(){
return
this.replace(/^s+/g,
'').replace(/s+$/g,
'');
};
alert(pepe.trim());
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
22. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
defaultConfiguraNon
=
{
'maxLives':
3,
'level':
'intermediate'
};
var
play
=
funcNon(gameConfig){
var
configuraNon
=
gameConfig
||
defaultConfiguraNon;
score
=
0;
//
..
do
some
play
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
23. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
defaultConfiguraNon
=
{
'maxLives':
3,
'level':
'intermediate'
};
Global
var
play
=
funcNon(gameConfig){
var
configuraNon
=
gameConfig
||
defaultConfiguraNon;
score
=
0;
//
..
do
some
play
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
24. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
defaultConfiguraNon
=
{
'maxLives':
3,
'level':
'intermediate'
};
Local
var
play
=
funcNon(gameConfig){
var
configuraNon
=
gameConfig
||
defaultConfiguraNon;
score
=
0;
//
..
do
some
play
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
25. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
ratePlayer
=
funcNon(score){
if(score
==
0){
var
isALoser
=
true;
}
return
isALoser;
};
No
problem
!
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
26. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
var
crearSaludo
=
funcNon(mensaje){
var
saludo
=
funcNon(porConsola){
var
mensajeSaludo
=
mensaje
+
"
"
+
nombre;
if
(porConsola)
console.log(mensajeSaludo);
else
alert(mensajeSaludo);
};
mensaje
=
mensaje
||
"Hola";
var
nombre
=
"Juan";
return
saludo;
};
var
quePasaJuan
=
crearSaludo("Que
pasa");
quePasaJuan(false);
var
holaJuan
=
crearSaludo();
holaJuan(true);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
27. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
var
crearSaludo
=
funcNon(mensaje){
var
saludo
=
funcNon(porConsola){
var
mensajeSaludo
=
mensaje
+
"
"
+
nombre;
if
(porConsola)
console.log(mensajeSaludo);
else
alert(mensajeSaludo);
};
mensaje
=
mensaje
||
"Hola";
var
nombre
=
"Juan";
return
saludo;
};
var
quePasaJuan
=
crearSaludo("Que
pasa");
quePasaJuan(false);
var
holaJuan
=
crearSaludo();
holaJuan(true);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
28. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
SCOPE
GLOBAL
…..
(CLOSURE)
crearSaludo
“mensaje”
“saludo”
“nombre”
(LOCAL)
saludo
“porConsola”
“mensajeSaludo”
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
29. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
SCOPE
GLOBAL
…..
(CLOSURE)
crearSaludo
“mensaje”
“saludo”
Or
de “nombre”
n
d
e
bú
sq (LOCAL)
saludo
ue “porConsola”
da
“mensajeSaludo”
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
30. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
SCOPE
GLOBAL
…..
(CLOSURE)
crearSaludo
“mensaje”
“saludo”
Or
de “nombre”
n
d
e
bú
Cuidado
con:
sq (LOCAL)
saludo
✖ Excesivo
tamaño
de
scope
ue “porConsola”
da
✖ Excesivo
numero
de
scopes
“mensajeSaludo”
anidados
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
31. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
var
crearSaludo
=
funcNon(mensaje){
var
saludo
=
funcNon(porConsola){
var
mensajeSaludo
=
mensaje
+
"
"
+
nombre;
if
(porConsola)
console.log(mensajeSaludo);
else
alert(mensajeSaludo);
};
mensaje
=
mensaje
||
"Hola";
var
nombre
=
"Juan";
return
saludo;
};
var
quePasaJuan
=
crearSaludo("Que
pasa");
quePasaJuan(false);
var
holaJuan
=
crearSaludo();
holaJuan(true);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
32. Buenas
prácCcas
y
patrones
(O
cómo
podemos
aprovechar
realmente
JavaScript)
33. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrones
de
Diseño
JavaScript
-‐
Creacionales
-‐
Estructurales
-‐
Comportamiento
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
34. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrones
de
Diseño
Más
usuales
CREACIONALES
ESTRUCTURALES
COMPORTAMIENTO
Factory
Module
Iterator
Builder
Facade
Memento
Prototype
Proxy
Observer
/
Listener
Singleton
Decorator
Visitor
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
35. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
ProtoNpos
-‐
En
JavaScript,
no
implementa
clases,
sino
protoCpos
-‐
Los
protoCpos
son
la
base
de
la
herencia
en
la
POO
-‐
La
herencia
protospica
y
su
cadena
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
36. JavaScript:
Potenciando
la
web
desde
1995
ProtoCpos
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
37. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-‐
y;
},
__proto__
:
a
};
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};
38. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};
39. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};
40. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};
41. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};
42. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
ProtoNpo
(ECMAScript
5)
var
someCar
=
{
drive:
funcNon()
{};
name:
'Mazda
3'
};
//
Use
Object.create
to
generate
a
new
car
var
anotherCar
=
Object.create(someCar);
anotherCar.name
=
'Toyota
Camry';
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
43. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
()
{
//
Private
variables
/
properCes
MyLibrary
=
(funcNon(){
var
p1,
p2;
//
Code
goes
here...
//
Private
methods
}());
funcNon
aPrivateMethod()
{
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());
44. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
()
{
//
Private
variables
/
properCes
MyLibrary
=
(funcNon(){
var
p1,
p2;
//
Code
goes
here...
//
Private
methods
}());
funcNon
aPrivateMethod()
{
}
Función
autoejecutable
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());
45. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
()
{
//
Private
variables
/
properCes
MyLibrary
=
(funcNon(){
var
p1,
p2;
//
Code
goes
here...
//
Private
methods
}());
funcNon
aPrivateMethod()
{
}
Función
autoejecutable
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());
46. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
//
Private
variables
/
properCes
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));
47. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));
48. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));
49. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));
50. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));
51. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
var
MyLibrary
=
(funcNon
()
{
Patrón
Módulo
Revelado
//
Private
variables
/
properCes
(Revealing
Module)
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
MyLibrary
=
(funcNon(){
//
Public
Method
//
Code
goes
here...
funcNon
publicMethod
()
{
}());
}
//
Another
Public
Method
funcNon
anotherPublicMethod
()
{
}
//
Public
API
return
{
publicMethod:
publicMethod,
anotherPublicMethod:
anotherPublicMethod
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());
52. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
var
MyLibrary
=
(funcNon
()
{
Patrón
Módulo
Revelado
//
Private
variables
/
properCes
(Revealing
Module)
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
//
Public
Method
funcNon
publicMethod
()
{
return
{
}
publicMethod:
publicMethod,
//
Another
Public
Method
anotherPublicMethod:
anotherPublicMethod
funcNon
anotherPublicMethod
()
{
}
}
//
Public
API
return
{
publicMethod:
publicMethod,
anotherPublicMethod:
anotherPublicMethod
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());
53. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
var
MyLibrary
=
(funcNon
()
{
Patrón
Módulo
Revelado
//
Private
variables
/
properCes
(Revealing
Module)
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
//
Public
Method
funcNon
publicMethod
()
{
return
{
}
publicMethod:
publicMethod,
//
Another
Public
Method
anotherPublicMethod:
anotherPublicMethod
funcNon
anotherPublicMethod
()
{
}
}
//
Public
API
return
{
publicMethod:
publicMethod,
anotherPublicMethod:
anotherPublicMethod
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());
54. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
This
Namespace
Proxy
var
myApp
=
{};
(James
Edwards)
(funcNon(){
//
Private
variables
/
properCes
var
foo
=
'Hello';
var
bar
=
'World';
//Private
method
var
myMessage
=
funcNon(){
this.sum
=
funcNon(
param1,
param2
){
return
foo
+
'
'
+
bar;
return
param1
+
param2;
};
};
//
Public
Method
this.sum
=
funcNon(
param1,
param2
){
return
param1
+
param2;
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
}).apply(
myApp
);
55. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
This
Namespace
Proxy
var
myApp
=
{};
(James
Edwards)
(funcNon(){
//
Private
variables
/
properCes
var
foo
=
'Hello';
var
bar
=
'World';
//Private
method
var
myMessage
=
funcNon(){
this.sum
=
funcNon(
param1,
param2
){
return
foo
+
'
'
+
bar;
return
param1
+
param2;
};
};
//
Public
Method
this.sum
=
funcNon(
param1,
param2
){
return
param1
+
param2;
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
}).apply(
myApp
);
56. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
};
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
57. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
Enlazados
por
};
la
Closure
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
58. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
Pero
estos
};
también
//.....
(y
no
se
usan)
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
59. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
Pero
estos
};
también
(y
no
se
usan)
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
✖ Referencias
circulares
✖ Memoria
✖ Confusión
Carlos Benitez (@etnassoft)
✖ Resolución
referencias
Enrique Amodeo (@eamodeorubio)
60. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.newNoCfier
=
funcNon(msg){
return
funcNon(){
alert(msg);
}
};
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
ns.newNoCfier(msg);
};
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
61. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.newNoCfier
=
funcNon(msg){
Control
de
la
return
funcNon(){
closure
alert(msg);
ReuClizable
}
};
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
ns.newNoCfier(msg);
};
//.....
Sencillo
y
ns.convertToFancyBtn('btn1',
'Hola
mundo');
legible
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
62. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.bindFuncConToObject
=
funcNon(f,
obj){
(“this”
Binding)
if
(typeof(f)
!=
'funcNon')
return
obj;
return
funcNon(){
f.apply(obj,
arguments);
}
};
//.....
submitBtn.onclick
=
ns.bindFuncConToObject(
controller.checkForm
,
controller);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
63. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.bindFuncConToObject
=
funcNon(f,
obj){
(“this”
Binding)
if
(typeof(f)
!=
'funcNon')
return
obj;
return
funcNon(){
f.apply(obj,
arguments);
}
};
//.....
submitBtn.onclick
=
ns.bindFuncConToObject(
controller.checkForm
,
controller);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
64. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.bindFuncConToObject
=
funcNon(f,
obj){
(“this”
Binding)
if
(typeof(f)
!=
'funcNon')
return
obj;
return
funcNon(){
f.apply(obj,
arguments);
}
};
//.....
submitBtn.onclick
=
ns.bindFuncConToObject(
controller.checkForm
,
controller);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
65. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
ns.fadeOut=funcNon(trigger,
Nme,
selector)
{
//
..
Some
visual
FX
code
};
//...
ns.fadeOut('onclick',
200,
'coolForm');
ns.fadeOut('onclick',
200,
'warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
66. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
ns.fadeOut=funcNon(trigger,
Nme,
selector)
{
//
..
Some
visual
FX
code
};
//...
ns.fadeOut('onclick',
200,
'coolForm');
ns.fadeOut('onclick',
200,
'warningMsg');
✖ RepeCCvo
y
laborioso
✖ Fácil
equivocarnos
✖ Di~cil
de
mantener
✖ No
es
legible
(intent)
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
67. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
68. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
Argumentos
return
funcNon(){
transformados
en
return
fn.apply(this,
fixedArgs.concat(
array
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
69. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
70. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
71. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
ReuClizable
Array.prototype.slice.call(arguments)));
legible
(intent)
};
Flexible
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
72. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
OO
sin
ns.Evento
=
funcNon(nombre){
var
id
=
nombre
||
'<anonymous>';
prototype:
var
subscriptores
=
[];
Encapsulación
var
subscriptorYaRegistrado
=
funcNon(subscriptor){//...
};
var
noNficarSubscriptor
=
funcNon(evento,
subscriptor){//...
};
this.registrarSubscriptor
=
funcNon(subscriptor){//...
};
this.borrarSubscriptor
=
funcNon(subscriptor){//...
};
this.noNficar
=
funcNon(callback){//...
};
this.destruir
=
funcNon(){//...
};
};
//..
Carlos Benitez (@etnassoft)
var
onClick
=
new
ns.Evento('onclick');
Enrique Amodeo (@eamodeorubio)
73. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
OO
sin
ns.Evento
=
funcNon(nombre){
var
id
=
nombre
||
'<anonymous>';
prototype:
var
subscriptores
=
[];
Encapsulación
var
subscriptorYaRegistrado
=
funcNon(subscriptor){//...
};
var
noNficarSubscriptor
=
funcNon(evento,
subscriptor){//...
};
this.registrarSubscriptor
=
funcNon(subscriptor){//...
Datos
privados
};
this.borrarSubscriptor
=
funcNon(subscriptor){//...
};
this.noNficar
=
funcNon(callback){//...
};
this.destruir
=
funcNon(){//...
};
};
//..
Carlos Benitez (@etnassoft)
var
onClick
=
new
ns.Evento('onclick');
Enrique Amodeo (@eamodeorubio)
74. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
OO
sin
ns.Evento
=
funcNon(nombre){
var
id
=
nombre
||
'<anonymous>';
prototype:
var
subscriptores
=
[];
Encapsulación
var
subscriptorYaRegistrado
=
funcNon(subscriptor){//...
};
var
noNficarSubscriptor
=
funcNon(evento,
subscriptor){//...
};
Métodos
this.registrarSubscriptor
=
funcNon(subscriptor){//...
};
privados
this.borrarSubscriptor
=
funcNon(subscriptor){//...
};
this.noNficar
=
funcNon(callback){//...
};
this.destruir
=
funcNon(){//...
};
};
//..
Carlos Benitez (@etnassoft)
var
onClick
=
new
ns.Evento('onclick');
Enrique Amodeo (@eamodeorubio)