Introduzione al Modello di Oggetto Letterale

Indice

Il modello di Oggetto Letterale offre un modo per organizzare il comportamento del codice. È anche un mezzo per mantenere il codice libero da “contaminazioni del namespace globale“, che è una buona pratica per tutti i progetti e imperativo per quelle più grandi. Questo costringe a pensare fin dall’inizio su ciò che il codice farà e quali pezzi devono essere in un dato posto affinché avvenga. Un Oggetto Letterale è un modo per incapsulare i relativi comportamenti, come illustrato di seguito:

Un oggetto letterale
Copia codice 

var myObjectLiteral = {
    myBehavior1 : function() {
        /* Fare qualcosa */
    },
    myBehavior2 : function() {
        /* Fare qualcosa di diverso */
    }
};

A titolo di esempio e artificialmente semplicistico, si supponga di avere come nell’esempio seguente del codice per mostrare e nascondere il contenuto quando un elemento della lista viene cliccato.

Mostrare e nascondere il contenuto
Copia codice 

$(document).ready(function() {
    $('#myFeature li')
    .append('<div/>')
    .each(function() {
        $(this).find('div')
        .load('foo.php?item=' + $(this).attr('id'));
    })
    .click(function() {
        $(this).find('div').show();
        $(this).siblings().find('div').hide();
    });
});

Abbastanza semplice, eppure anche in questo esempio ci sono diverse cose che si potrebbe desiderare di cambiare in seguito – per esempio, il modo in cui determinare l’URL per caricare il contenuto, la destinazione del contenuto caricato, o il mostrare e nascondere il contenuto. Una rappresentazione di funzioni in un Oggetto Letterale separa nettamente questi aspetti. Potrebbe apparire così:

Rappresentazione in un oggetto letterale
Copia codice 

var myFeature = {
    config : {
        wrapper : '#myFeature',
        container : 'div',
        urlBase : 'foo.php?item='
    },
    init : function(config) {
        $.extend(myFeature.config, config);
        $(myFeature.config.wrapper).find('li').
            each(function() {
                myFeature.getContent($(this));
            }).
            click(function() {
                myFeature.showContent($(this));
            });
    },
    buildUrl : function($li) {
        return myFeature.config.urlBase + $li.attr('id');
    }, 
    getContent : function($li) {
        $li.append(myFeature.config.container);
        var url = myFeature.buildUrl($li);
        $li.find(myFeature.config.container).load(url);
    },
    showContent : function($li) {
        $li.find('div').show();
        myFeature.hideContent($li.siblings());
    },
    hideContent : function($elements) {
        $elements.find('div').hide();
    }
};
$(document).ready(function() { myFeature.init(); });

Perché l’esempio iniziale era incredibilmente semplicistico, l’incarnazione dell’Oggetto Letterale è più lungo. A dire il vero, il metodo dell’Oggetto Letterale generalmente non vi farà risparmiare righe di codice. La cosa fà risparmiare è mal di testa. Utilizzando un Oggetto Letterale, abbiamo diviso il nostro codice nelle sue parti logiche, rendendo più facile d’individuare le cose che si potrebbero desiderare di cambiare in futuro. Abbiamo fatto la nostra funzione estendibile, fornendo la possibilità di sovrascrivere le impostazioni predefinite. E abbiamo un numero limitato di auto-documentazione – è facile vedere a colpo d’occhio ciò che fa la funzione. Appena le nostre esigenze crescono oltre la semplicità di questo esempio i benefici della struttura diventerà più chiara, come si vedrà di seguito.

Per una eccellente introduzione agli oggetti, proprietà e metodi, vedere Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries di Stoyan Stefanov. Si consiglia inoltre di leggere qualcosa su JSON (JavaScript Object Notation).