JavaScript  »  Articoli  »  Programmazione Javascript 

Andiamo ora a ripetere il precedente task, ma avvalendoci del nuovo metodo:

	
Element.setStyles('myEl_1', {'color': 'red', 'display': 'block', 'fontSize': '14px'});

Et voilà, il gioco è fatto.

Migliorare la classe Element

Anche se potrebbe sembrare che la classe Element sia perfetta, in realtà non è cosi. Esistono ben due aspetti che devono essere assolutamente migliorati:

• non è attualmente possibile concatenare più chiamate ai suoi metodi. Ad esempio:

    Element.setStyle('myEl', 'color', 'red').setStyle('myEl', 'display', 'block');
    

• non esiste la possibilità di mettere internamente in cache l'elemento, ma viene ogni volta recuperato nuovamente. Questa strategia consuma molte più risorse del dovuto.

Andiamo dunque ad apportare le suddette modifiche alla classe (in questo snippet tralasciamo i commenti della documentazione relativi ai precedenti metodi):

var Elements = [];

var Element = {

	/*
		Metodo: cache
		Mette nella cache un elemento DOM (metodo privato)
		Argomenti:
			- [string] id : l'id dell'elemento desiderato
	*/
	cache: function(id) {
           if(!Elements[id]) Elements[id] = document.getElementById(id);
           return Elements[id];
         },
	
	get: function(id) {
		return Element.cache(id);
	},
	
	getStyle: function(id, css) {
		return Element.cache(id).style[css];
	},
	
	setStyle: function(id, css, value) {
		Element.cache(id).style[css] = value;
		return Element;
	},
	
	setStyles: function(id, css) {
		for (var p in css) {
			Element.cache(id).style[p] = css[p];
		}
		return Element;
	}
	
}

Il metodo di caching che ho adottato per questo esempio è efficace e brutalmente immediato allo stesso momento. In pratica, ogni volta che effettuiamo operazioni con un elemento, questo verrà per la prima volta inserito in apposito array (Elements in questo caso) e successivamente recuperato dalla medesima postazione.

Ora sarà inoltre possibile concatenare più chiamate contemporaneamente:

Element.setStyles('myEl_1', {'color': 'red', 'display': 'block', 'fontSize': '14px'}).setStyles('myEl_1', {'marginLeft': '20px'});

Shortcuts

Quando sviluppiamo internamente, per quanto elegante e compatta possa essere la nostra sintassi, arriverà il momento che si sentirà la necessità di accorciare i tempi, soprattutto per quanto riguarda la produzione di test locali e snippet minimali. Per questo motivo, andiamo a creare uno shortcut chiamato semplicemente $, che si occuperà di recuperare un elemento DOM e di metterlo in cache:

/*
	Function: $
	Recupera un elemento DOM basandosi sull'id
	Argomenti:
			- [string] id : l'id dell'elemento desiderato
*/
var $ = function(id) {
	return Element.get(id);
}

// utilizzo
console.log($('myEl_1'));
console.log($('myEl_2'));

A questo punto la nostra classe Element ha tutto ciò occorre per essere considerata stabile. Occorrerà ovviamente ampliarla con tanti nuovi metodi che andranno a costituire la nostra API.

Classe Window

Come avete notato, all'interno di alcuni snippet precedenti ho utilizzato l'evento onload dell'oggetto window per effettuare le operazioni descritte. Questa sintassi minimale presenta 2 svantaggi:

• non è possibile impostare più eventi allo stesso oggetto window;
• la sintassi troppo minimale contrasta con la più elegante ed intuitiva API di Element.

Per questo, andiamo a creare la nostra classe Window che ci permetterà di aggiungere una moltitudine di eventi all'oggetto window con una sintassi che meglio si adatta alle nostre esigenze:

/*
	Class: Window
	Wrapper per l'oggetto window
*/
var Window = {
	/*
		Metodo: load
		imposta l'evento load
	*/
	load: function(fn) {
		window.addEventListener('load', fn, false);	
	}
}

Andiamo ora a riscrivere gli snippet precedenti con la nuova sintassi:

Window.load(function() {
	Element.setStyle('myEl_1', 'color', 'red');
	
	// 'red'	
	console.log(Element.getStyle('myEl_1', 'color'));
});

Window.load(function() {
	console.log($('myEl_1'));
	console.log($('myEl_2'));
});

Altri articoli

Altre guide

Altre newsletter