Oo Javascript

1,578 views

Published on

by Davide Cerbo e Stefano Linguerri.
Javascript viene sempre consiederato un linguaggio di serie B in cui è impossibile seguire le buone regole della programmazione ad oggetti. Ma non è così! In questa presentazione scopriremo come questo sia un linguaggio in continua evoluzione e come sia possibile sviluppare seguendo i paradigmi della programmazione ad oggetti. Scopriremo tool e librerie che ci permetteranno di sviluppare creando batterie di test, oggetti mock e inserire istruzioni di log nel nostro codice. Durante questa presentazione illustreremo anche la libreria Prototype che ci sarà di supporto durante gli esempi.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,578
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Oo Javascript

  1. 1. OBJECT ORIENTED JAVASCRIPT guida per un mondo migliore Davide Cerbo http://jesty.it Stefano Linguerri http://www.eljeko.net
  2. 2. Una cattiva impressione
  3. 3. L'unione fa la forza JAVASCRIPT + PROTOTYPE
  4. 4. Perché usare Prototype <ul><li>Codice più breve
  5. 5. Sintassi più chiara
  6. 6. Gestisce le incompatibilità trai vari browser
  7. 7. Fornisce diverse funzioni e oggetti di utilità
  8. 8. Permette lo sviluppo di Javascript non intrusivo
  9. 9. E' complementare a Script.aculo.us </li></ul>
  10. 10. Qualcosa di utile <ul><li>$('...') -> come getDocumentById('...') ma ritorna un Element di Prototype
  11. 11. $$('...') -> Selettore CSS $$('.menu #submenu) ritorna tutti gli elementi che hanno class submenu all'interno di un elemento che ha id menu
  12. 12. Ajax.request(Url, {...}) -> Esegue una richiesta AJAX, le graffe conterranno le opzioni della request: new Ajax.Request(url, {onSuccess: function(transport) {...}); Esistono anche altri metodi come: updater e periodicalUpdater.
  13. 13. Template -> Permette di definire delle stringe parametrizzabili var t = new Template('Name: #{name}, surname: #{surname}'); var show = {name: 'Davide', surname: 'Cerbo'}; t.evaluate(show); //return “Name: Davide, surname: Cerbo”
  14. 14. Observer -> Permette di osservare gli eventi su un elemento $('id').observe('click', function(element){...}); </li></ul>
  15. 15. Di cosa abbiamo bisogno? <ul><li>Per considerare JAVASCRIPT un linguaggio Object Oriented abbiamo bisogno di:
  16. 16. Strutture dati complesse
  17. 17. Classi
  18. 18. Interfacce
  19. 19. Polimorfismo </li></ul>
  20. 20. Strutture dati complesse <ul><li>Hash -> var h = new Hash(); h.set(“key”, “value”); h.get(“key”); //return “value” h.unset(“key”); h.toQueryString() //return “key1=v1&key2=v2&...”
  21. 21. Enumerable -> sono liste iterabili con metodi come each, map, find, select, etc... $A(...).each(function(e){ alert(e.id); }); $$('...') restituisce un Enumerable </li></ul>Sono tutte CLOSURE
  22. 22. Questione di classe <ul><li>Javascript Classico </li></ul>var Person = Class.create(); Person.prototype = { initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }; var jack = new Person (“Jack Maffai”); jack.say(“Hi Boy”); //return Jack Maffai: Hi boy! <ul><li>Prototype </li></ul>var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }); var jack = new Person (“Jack Maffai”); jack.say(“Hi Boy”); //return Jack Maffai: Hi boy!
  23. 23. Estendiamo <ul><li>Javascript classico </li></ul>var Pirate = Class.create(); Pirate.prototype = Object.extend(new Person(), { say: function(message) { return this.name + ': ' + message + ', yarr!'; } }); <ul><li>Prototype </li></ul>var Pirate = Class.create(Person, { say: function($super, message) { return $super(message) + ', yarr!'; } }); new Pirate (“Jack Maffai”).say(“Hi Boy!”); //say return: Hi Boy!, yarr!
  24. 24. Interfacce? Non ci sono e basta! Accontentiamoci delle classi E ricordiamoci che in Javascript vige la regola: “ If it walks like a duck and quacks like a duck, I would call it a duck.”
  25. 25. Al volo var john = new Pirate('Long John'); john.sleep(); // -> ERROR: sleep is not a method Person.addMethods({ sleep: function() { return this.say('ZzZ'); } }); john.sleep(); // -> &quot;Long John: ZzZ, yarr!&quot; Il metodo viene aggiunto a tutte le istanze e le sottoclassi di Pirate
  26. 26. DOMinare con Prototype Questo approccio deve cambiare il nostro modo di vedere la programmazione Javascript PROGRAMMAZIONE FUNZIONALE
  27. 27. Esempio <ul><li>HTML: </li></ul><table id=&quot;simonboard&quot;> <TR> <TD id=&quot;red&quot;></TD> <TD id=&quot;blue&quot;></TD> <TD id=&quot;fuchsia&quot;></TD> </TR> <TR> <TD id=&quot;black&quot;></TD> <TD id=&quot;green&quot;></TD> <TD id=&quot;aqua&quot;></TD> </TR> <TR> <TD id=&quot;gold&quot;></TD> <TD id=&quot;magenta&quot;></TD> <TD id=&quot;coral&quot;></TD> </TR> </table> <ul><li>Script di startup: </li></ul><script language=&quot;JavaScript&quot;> // $('simonboard') -> indica la tabella // 5 -> il numero massimo di quadrati da colorare new Board($('simonboard')).start(5); </script> Il colore predefinito per il quadrato Tabella da utilizzare
  28. 28. Lo script var Tile = Class.create({ initialize: function(color, element) { this.color = color; this.element = element; }, blink: function() { this.element.style.backgroundColor = this.color; new Effect.Opacity(this.element, {duration:2, from:1.0, to:0}); // Scrip.aculo.us } }); var Board = Class.create({ initialize: function(boardElement) { this.tiles = boardElement.select(&quot;td&quot;).map(function(element){ return new Tile(element.id, element); }); }, //numero massimo di blocchi da colorare start: function(steps) { var boardSize = this.tiles.length; var tempTiles = this.tiles; //serve per problemi di scope si corregge usando la funzione bind() $R(1, steps).each(function(i){ //funzione di Prototype che riempe un array con un range di valori var index = Math.ceil(Math.random() * boardSize); var tile = tempTiles[index-1]; window.setTimeout(function() { tile.blink(); }, 500 * index); }); } });
  29. 29. Un concetto utile: bind start: function(steps) { var boardSize = this.tiles.length; $R(1, steps).each(function(i) { var index = Math.ceil(Math.random() * boardSize); var tile = this.tiles[index-1]; window.setTimeout(function() { tile.blink(); }, 500 * index); } .bind(this) ); } Il bind serve ad evitare problemi di scope, se lo avessi omesso il this considerato dalla funzione sarebbe stato l'oggeto window . In Javascript tutte le funzioni sono eseguite in un determinato contesto e questo è referenziabile tramite la parola chiave da this Le funzioni utilizzate come closure sono funzioni globali, quindi hanno il contesto globale
  30. 30. Strumenti utili <ul><li>Log4J
  31. 31. Debugger
  32. 32. JUnit
  33. 33. JMock e simili </li></ul><ul><li>BlackbirdJS
  34. 34. Firebug
  35. 35. JSUnit
  36. 36. JSMock </li></ul>Siamo abituati ad avere una marea di strumenti a nostra disposione javascript non ci deluderà!
  37. 37. Logging: Log4J -> BlackbirdJS
  38. 38. Debug: Java Debugger -> Firebug
  39. 39. Unit Test: JUnit -> JSUnit [1]
  40. 40. Unit Test: JUnit -> JSUnit [2]
  41. 41. Unit Test: JUnit -> JSUnit [3]
  42. 42. Unit Test: JUnit -> JSUnit [4]
  43. 43. MockObject: JMock -> JSMock [1] <ul><li>Classe sotto test (CUT) </li></ul>function Worker() { this.getValue = function() { /* ... */} this.isFinished = function() {/* ... */} } <ul><li>Fixture </li></ul>function doWork(worker) { if(worker.isFinished()) { return worker.getValue(); } else { return null; } } <ul><li>Test </li></ul>function test_doWork() { var mControl = new MockControl(); worker = mControl.createMock(Worker); worker.expects().isFinished().andReturn(true); worker.expects().getValue().andReturn('hello'); var result = doWork(worker); assertEquals('hello', result); mControl.verify(); }
  44. 44. MockObject: JMock -> JSMock [2] <ul><li>Classe sotto test (CUT) </li></ul>function Worker() { this.getValue = function() { /* ... */} this.isFinished = function() {/* ... */} } <ul><li>Fixture </li></ul>function doWork(worker) { if(worker.isFinished()) { return worker.getValue(); } else { return null; } } <ul><li>Test </li></ul>function test_doWork_null() { var mControl = new MockControl(); worker = mControl.createMock(Worker); worker.expects().isFinished().andReturn(false); var result = doWork(worker); assertNull(result); mControl.verify(); }
  45. 45. Conclusioni
  46. 46. Bibliografia & Links <ul><li>www.prototypejs.org
  47. 47. http://script.aculo.us
  48. 48. http://www.prototypejs.org/learn/class-inheritance
  49. 49. http://www.gscottolson.com/blackbirdjs/
  50. 50. http://getfirebug.com/js.html
  51. 51. http://www.jsunit.net/
  52. 52. http://jsmock.sourceforge.net/
  53. 53. http://www.infoq.com/articles/javascript-tdd
  54. 54. http://en.wikipedia.org/wiki/Duck_typing
  55. 55. http://www.prototypejs.org/api/function/bind
  56. 56. http://alternateidea.com/blog/articles/2007/7/18/javascript-scope-and-binding </li></ul>
  57. 57. Q&A JS? http://jesty.it [email_address] [email_address]

×