JavaScript no es Vietnam
1 recomendación883 vistas
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.
![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](https://image.slidesharecdn.com/javascriptnoesvietnam-120729153323-phpapp02/85/JavaScript-no-es-Vietnam-9-320.jpg)
![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](https://image.slidesharecdn.com/javascriptnoesvietnam-120729153323-phpapp02/85/JavaScript-no-es-Vietnam-11-320.jpg)
JavaScript no es Vietnam
- 1. JavaScript no es Vietnam Patrones y pruebas Alex Casquete 1
- 2. ESTE SOY YO Alex Casquete twitter: acasquete blog: www.idlebit.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
- 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