… continua da

La separazione del codice javascript dal documento html prevede che le nostre funzionalità, almeno quelle che devono interagire con il documento, aspettino un evento.

L’evento window.onload.

window.onload

Il window.onload è il primissimo passo per una vera programmazione javascript non intrusiva.

window.onload è un handler.
Handler vuol dire maniglia. Almeno quando si parla di programmazione guidata da eventi (Event Driven).

Ogni volta che un evento si verifica viene invocato il codice collegato (bind) all’handler.

L’handler in javascript (data la natura estremamente dinamica del linguaggio) può essere

• un alias ad una funzione

window.onload = funzione;

• una funzione anonima

window.onload = function(){
    //codice
};

• una funzione che invoca altre funzioni (banale!)

window.onload = function(){
    funzione1();
    funzione2();
};

Parlo di funzioni ora per semplicità.
Presto parlerò di classi e oggetti…

Tutti e tre gli utilizzi sono cattive pratiche.
Usate, usatissime nella programmazione javascript ma sono cattive pratiche.
E voi direte perchè mai?
E il discorso così come vale per l’evento window.onload vale per qualsiasi handler ad evento (anche l’onclick di un link).

Il window.onload viene usato come un “autoexec.bat” (per chi si ricorda il dos) o come il main di un programma procedurale.

Tutto questo non è corretto.
Non è corretto per un motivo semplice.
window.onload = è un assegnamento.

Se qualcuno avesse usato l’handler precedentemente io glielo sovrascrivo brutalmente.

L’handler all’evento window.onload va usato tramite una funzione che riesca ad accodare gli eventi man mano che vengono registrati.

jQuery

jQuery mi offre il metodo bind:

jQuery(window).bind("load", function(){
  //il tuo codice
});

Il metodo bind è esattamente come scrivere

window.onload = function(){
  //il tuo codice
};

Esattamente non proprio, perchè jQuery collega e non cancella mai.

Quindi se io scrivo:

window.onload = function(){
   alert("hello world 1");
};

e nello stesso o in un altro file js scrivo

window.onload = function(){
   alert("hello world 2");
};

otterrò solo il secondo alert.

Se io uso il metodo jQuery otterrò sia il primo sia il secondo alert.
Niente di speciale.
Semplicemente jQuery concatena le funzioni vecchie con le nuove non cancellando mai nulla dagli handler agli eventi.
Stesso discorso per tutti gli eventi “wrappati” da jQuery:

• bind(”load”)
• bind(”resize”)
• etc.

jQuery offre anche un secondo metodo per collegare il nostro codice all’evento window.onload, il metodo “ready”.

jQuery(document).ready(function(){
   //codice qui
});

Il metodo ready è un ottimizzazione dell’evento onload e quindi del metodo bind(”load”). Non aspetta che le immagini siano state scaricate.
Se la nostra funzionalità non ha bisogno di sapere ad esempio la larghezza e l’altezza di un immagine posso usare questo metodo anzichè il più “lento” bind(”load”).

[... continua]