La programmazione ad oggetti rappresenta una metodologia di sviluppo software che si contrappone alla programmazione procedurale, spesso troppo poco gestibile e confusionaria.
Tramite l'approccio orientato ad oggetti è possibile definire delle classi che rappresentano un tipo di dato gestito dall'applicazione che può essere utilizzato solo tramite particolari interfacce esposte dalla classe stessa verso le altre classi dell'applicazione. All'interno di una classe esistono infatti alcune funzionalità "interne" che non vengono mostrate all'esterno.
Tramite questa tipologia di programmazione si migliora notevolmente il codice limitando le interferenze tra diversi componenti e incapsulando funzionalità specifiche all'interno di una sorta di contenitore che permette una organizzazione più funzionale ed elegante.
Le caratteristiche principali di un linguaggio ad oggetti sono tre:
ereditarietà:la possibilità di estendere classi con altre classi che ne ereditano appunto proprietà e metodi;
incapsulamento:la possibilità di includere in una classe funzionalità specifiche che non verranno rese pubbliche al resto dell'applicazione;
polimorfismo:la possibilità di avere funzionalità particolari che si comportano in maniera diversa in base all'oggetto invocante o ai parametri ad esso passati.
JavaScript è un linguaggio ad oggetti abbastanza particolare. Presenta infatti molte caratteristiche chiave della programmazione ad oggetti (per esempio il fatto che qualsiasi variabile sia un oggetto) ma non tutte (come per esempio la modifica della visibilità di un metodo).
Inoltre presenta moltissimi aspetti facenti capo alla programmazione procedurale (la possibilità di avere funzioni "sganciate" da classi particolari) e aspetti un po' esotici come il concetto di scope e di closure visti nelle lezioni precedenti).
Personalmente preferisco puntare sempre su una programmazione ad oggetti in quanto la ritengo più chiara, manutenibile ed elegante, rispetto ad una programmazione funzionale.
Le mancanze presenti nel linguaggio non devono spaventare lo sviluppatore orientato agli oggetti in quanto possono comunque essere in qualche modo aggirate con un po' di mestiere e di buona programmazione. L'unica effettiva mancanza che ho riscontrato nel linguaggio è quella delle interfacce, componente abbastanza comodo nella programmazione ad oggetti.
JavaScript presenta una programmazione ad oggetti basata sui prototipi. Questo concetto si differenzia un po' dai principali programmi orientati a questo tipo di programmazione com Java o C++.
Il suo funzionamento è semplice. Ciascuna classe presenta al suo interno una proprietà, chiamata appunto prototype, che presenta un 'meta oggetto'. Qualsiasi oggetto facente capo a questa classe sarà istanziato esattamente come una copia di questo prototipo. Modificando questa meta classe sarà possibile influenzare direttamente tutti i precedenti oggetti creati a partire da questa classe.
Passiamo subito ad una dimostrazione pratica:
Innanzitutto creiamo la classe oggetto definendo solo il costruttore che imposta la proprietà name. Successivamente instanziamo un oggetto (a) e modifichiamo l'oggetto prototype aggiungendo una nuova proprietà: lastname. Per ultimo instanziamo un secondo oggetto (b) e stampiamo i parametri.
Nonostante possa sembrare strano, anche l'oggetto a presenta una proprietà lastname proprio perché entrambi gli oggetti fanno capo a questo prototipo definito nella proprietà prototype della classe oggetto.
Questa è una notevole comodità del linguaggio: è infatti possibile realizzare delle vere e proprie classi dinamiche che possono essere modificate internamente anche a runtime.
Per esaminare tutti gli aspetti più critici della programmazione ad oggetti in JavaScript, utilizziamo un esempio, cui faremo riferimento in tutto il capitolo. Vediamo come creare un semplice componente DataGrid con poche funzionalità utili allo scopo.
Una DataGrid è caratterizzata da due vettori: il primo rappresenta il nome delle colonne e il secondo contiene a sua volta altri vettori che rappresentano i dati effettivi da mostrare. Presenta alcuni aspetti grafici come l'effetto rollover sulla riga sottostante il cursore del mouse e la possibilità di selezionare dei record.
Gli unici due metodi esposti sono getSelectedIndex che ritorna un vettore contenente gli indici delle righe selezionate, e getSelectedData che ritorna un vettore contenente i dati contenuti nelle righe selezionate.
Per nascondere eventuali proprietà e metodi privati è stata utilizzata la naming convention che prevede di chiamare gli oggetti con un underscore (_) davanti al nome.
La classe DataGrid, che abbiamo definito nella lezione precedente, è definita da una semplice funzione e dalla modifica dell'oggetto prototype associato ad essa. Ovviamente per poter utilizzare questo approccio è necessario prima di tutto definire il costruttore e successivamente i metodi, in quanto l'oggetto DataGrid.prototype esiste solo successivamente alla definizione della funzione DataGrid.
Il costruttore non fa altro che impostare alcune proprietà private della classe in base ai parametri passati e a istanziare il vettore _selectedIndex che conterrà gli indici delle righe selezionate.
Il metodo più complesso è render il quale costruisce gli oggetti DOM che rappresentano la struttura della tabella ed appende questi oggetti all'elemento DOM ricevuto come parametro.
Il punto critico di questo metodo è l'assegnazione a ciascuna riga della tabella (tr) di tre callback per altrettanti eventi (onmouseover, onmouseout, onclick). A queste funzioni callback viene forzato lo scope tramite la funzione setScope, alla quale vengono passati alcuni parametri aggiuntivi: nel nostro caso un riferimento all'oggetto tr stesso e l'indice della riga selezionata.
Successivamente vengono definite queste funzioni callback, che modificarno l'aspetto grafico della tabella e, nel caso di _onclick, demandano le funzionalità a _onselect o a _ondeselect in base al fatto che la riga sulla quale l'utente ha cliccato sia già stata selezionata o meno (lo capiamo controllando che l'indice i sia presente o meno all'interno dell'oggetto _selectedIndex).Queste due funzioni a loro volta salvano o eliminano appunto da questa cache locale la riga selezionata.
Gli ultimi due metodi sono quelli pubblici (non presentano l'underscore iniziale), che forniscono all'utilizzatore di questa classe un'interfaccia comoda per interagire e ottenere informazioni riguardo la griglia.
Oltre a questa classe implementiamo altri metodi di utilità per gli oggetti Function e Array:
Il metodo setScopeè la versione leggermente modificata della funzione vista in precedenza: questa richiama la funzione passando anche un numero non definito di argomenti passati alla funzione setScope. Il ciclo for iniza da 1 e non da 0 proprio per "scartare" il primo argomento che rappresenta lo scope e non un parametro aggiuntivo.
Sono stati aggiunti anche due metodi di utilità all'oggetto implicito Array per ricercare se un elemento è già presente al suo interno e per eliminarlo.
Il funzionamento della griglia è semplicissimo:
Oltre alla semplice creazione della griglia e il suo render all'interno del <div>, sono stati predisposti due bottoni per verificare l'effettivo funzionamento delle API della classe DataGrid.
L'esempio, come al solito, è perfettibile, sia sotto il profilo della funzionalità, sia nell'aspetto, ma dovrebbe essere sufficiente a mostrare la potenza dell'uso dei prototipi.
fonte: javascript.html
Tramite l'approccio orientato ad oggetti è possibile definire delle classi che rappresentano un tipo di dato gestito dall'applicazione che può essere utilizzato solo tramite particolari interfacce esposte dalla classe stessa verso le altre classi dell'applicazione. All'interno di una classe esistono infatti alcune funzionalità "interne" che non vengono mostrate all'esterno.
Tramite questa tipologia di programmazione si migliora notevolmente il codice limitando le interferenze tra diversi componenti e incapsulando funzionalità specifiche all'interno di una sorta di contenitore che permette una organizzazione più funzionale ed elegante.
Le caratteristiche principali di un linguaggio ad oggetti sono tre:
ereditarietà:la possibilità di estendere classi con altre classi che ne ereditano appunto proprietà e metodi;
incapsulamento:la possibilità di includere in una classe funzionalità specifiche che non verranno rese pubbliche al resto dell'applicazione;
polimorfismo:la possibilità di avere funzionalità particolari che si comportano in maniera diversa in base all'oggetto invocante o ai parametri ad esso passati.
JavaScript è un linguaggio ad oggetti abbastanza particolare. Presenta infatti molte caratteristiche chiave della programmazione ad oggetti (per esempio il fatto che qualsiasi variabile sia un oggetto) ma non tutte (come per esempio la modifica della visibilità di un metodo).
Inoltre presenta moltissimi aspetti facenti capo alla programmazione procedurale (la possibilità di avere funzioni "sganciate" da classi particolari) e aspetti un po' esotici come il concetto di scope e di closure visti nelle lezioni precedenti).
Personalmente preferisco puntare sempre su una programmazione ad oggetti in quanto la ritengo più chiara, manutenibile ed elegante, rispetto ad una programmazione funzionale.
Le mancanze presenti nel linguaggio non devono spaventare lo sviluppatore orientato agli oggetti in quanto possono comunque essere in qualche modo aggirate con un po' di mestiere e di buona programmazione. L'unica effettiva mancanza che ho riscontrato nel linguaggio è quella delle interfacce, componente abbastanza comodo nella programmazione ad oggetti.
JavaScript presenta una programmazione ad oggetti basata sui prototipi. Questo concetto si differenzia un po' dai principali programmi orientati a questo tipo di programmazione com Java o C++.
Il suo funzionamento è semplice. Ciascuna classe presenta al suo interno una proprietà, chiamata appunto prototype, che presenta un 'meta oggetto'. Qualsiasi oggetto facente capo a questa classe sarà istanziato esattamente come una copia di questo prototipo. Modificando questa meta classe sarà possibile influenzare direttamente tutti i precedenti oggetti creati a partire da questa classe.
Passiamo subito ad una dimostrazione pratica:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Innanzitutto creiamo la classe oggetto definendo solo il costruttore che imposta la proprietà name. Successivamente instanziamo un oggetto (a) e modifichiamo l'oggetto prototype aggiungendo una nuova proprietà: lastname. Per ultimo instanziamo un secondo oggetto (b) e stampiamo i parametri.
Nonostante possa sembrare strano, anche l'oggetto a presenta una proprietà lastname proprio perché entrambi gli oggetti fanno capo a questo prototipo definito nella proprietà prototype della classe oggetto.
Questa è una notevole comodità del linguaggio: è infatti possibile realizzare delle vere e proprie classi dinamiche che possono essere modificate internamente anche a runtime.
La classe DataGrid
Per esaminare tutti gli aspetti più critici della programmazione ad oggetti in JavaScript, utilizziamo un esempio, cui faremo riferimento in tutto il capitolo. Vediamo come creare un semplice componente DataGrid con poche funzionalità utili allo scopo.
Una DataGrid è caratterizzata da due vettori: il primo rappresenta il nome delle colonne e il secondo contiene a sua volta altri vettori che rappresentano i dati effettivi da mostrare. Presenta alcuni aspetti grafici come l'effetto rollover sulla riga sottostante il cursore del mouse e la possibilità di selezionare dei record.
Gli unici due metodi esposti sono getSelectedIndex che ritorna un vettore contenente gli indici delle righe selezionate, e getSelectedData che ritorna un vettore contenente i dati contenuti nelle righe selezionate.
Per nascondere eventuali proprietà e metodi privati è stata utilizzata la naming convention che prevede di chiamare gli oggetti con un underscore (_) davanti al nome.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Costruire un componente come DataGrid
La classe DataGrid, che abbiamo definito nella lezione precedente, è definita da una semplice funzione e dalla modifica dell'oggetto prototype associato ad essa. Ovviamente per poter utilizzare questo approccio è necessario prima di tutto definire il costruttore e successivamente i metodi, in quanto l'oggetto DataGrid.prototype esiste solo successivamente alla definizione della funzione DataGrid.
Il costruttore non fa altro che impostare alcune proprietà private della classe in base ai parametri passati e a istanziare il vettore _selectedIndex che conterrà gli indici delle righe selezionate.
Il metodo più complesso è render il quale costruisce gli oggetti DOM che rappresentano la struttura della tabella ed appende questi oggetti all'elemento DOM ricevuto come parametro.
Il punto critico di questo metodo è l'assegnazione a ciascuna riga della tabella (tr) di tre callback per altrettanti eventi (onmouseover, onmouseout, onclick). A queste funzioni callback viene forzato lo scope tramite la funzione setScope, alla quale vengono passati alcuni parametri aggiuntivi: nel nostro caso un riferimento all'oggetto tr stesso e l'indice della riga selezionata.
Successivamente vengono definite queste funzioni callback, che modificarno l'aspetto grafico della tabella e, nel caso di _onclick, demandano le funzionalità a _onselect o a _ondeselect in base al fatto che la riga sulla quale l'utente ha cliccato sia già stata selezionata o meno (lo capiamo controllando che l'indice i sia presente o meno all'interno dell'oggetto _selectedIndex).Queste due funzioni a loro volta salvano o eliminano appunto da questa cache locale la riga selezionata.
Gli ultimi due metodi sono quelli pubblici (non presentano l'underscore iniziale), che forniscono all'utilizzatore di questa classe un'interfaccia comoda per interagire e ottenere informazioni riguardo la griglia.
Oltre a questa classe implementiamo altri metodi di utilità per gli oggetti Function e Array:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il metodo setScopeè la versione leggermente modificata della funzione vista in precedenza: questa richiama la funzione passando anche un numero non definito di argomenti passati alla funzione setScope. Il ciclo for iniza da 1 e non da 0 proprio per "scartare" il primo argomento che rappresenta lo scope e non un parametro aggiuntivo.
Sono stati aggiunti anche due metodi di utilità all'oggetto implicito Array per ricercare se un elemento è già presente al suo interno e per eliminarlo.
Il funzionamento della griglia è semplicissimo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Oltre alla semplice creazione della griglia e il suo render all'interno del <div>, sono stati predisposti due bottoni per verificare l'effettivo funzionamento delle API della classe DataGrid.
L'esempio, come al solito, è perfettibile, sia sotto il profilo della funzionalità, sia nell'aspetto, ma dovrebbe essere sufficiente a mostrare la potenza dell'uso dei prototipi.
fonte: javascript.html
