jQuery, 5 metodi utili ma spesso dimenticati

In questo articolo parleremo di alcuni metodi di jQuery, che durante lo sviluppo vengono spesso dimenticati, ma in realtà ci aiuterebbero a risolvere alcuni problemi. Probabilmente, una volta scoperti questi metodi, non ne potrete fare più a meno.

jQuery.grep

jQuery.grep (array, function(elementOfArray, indexInArray) [, invert]) - come potete intuire dal nome,
il metodo filtra gli elementi di un'array di valori. Inutile dire che esiste un metodo molto simile .filter() che serve a filtrare un insieme di elementi, per di più è parte integrante di jQuery.fn, ma in quanto a prestazioni non c'è paragone. .filter() trova l'insieme di elementi corrispondenti, ma crea e/o elimina gli elementi all'interno dell'array originale. .grep() trova l'insieme di elementi corrispondenti, ma si limita a trovare una corrispondenza, senza modificare l'array originale.

String.prototype.startsWith = function(str){
	return (this.match('^'+str)==str)
}
var jsonStr = {
	'data':[{'name':'aaa'},{'name':'abc'},{'name':'bcd'},{'name':'bfg'},{'name':'cde'},{'name':'crtr'}]
};
var result;
function Filter(filterParam) {
  $('#result').empty();
  result = jQuery.grep(jsonStr.data, function(element, index){
                       return element.name.startsWith(filterParam);
                   });
  for(var i = 0; i < result.length; i++) {
    $('#result').append(result[i].name + ', ');
  }
}
//Lo invocheremo con javascript:Filter('a')

jQuery.map, quando e come usarlo

jQuery fornisce un iteratore per gli oggetti jQuery.fn.each e un iteratore generico per ogni array, od oggetto, jQuery.each, ma ci sono ci sono anche due alternative jQuery.map e jQuery.fn.map, illustrato in precedenza, lavora su oggetti reali jQuery, mentre jQuery.map lavora solo su array.

In tutte le versioni di jQuery prima del 1.7, non si poteva utilizzare jQuery.map su un oggetto semplice. Inoltre, jQuery.map restituisce un array, non un oggetto jQuery, quindi non c'è bisogno di invocare il metodo .get() dopo l'utilizzo.

Se si effettua un Array.push o una concatenazione di stringhe all'interno di un ciclo,
allora è consigliabile utilizzare il metodo jQuery.map, che esiste con l'esplicito scopo di creare un nuovo array di valori basato su un set esistente, in questo modo:

//Prima
var pee = "", poo = $(".poo");
poo.each(function(i,elem) {
  pee += this.id;
  if (i < poo.length) {
    pee += ",";
  }
});
//Dopo
var pee = $(".poo").map(function() {
	return this.id;
}).get().join();

Inoltre, per qualche bizzarra ragione, gli argomenti alla funzione fornita da jQuery.fn.map e jQuery.map non sono compatibili tra loro. La firma della prima funzione è function(index, element), coerente con le altre funzioni di iterazione su prototpye jQuery, mentre il generico jQuery.map ha firma pari a function(element, index).

Quindi, per rispondere a "Quando utilizare .each() o .map?", se si effettua una serie di iterazioni allo scopo di creare un nuovo array, o una stringa, in base ai valori in quel set, è consigliabile utilizzare .map(). Se si effettua un'iterazione solo perché avete bisogno di fare qualcosa per ogni elemento in un insieme, o perché desiderate creare un oggetto, utilizzate .each().

jQuery.proxy

Può risultare utile se avete bisogno di passare il callback
come event handler, callback Ajax, timeout, intervalli, oggetti personalizzati, impostati nel suo contesto. Quando desiderate una funzione che abbia il suo this associato a un oggetto specifico.

Il metodo ha due firme, jQuery.proxy( function, scope ) e jQuery.proxy( scope, name ). Nella prima firma, il primo è la funzione che stiamo chiamando, e lo scope imposta il contesto. Nella seconda forma, il contesto di applicazione viene prima, e l'argomento name è una stringa che presenta il nome della funzione che stiamo invocando. Rendiamo tutto più chiaro, considerate questo esempio:

MioModulo = function() {
  this.$div = $('#miodiv');
  this.myString = "Eccolo! Mi hai trovato!";
  this.$div.click($.proxy(this.handleClick, this));
};
MioModulo.prototype.handleClick = function() {
  console.log(this.myString); // Eccolo! Mi hai trovato!
};
var m = new MioModulo();

Quando viene invocato il click sul nostro div, abbiamo come risultato che m è settato sul nostro oggetto MioModulo. Questo esempio utilizza la prima firma di .proxy, ma potremmo avere lo stesso effetto se utilizzassimo la seconda firma:

MioModulo = function() {
  this.$div = $('#miodiv');
  this.myString = "Eccolo! Mi hai trovato!";
  this.$div.click($.proxy(this, "handleClick"));
};

Non rimane che accedere agli elementi DOM, solo che adesso l'oggetto this è puntato su un oggetto, quindi non utilizzabile. Viene in nostro soccorso il fatto che gli eventi vengono passati in un oggetto event con tutti i dettagli dell'evento occorso. All'interno dell'oggetto event troviamo una proprietà chiamata currentTarget che ha tutto quello di cui abbiamo bisogno.
Ecco un esempio:

MioModulo.prototype.handleClick = function(event) {
  console.log(this.myString); // Eccolo! Mi hai trovato!
  console.log(event.currentTarget); // 

};

.prop()

.prop(propertyName, value) - questo metodo è stato aggiunto nella versione 1.6. Ne parliamo qui, perché molte persone erroneamente utilizzano il metodo .attr() per accedere alle proprietà degli elementi e modificare i loro valori. Dalla versione 1.6 .attr() lavora direttamente con l'attributo dell'elemento, e in alcuni casi, il risultato non è proprio quello previsto . Per esempio, vogliamo conoscere lo stato di una checkbox, con .attr() accediamo al suo valore di default, mentre con .prop() abbiamo rappresentato lo stato attuale dell'input.

Per renderla comprensile, ecco un esmepio esplicativo:

//Esempi con .attr
if ( $("#cb").attr("checked") === true ) {...}
if ( $("#cb").attr("checked") == "checked" ) {...}
//Gli stessi esempi con .prop
$("#cb").prop("checked", false)

Tutto quello che ci serve in una singola invocazione. Solo la proprietà, nient'altro.

.serializeArray()

Un modo molto semplice per serializzare un array o una stringa, in questo caso utilizzate serialize(). Il metodo restituisce un array che, per esempio, è possibile inviare tramite AJAX al server.

var arr = $('#form').serializeArray );
// arr è un array di oggetti {name: "nome del campo", value: "il suo valore"}

Contrariamente a quanto riporta la guida jQuery, che serializeArray() dovrebbe lavorare solo con elementi all'interno di una form, esiste un altro metodo per serializzare una serie di dati non contenuti in una form, vediamo come:

<input type="hidden" id="LicenzaId" name="LicenzaId" value="" class="HTMLIT_ARR" />
<input type="hidden" id="Colore" name="Colore" value="" class="HTMLIT_ARR" />
<input type="hidden" id="MarkerId" name="MarkerId" value="" class="HTMLIT_ARR" />

var obj = $('.HTMLIT_ARR').serializeArray();
jQuery.ajax({
	url: 'url',
	dataType: 'json',
    data: jQuery.param(obj),
    complete: function() {
		var licenseId = $("#LicenzaId").val();
        var color = $("#Colore").val();
		...
	}
});

Ma potremmo anche inviare un singolo input con:

var obj = $('#LicenzaId').serializeArray();