JavaScript no es Vietnam Patrones y pruebas

Alex Casquete

1

ESTE SOY YO

Alex Casquete twitter: acasquete

blog: www.idlebit.es

Hablemos de JavaScript…

JavaScript es…

JavaScript is in the air

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

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

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

Patrón Module

9

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;

}

}

}());

Patrón Mediator

10

Módulo 1

Módulo 2

Módulo 3

Mediator doSomething

done!

Patrón Mediator

11

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; } }; }());

Patrón Façade

12

var module = (function() { var _private = { i:5, 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(); } } } }());

module.facade({run: true, val:10}); //devuelve ‘current value: 10, running’

Patterns For Large-Scale JavaScript

Application Architecture

http://addyosmani.com/largescalejavascript/

Decouple app. architecture w/module,facade &

mediator patterns. Mods publish msgs, mediator

acts as pub/sub mgr & facade handles security

Pruebas

Las pruebas unitarias no son para JavaScript

SI NO PRUEBAS TU CÓDIGO VAS A

CONOCER EL DOLOR

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

Frameworks Testing JavaScript

Un poco de código

Utiliza patrones

No reinventes la rueda

Prueba tu código

20

MicroCharlas CatDotNet 26 de julio 2012