DOMmy.js 2.0 estende le funzionalità di Vanilla Javascript

DOMmy.js, la libreria "italiana" che potenzia le funzionalità di base del Vanilla Javascript, è giunta alla sua seconda versione. DOMmy.js non si limita a fornire degli "syntax sugars" per le specifiche ECMA6-7, ma arricchisce concretamente le funzionalità del Javascript nativo, che a volte può risultare alquanto verboso da scrivere. Si tratta di uno script indipendente da qualsiasi framework, non intrusivo, rispettoso degli standard e dedicato specificamente alle ultime e più moderne versioni dei browser Web.

Grazie a DOMmy.js è possibile risparmiare tempo nella scrittura di codice Javascript nativo, senza però dipendere da un ecosistema o da un'architettura enorme tipica dei framework.

Ad esempio, per impostare la larghezza di un elemento div al caricamento della pagina con DOMm.js bastano 3 righe di codice. La sintassi può ricordare l'ecosistema di jQuery, ma gli engine sono molto differenti):

$$$(function() {
$('el').setWidth('300px');
});

In DOMmy.js 2.0 possiamo produrre animazioni basate sull'engine CSS3, arricchite da controlli e funzionalità Javascript, come il concatenamento, l'interruzione, i callback ed i bindings:

let callBack = function() {
this.setHtml('Completed!');
}
let callBack2 = function() {
this.setHtml('Back here again!');
}
$$('.myel').fx([{'width': '300px'}, 2, callBack]
[{'width': '50px'}, 4, callBack2]);

Possiamo poi controllare il tipo delle variabili in tutta sicurezza:

var x = [1,2,3];
var y = {'x': 'x'};
var z = new Date();
var w;
var j = undefined;
var k = null;
var s = [];
console.log(
typeOf(x), // 'array'
typeOf(y), // 'object'
typeOf(z), // 'date'
typeOf(w), // 'undefined'
typeOf(j), // 'undefined'
typeOf(k), // 'null'
typeOf(s) // 'array'
);

creare elementi HTML con attributi, eventi, stili e collocamento immediati:

let myEl = Dommy.Element('div', {
'attr': {'id': 'myDiv'},
'css': {'width': '100px', 'height': '100px', 'background-color': 'blue'},
'appendTo': document.body
});

o produrre richieste AJAX on-the-fly:

$('myel').ajax('https://randomuser.me/api/?results=10',
function(data) {
console.log(data);
this.style.background = 'red'; // or use 'setCss' method
return JSON.stringify(data);
}, function(error) {
console.log('error!');
});

Rispetto al Javascript puro DOMmy.js garantisce compatibilità con tutti i browser supportati (Edge, IE, Firefox, Chrome, Opera e Safari).

Sul sito ufficiale è possibile scaricare la libreria in formato completo oppure minimizzata, consultare la documentazione dedicata e vederla direttamente in azione.

Via DOMmy.js