DOMmy.js: libreria Javascript standalone per lavorare con il DOM

DOMmy.js è uno dei miei ultimi progetti pubblici. Si tratta di una libreria Javascript standalone (che non necessita di altre librerie o framework per essere utilizzata) con struttura appartenente alla prima generazione di librerie JS, il suo scopo è infatti la manipolazione del DOM.

Sviluppando DOMmy.js ho voluto mettere in primo piano la leggerezza dello script (la versione compressa pesa infatti meno di 4kb), la velocità di esecuzione (performance) e la curva d'apprendimento. DOMmy.js infatti, nelle sue sintassi e nomenclature fondamentali, risulta essere molto simile ad altri framework Javascript come jQuery e MooTools. A differenza di questi ultimi fornisce però unicamente le seguenti funzionalità:

• la navigazione nel DOM della pagina;
• la creazione di potenti animazioni sfruttando il motore di CSS3 attraverso il Javascript;
• la selezione di elementi e di collezioni di elementi;
• l'aggiunta di singoli o molteplici eventi, proprietà CSS, attributi HTML e dati storage agli elementi o alle collezioni di elementi;
• una struttura this coerente;
• un evento DOMReady per lavorare con la pagina senza dover attendere il caricamento di risorse quali immagini o video.

DOMmy.js vuole essere un progetto Javascript orientato alla modernità ed ai nuovi standard. Per questo motivo risulta essere totalmente cross-browser e compatibile con le versioni più recenti dei maggiori browser, ma non lo è altrettanto completamente con le versioni datate che non supportano funzionalità ormai standard come le nuove proprietà/valori CSS, come le animazioni, ed altri controlli Javascript.

Vediamo alcuni snippet di codice che ci mostrano cosa possiamo fare con DOMmy.js:

Impostazione di proprietà CSS: DomReady

$$$( function() {
  // fai qualcosa
} );

$('myel').css('display', 'block');
$('myel').css({'display': 'block', 'color': 'white'});

Setting e getting di attributi HTML:

$('myel').html('new content');
var title = $('myel').attr('title');
$('myel').attr('title', 'my title');
$('myel').attr({'title': 'my title', 'alt': 'alternate text'});

Selezioni di un elemento e di una collezione di elementi:

$('myel');
$$('#myid div.myclass p');

Aggiunta di eventi DOM:

$('myel').on('click', function() {
    log('Hey!');
});
$$('#myel p').on({
    'click': function() {
        log('Hey!');
    },
    'mouseout': function() {
        log('Hey!');
    }
});

Animazioni CSS3 (il motore di DOMmy.js in relazione alle animazioni non sfrutta un engine interno, ma tramite apposite strutture Javascript va a sfruttare le animazioni offerte dalla specifica CSS3: tutto ciò che essa supporta, DOMmy.js lo può eseguire):

$('myel').fx({'width': '300px'}, 2000, callBack);

Chaining di chiamate DOM:

$$('#e, #d')
    .fx({'font-size': '40px', 'color': 'yellow'}, 1)
    .fx({'font-size': '10px', 'color': 'red'}, 1)
    .attr('title', 'thed')
    .attr('class', 'thed')
    .attr({'lang': 'en', 'dir': 'ltr'});

Per "installare" DOMmy.js basta includere lo script tramite CDN, oppure scaricarlo direttamente dalla pagina del sito:

<script src="http://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // usa dommy.js
    $$$(function() {
        // ...
    });
</script>

La libreria è disponibile sia in versione compressa che in versione non compressa. Sempre nel sito del progetto, è possibile trovare delle demo che mostrano esempi più avanzati di utilizzo della libreria, come ad esempio le chiamate in queue delle animazioni (fx), l'aggiunta di determinati callback ed il chaining di metodi. Ogni metodo applicabile con DOMmy.js è infatti propriamente incatenabile con tutti gli altri metodi.

Per un effetto di hovering, procederemo ad esempio nel seguente modo:

$$$(function() {
    $('demo1').on({
        'mouseover': function() {
            this.fx({'width': '300px'}, 1, function() {
                this.html('Completed!');
            });
        },
        'mouseout': function() {
            this.fx({'width': '100px'}, 1, function() {
                this.html('Back again!');
            });
        }
    });
});

Lo stile di DOMmy.js permette di poter scrivere una quantità di codice davvero minima per ottenere effetti paragonabili a quelli comunemente prodotti da framework full-featured.

Via DOMmy.js