JavaScript  »  Articoli  »  Programmazione Javascript 

Nella prima parte dell'articolo, abbiamo affrontato l'impronta teorica comprendente le considerazioni e i consigli più utili per intraprendere lo sviluppo di una piccola libreria di codice Javascript. È ora di passare alla parte pratica e vedere con quale approccio affreontare questo tipo di soluzione.

Classe Element

La nostra libreria di codice si occuperà prevalentemente di lavorare con gli elementi DOM della pagina. I compiti più immediati che si possono svolgere con questi ultimi sono il recupero, la manipolazione e il setting/getting di attributi HTML e stili CSS. Abbiamo affermato che la nostra libreria assumerà un approccio Object Oriented, dato che Javascript offre tutti gli strumenti adatti alla creazione di involucri di dati molto evoluti.

La prima classe che andremo a creare si chiamerà dunque Element e ci permetterà di effettuare tutte queste operazioni con gli elementi utilizzando una sintassi comune. Ecco l'aspetto del primissimo metodo, chiamato get, che permette di recuperare gli elementi basandosi sull'id degli stessi:

/*
	Class: Element
	Permette di lavorare con gli elementi DOM della pagina
*/
var Element = {
	
	/*
		Metodo: get
		Restituisce un elemento DOM basandosi sull'id dello stesso
		Argomenti:
			- [string] id : l'id dell'elemento desiderato
	*/
	get: function(id) {
		return document.getElementById(id);
	}
	
}

// utilizzo del metodo Element::get
window.onload = function() {
	console.log(Element.get('myEl_1'));
}

A questo punto potremmo già effettuare operazioni del tipo setting e getting di stili CSS nel seguente modo standard:

Element.get('myEl_1').style.color = 'red';

ma uno degli scopi della nostra libreria è quello di avere una sintassi intuitiva e comune, senza contare il fatto che dobbiamo riuscire a scrivere meno codice di quanto facciamo normalmente. Ecco dunque i nuovi metodi getStyle e setStyle, che si occuperanno rispettivamente di restituire ed impostare gli stili inline css di un elemento:

var Element = {

	// ...
	
	/*
		Metodo: getStyle
		recupera il valore dell stile inline di una proprietà css specificata
		Argomenti:
			- [string] id : l'id dell'elemento desiderato
			- [string] css: la proprietà css
	*/
	getStyle: function(id, css) {
		return Element.get(id).style[css];
	},
	
	/*
		Metodo: setStyle
		imposta lo stile inline ad una proprietà css specificata
		Argomenti:
			- [string] id : l'id dell'elemento desiderato
			- [string] css: la proprietà css
			- [string] value: il valore della proprietà css 
	*/
	setStyle: function(id, css, value) {
		Element.get(id).style[css] = value;
	}
	
}

// utilizzo del metodo Element::get
window.onload = function() {
	Element.setStyle('myEl_1', 'color', 'red');
	
	// 'red'	
	console.log(Element.getStyle('myEl_1', 'color'));
}

Come possiamo vedere, siamo ora in grado di recuperare ed impostare uno alla volta gli stili CSS di un elemento. Tuttavia, potrebbe essere molto noioso chiamare più volte lo stesso metodo per effettuare lo stessa task. Supponiamo di voler impostare tre stili CSS differenti al nostro elemento: con l'aspetto attuale dell'oggetto Element dovremmo obbligatoriamente scrivere:

Element.setStyle('myEl_1', 'color', 'red');
Element.setStyle('myEl_1', 'display', 'block');
Element.setStyle('myEl_1', 'fontSize', '14px');

Ricordiamo che una libreria non raggiunge mai lo stato dell'arte, ma deve essere continuamente aggiornata e migliorata per adattarsi al meglio alle nostre esigenze. Per questo motivo, andiamo a creare il metodo setStyles, che ci permetterà di impostare più stili CSS al nostro elemento con una sola chiamata:

var Element = {
	
	/*
		Metodo: setStyles
		imposta lo stile inline ad una moltitudine di proprietà css specificate
		Argomenti:
			- [string] id : l'id dell'elemento desiderato
			- [object] css: le proprietà css da impostare
	*/
	setStyles: function(id, css) {
		for (var p in css) {
			Element.get(id).style[p] = css[p];
		}
	}

}

Altri articoli

Altre guide

Altre newsletter