Il nucleo di jQuery

Indice

$ vs $()
⤽
Finora, è stato trattato pienamente con i metodi che vengono chiamati dall’oggetto jQuery. Per Esempio:
$('h1').remove();
Tali metodi fanno parte dello spazio dei nomi (namespace in inglese) $.fn, o prototipo (prototype in inglese) jQuery, e sono considerati come metodi dell’oggetto jQuery.

Tuttavia, ci sono metodi che fanno parte del namespace $ e sono considerati come metodi del nucleo di jQuery.

Queste distinzioni possono essere molto confuse per i nuovi utenti. Per evitare confusione, ricordare questi due punti:

  • I metodi utilizzati nelle selezioni si trovano all’interno dello spazio dei nomi $.fn, e automaticamente ricevono e restituiscono una selezione in sè.
  • Metodi nello spazio dei nomi $ sono generalmente metodi per diverse utilità, non lavorano con le selezioni, non vengono passati argomenti e valore di ritorno può variare.

Ci sono alcuni casi in cui i metodi dell’oggetto e del nucleo hanno gli stessi nomi, come succede con $.each e $.fn.each. In questi casi, è necessario fare attenzione a leggere attentamente la documentazione per sapere quale oggetto usare in modo corretto.

Metodi di utilità
⤽
jQuery fornisce diversi metodi di utilità all’interno dello spazio dei nomi $. Questi metodi sono di grande aiuto per svolgere compiti di routine di programmazione.
Di seguito alcuni esempi, per una documentazione completa visita http://api.jquery.com/category/utilities/.
$.trim
⤽
Rimuove gli spazi bianchi all’inizio e alla fine.
$.trim('    stringa con più spazi vuoti    ');
// restituisce 'stringa con più spazi vuoti'
$.each
⤽
Interagisce negli array e negli oggetti.
$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
    console.log('elemento ' + idx + 'es ' + val);
});

$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
    console.log(k + ' : ' + v);
});
Come accennato in precedenza, c’è un metodo chiamato $.fn.each, che interagisce in una selezione di elementi.

$.inArray
⤽
Restituisce l’indice di un valore in una matrice, o -1 se il valore non si trova nella matrice.
var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {
    console.log('valore trovato!');
}
$.extend
⤽
Cambia le proprietà del primo oggetto utilizzando le proprietà degli oggetti successivi.
var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

var newObject = $.extend(firstObject, secondObject);
console.log(firstObject.foo); // 'baz'
console.log(newObject.foo);   // 'baz'
Se non si desidera modificare le proprietà di nessun oggetto che vengono utilizzati in $.extend, si deve includere un oggetto vuoto come primo argomento.
var firstObject = { foo : 'bar', a : 'b' };
var secondObject = { foo : 'baz' };

var newObject = $.extend({}, firstObject, secondObject);
console.log(firstObject.foo); // 'bar'
console.log(newObject.foo);   // 'baz'
$.proxy
⤽
Restituisce una funzione che si eseguirà sempre nel campo di applicazione (scope) fornito – in altre parole, stabilisce il significato di this (incluso all’interno della funzione) come secondo argomento.
var myFunction = function() { console.log(this); };
var myObject = { foo : 'bar' };

myFunction(); // restituisce l'oggetto window

var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction(); // restituisce l'oggetto myObject
Se si dispone di un oggetto con metodi, è possibile passare l’oggetto e il nome di un metodo per restituire una funzione che si eseguirà sempre nell’ambito di tale oggetto.
var myObject = {
    myFn : function() {
        console.log(this);
    }
};

$('#foo').click(myObject.myFn); 
// registra el elemento DOM #foo
$('#foo').click($.proxy(myObject, 'myFn')); 
// registra myObject
Verificazione dei Tipi
⤽
Come accennato nel capitolo “Concetti di base di JavaScript” jQuery fornisce diversi metodi utili per determinare il tipo di un valore specifico.
4.1: Verificare il tipo di un determinato valore
⤽
var myValue = [1, 2, 3];

// Utilizzare l'operatore typeof di JavaScript 
// per controllare tipi primitivi
typeof myValue == 'string';    // false (falso)
typeof myValue == 'number';    // false (falso)
typeof myValue == 'undefined'; // false (falso)
typeof myValue == 'boolean';   // false (falso)

// Utilizzare l'operatore di uguaglianza rigorosa 
// per controllare i valori nulli
myValue === null; // false  (falso)

// Utilizzare metodi di jQuery per testare 
// i tipi non primitivi
jQuery.isFunction(myValue);    // false (falso)
jQuery.isPlainObject(myValue); // false (falso)
jQuery.isArray(myValue);       // true (vero)
Il Metodo Data
⤽
Spesso vi accorgerete che ci sono informazioni su un elemento che ha bisogno di essere salvate. In JavaScript è possibile farlo con l’aggiunta di proprietà all’elemento DOM, ma questa pratica implica avere a che fare con perdite di memoria (memory leaks in inglese) in alcuni browser. jQuery fornisce un modo semplice per memorizzare informazioni relative a un elemento, e la stessa libreria è responsabile per affrontare i problemi che possono nascere dalla mancanza di memoria.
4.2: Salvare e recuperare informazioni relative a un elemento
⤽
$('#myDiv').data('keyName', { foo : 'bar' });
$('#myDiv').data('keyName'); // { foo : 'bar' }
Attraverso il metodo $.fn.data si possono salvare qualunque tipo di informazioni su un elemento, ed è difficile esagerare l’importanza di questo concetto durante lo sviluppo di un’applicazione complessa.

Per esempio, se si vuole stabilire una relazione tra l’item di una lista e il div che è all’interno di questo item, è possibile farlo ogni volta che si interagisce con l’item, ma una soluzione migliore è farlo una sola volta, salvando un puntatore al div utilizzando il metodo $.fn.data:
4.3: Relazione tra gli elementi utilizzando il metodo $.fn.data

⤽
$('#myList li').each(function() {
    var $li = $(this), $div = $li.find('div.content');
    $li.data('contentDiv', $div);
});

// poi, non si deve tornare a cercare al div;
// è possibile leggerlo dall'informazione 
// associata all'item della lista
var $firstLi = $('#myList li:first');
$firstLi.data('contentDiv').html('nuovo contenuto');
E’ anche possibile passare al metodo u$.fn.data n oggetto contenente una o più coppie di parole chiave-valore.
Rilevamento browser e caratteristiche
⤽
Con jQuery, oltre a rimuovere la maggior parte delle caratteristiche di JavaScript tra ogni browser, ci sono dei momenti in cui è necessario eseguire codice su un browser specifico.

Per tali situazioni, jQuery fornisce l’oggetto $.support e $.browser (quest’ultimo non più utilizzato). Una documentazione completa su questi oggetti si trovano in http://api.jquery.com/jQuery.support/ e http://api.jquery.com/jQuery.browser/

L’obiettivo di $.support è quello di determinare quali caratteristiche supporta il browser.

L’oggetto $.browser rileva il tipo di browser e la sua versione. Questo oggetto è deprecato (anche se nel breve termine non è previsto l’eliminazione dal nucleo della libreria) e si raccomanda utilizzare l’oggetto $.support per questi scopi.

Evitare conflitti con altre librerie JavaScript
⤽
Se si sta utilizzando jQuery in combinazione con altre librerie JavaScript, i quali utilizzano anche la variabile $, può generare un certo numero di errori. Per risolvere il problema, è necessario mettere a jQuery in modo “non-conflitto”. Questo dovrebbe essere fatto immediatamente dopo che jQuery si carichi sulla pagina e prima che il codice venga eseguito.

Quando jQuery è impostato in modo “non-conflitto”, la libreria offre la possibilità di assegnare un nome per sostituire la variabile $.
4.4: Mettere jQuery in modo non-conflitto

⤽
// la libreria prototype utilizza anche $
<script src="prototype.js"></script>
// si carica jquery nella pagina
<script src="jquery.js"></script>
// se inizializza $j in modo "non-conflitto"
<script>var $j = jQuery.noConflict();</script>
E ‘anche possibile continuare a utilizzare $ contenente il codice in una funzione anonima auto-eseguibile. Questo è un modello standard per la creazione di estensioni alla libreria, dal momento che $ rimane racchiusa all’interno del campo di applicazione della stessa funzione anonima.
4.5: Utilizzare $ all'interno di una funzione anonima auto-eseguibile
⤽
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
   // codice va qui, e può utilizzare $
})(jQuery);
</script>