(function() {

• post precedente : eventi
• indice tutorial

Cerchiamo prima di proseguire di fare chiarezza sull’ambito delle variabili, e sulla visibilità delle variabili esterne alle closure degli eventi.

Assegno fuori dal contesto degli eventi una variabile

var _context = _page;

La userò solamente in questo esempio. Nei successivi post non ci sarà traccia di questo codice.

All’interno degli eventi di tutti i tasti
subito dopo questo:

var _id = parseInt(jQuery(this).text()) - 1;

inserisco questo piccolo snippet di codice:

alert("Prima del click : " + _context);
_context = (_id + 1);
alert("Dopo il click : " + _context);

Le variabili dichiarate fuori dall’evento sono visibili e possono essere modificate all’interno degli eventi.

DEMO
SORGENTE

Ora pulendo il nostro codice incapperemo in un particolare bug da evitare quando lavoriamo all’interno delle closure.

Abbiamo la variabile _page. Usiamo direttamente quella.
Cancellando ogni riferimento a _context. Lo snippet diventa

var _page = 1;
//[...]
jQuery(".jp-handler")
.click(function(){
//[...]
    var _id = parseInt(jQuery(this).text()) - 1;
    alert("Prima del click : " + _page);
    _page = (_id + 1);
    alert("Dopo il click : " + _page);

    jQuery(".jp-toolbar")
    .eq(0)
    .find(".jp-handler")
    .eq(_id)
    .addClass("jp-active");

    jQuery(".jp-toolbar")
    .eq(1)
    .find(".jp-handler")
    .eq(_id)
    .addClass("jp-active");

    _jpages.eq(_id).show();

    var _page = _id + 1;
    if(_page != 1)
        jQuery(".prev").show();
    else
        jQuery(".prev").hide();

    if(_page != _pages)
        jQuery(".next").show();
    else
        jQuery(".next").hide();

    return false;
});

BUG
SORGENTE

Eseguendo il codice al click su uno dei tasti vedrete che _page risponde “undefined” negando in pratica quanto visto precendentemente con _context.

Questo perchè subito dopo dichiaro nell’ambito della closure var _page.

Se io voglio leggere/scrivere una variabile fuori ambito posso farlo fintanto che nello stesso ambito non venga definita una variabile con lo stesso nome.

Come vedrete a parte il primo alert non ci sono effetti perversi. La paginazione funziona.
Per evitare comunque effetti perversi difficili da scovare correggiamo il codice.

Morale (o buona pratica) : all’interno delle closure non dichiarare variabili con lo stesso nome del ambito esterno.
Questo “mascheramento” infatti può produrre effetti perversi.

A questo punto, visto il funzionamento delle variabili fuori dalle closure, e visto il bug correggiamo il codice e cancelliamo l’inutile variabile _context del primo esempio, questa volta in maniera corretta eliminando il bug.

CORREZIONE
SORGENTE

All’interno delle closure tolgo

var _page = _id + 1;

che non ha senso. Usiamo direttamente la variabile fuori closure che tanto deve valere l’indice _id + 1.

Tolta questa dichiarazione il nostro script funziona senza effetti perversi.

Abbiamo due contesti.

Il contesto del “main” che comunque non ha ambito globale essendo a sua volta all’interno della closure legata all’evento ready del documento.

E il contesto degli eventi sui tasti.

Il contesto dei tasti usa e scrive la variabile di ambito superiore del programma stesso (quello che ho chiamato il rozzo “main”).

Ora non ci rimane che creare un vero e proprio plugin jQuery.

[... continua]