Este documento presenta una charla sobre patrones y pruebas en JavaScript. Explica varios patrones de creación de objetos, reutilización de código y diseño como módulo, mediador y fachada. Resalta la importancia de las pruebas unitarias en JavaScript y propone usar frameworks para facilitar las pruebas dado que JavaScript es difícil de probar. Finalmente, enfatiza el uso de patrones y pruebas para escribir código de alta calidad en JavaScript.

1. JavaScript no es Vietnam
Patrones y pruebas
Alex Casquete
1

2. ESTE SOY YO
Alex Casquete
twitter: acasquete
blog: www.idlebit.es

3. Hablemos de JavaScript…

4. JavaScript es…

5. JavaScript is in the air

6. JavaScript no es como cualquier
otro lenguaje orientado a objetos
No vale con tirar líneas de código sin más
Tiene importantes diferencias con otros lenguajes

7. var myBeer = {
“name” : “Moritz”,
“take” : function() { alert(“Great!”); },
“displayName” : function() {
alert(this.name + “ is my Beer”);
},
“drink” : function() {
// not implemented
}
};
myBeer.displayName();
myBeer.drink();

8. PATRONES DE CREACIÓN DE OBJETOS
NAMESPACE - DECLARING DEPENDENCIES - PRIVATE PROPERTIES AND
METHODS – REVELATION PATTERN - MODULE PATTERN - SANDBOX -
STATIC MEMBERS - OBJECT CONSTANTS - CHAINING PATTERN
PATRONES DE REUTILIZACIÓN DE CÓDIGO
PROTOTYPAL INHERITANCE - INHERITANCE BY COPYING PROPERTIES –
MIX-INS - BORROWING METHODS
PATRONES DE DISEÑO
BUILDER – FACTORY – SINGLETON – DECORATOR – FAÇADE – PROXY –
CHAIN OF RESPOSIBILITY – COMMAND - ITERATOR – MEDIATOR –
OBSERVER - STRATEGY

9. Patrón Module
var basketModule = (function() {
var basket = []; //private
return { //exposed to public
addItem: function(values) {
basket.push(values);
},
getItemCount: function() {
return basket.length;
},
getTotal: function(){
var q = this.getItemCount(),p=0;
while(q--){
p+= basket[q].price;
}
return p;
}
}
}());
9

10. Patrón Mediator
Módulo 1
doSomething
Módulo 2 Mediator
done!
Módulo 3
10

11. Patrón Mediator
var mediator = (function(){
var subscribe = function(channel, fn){
if (!mediator.channels[channel]) mediator.channels[channel] = [];
mediator.channels[channel].push({ context: this, callback: fn });
return this;
},
publish = function(channel){
if (!mediator.channels[channel]) return false;
var args = Array.prototype.slice.call(arguments, 1);
for (var i = 0, l = mediator.channels[channel].length; i < l; i++) {
var subscription = mediator.channels[channel][i];
subscription.callback.apply(subscription.context, args);
}
return this;
};
return {
channels: {},
publish: publish,
subscribe: subscribe,
installTo: function(obj){
obj.subscribe = subscribe;
obj.publish = publish;
}
};
}());
11

12. Patrón Façade
var module = (function() { module.facade({run: true, val:10});
var _private = {
i:5, //devuelve ‘current value: 10, running’
get : function() {
console.log('current value:' + this.i);
},
set : function( val ) {
this.i = val;
},
run : function() {
console.log('running');
},
jump: function(){
console.log('jumping');
}
};
return {
facade : function( args ) {
_private.set(args.val);
_private.get();
if ( args.run ) {
_private.run();
}
}
}
}());
12

13. Patterns For Large-Scale JavaScript
Application Architecture
Decouple app. architecture w/module,facade &
mediator patterns. Mods publish msgs, mediator
acts as pub/sub mgr & facade handles security
http://addyosmani.com/largescalejavascript/

14. Pruebas

15. Las pruebas unitarias no son para JavaScript

16. SI NO PRUEBAS
TU CÓDIGO VAS A
CONOCER EL
DOLOR

17. JavaScript es díficil de probar
Si no tenemos nuestro código preparado
Código mezclado con HTML
Eventos en línea en el HTML

18. Frameworks Testing JavaScript

19. Un poco de código

20. Utiliza patrones
No reinventes la rueda
Prueba tu código
20

23. MicroCharlas CatDotNet 26 de julio 2012