JQuery, 5 metodi utili ma spesso dimenticati.

JQuery, 5 metodi utili ma spesso dimenticati

 

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.

 

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 ejQuery.fn.map, illustrato in precedenza, lavora su oggetti reali jQuery, mentre jQuery.maplavora 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 ejQuery.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 genericojQuery.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:

 

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:

 

.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 utilizzateserialize(). Il metodo restituisce un array che, per esempio, è possibile inviare tramite AJAX al server.

 

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" />

Ma potremmo anche inviare un singolo input con:

 

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

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();

        ...

    }

});

var arr = $('#form').serializeArray );

// arr è un array di oggetti {name: "nome del campo", value: "il suo valore"}

MioModulo.prototype.handleClick = function(event) {

  console.log(this.myString); // Eccolo! Mi hai trovato!

  console.log(event.currentTarget); // <div id="miodiv">

};

</div>

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();

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')

Torna su
Categoria

JQuery - Javascript (1)


Autore

master


Data pubblicazione.

23/08/2012



Recensioni

Articolo non ancora recensito