Librerie JavaScript: se ne può fare a meno?

Lo sviluppo web con JavaScript era molto faticoso prima dell'introduzione delle tante librerie che conosciamo. Per dimostrarlo, vedremo l'implementazione di semplicissimi tooltip realizzati senza l'ausilio di alcuna libreria. Fate attenzione al numero di righe di codice.

Partiamo da questo riferimento HTML:


<a href="#" title="Test" class="tooltip">...</a>

Dobbiamo individuare nel DOM tutti i link con la classe specificata, aggiungere un elemento vuoto alla pagina, impostare il suo contenuto testuale sul valore dell'attributo title dei link e associare gli eventi mouseover/out a ciascun link per posizionare il tooltip e mostrarlo sulla pagina.

Osservate ora la prolissità del codice:


var Tooltip = function() {

    var create = function() {

        var tooltip = document.createElement('span');
        tooltip.id = 'tooltip';
        var body = document.body;
        body.appendChild(tooltip);

    };




    var handle = function() {

        var a = document.getElementsByTagName('a'),
            i, len = a.length,
            $tooltip = document.getElementById('tooltip');

        for (i = 0; i < len; i++) {

            var $a = a[i];

            if ($a.className == 'tooltip') {

                var title = $a.getAttribute('title');
                $a.removeAttribute('title');
                $tooltip.appendChild(document.createTextNode(title));




                $a.addEventListener('mouseover', function(e) {
                    $tooltip.style.top = e.clientY + 10 + 'px';
                    $tooltip.style.left = e.clientX + 'px';
                    $tooltip.style.display = 'block';
                }, false);

                $a.addEventListener('mouseout', function() {

                    $tooltip.style.display = 'none';

                }, false);

            }

        }

    };

    this.init = function() {
        create();
        handle();
    }

    return this.init();
}

Tooltip();​

Ho volutamente evitato di aggiungere ulteriori righe di codice per la gestione cross-browser degli eventi, ma credo che abbiate ormai capito come allo stato attuale delle cose fare a meno delle librerie per lo sviluppo JavaScript sia alquanto problematico solo se pensiamo alla produttività.

Torna su