Creare una piccola libreria standalone - La pratica

di: Riccardo Degni     26 Ottobre 2009

Finalizzare la libreria

Una volta terminata la versione stabile della nostra libreria personale, è giunta l'ora di finalizzare il lavoro rilasciando la nostra nuova release, nel caso si tratti di un lavoro pubblico. In ogni caso, è sempre bene fornire i nostri codici di una determinata licenza e del nome dell'autore (o degli autori). In questo caso sceglieremo la licenza MIT:

/*
	HTML.it Element API Version 1.0
	
	Author: Riccardo Degni AKA RD
	
	License: MIT-style License
*/

// ...

L'aspetto finale della nostra libreria sarà dunque il seguente:

/*
	HTML.it Element API Version 1.0
	
	Author: Riccardo Degni AKA RD
	
	License: MIT-style License
*/

/*
  Array: Element
  Wrapper che simula la cache di elementi.
*/
var Elements = [];

/*
	Class: Element
	Permette di lavorare con gli elementi DOM della pagina
*/
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];
        },
	
	
	/*
		Metodo: get
		Restituisce un elemento DOM basandosi sull'id dello stesso
		Argomenti:
			- [string] id : l'id dell'elemento desiderato
	*/
	get: function(id) {
		return Element.cache(id);
	},
	
	/*
		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.cache(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.cache(id).style[css] = value;
		return 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.cache(id).style[p] = css[p];
		}
		return Element;
	}
	
}

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

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

Ecco infine il pacchetto contenente la libreria pronto per il download.

Conclusione

Come abbiamo potuto osservare nel corso di questa seconda parte, la realizzazione di una libreria è un compito molto impegnativo, che racchiude, oltre alle competenze tecniche, anche una certa eleganza nello sviluppo delle API e soprattutto nell'attenzione alle performance.

Prima di considerare una libreria come stabile, occorrerà apportare tutte le migliorie possibili offerte dall'attuale livello della sua struttura, senza tralasciare l'aspetto fondamentale dei test cross-browser. Gli esempi presentati in questo articolo infatti, come precedentemente dichiarato, non si curano di essere compatibili con i browser di casa Microsoft, mentre in uno scenario pratico sarebbe impensabile tralasciare questo grado di compatibilità. È dunque bene essere consci delle differenze tra browser e fare in modo che il proprio prodotto offra una compatibilità piuttosto ampia: l'esperienza e il grado di qualità faranno il resto.

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida jQuery UI

Creare siti ricchi e dinamici con jQuery UI, il progetto ufficiale...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti