Archivi categoria: Javascript

jQuery annuncia PEP 0.3.0

jquery

E’ stata annunciata la release 0.3.0 del Pointer Events Polyfill della jQuery Foundation.

Quando scriviamo una applicazione che deve essere utilizzata indifferentemente su dispositivi dotati di touch screen oppure dispositivi dotati del tradizionale mouse, ci troviamo a dover gestire differenti tipi di eventi (Mouse Events e Touch Events) che agiscono con modalità differenti.

Grazie ai Pointer Events si può utilizzare una modalità omogenea per interagire con entrambi i tipi di dispositivo, semplificando la realizzazione del software e fornendo all’utilizzatore una esperienza di utilizzo più uniforme.

Object.observe()

Stiamo per dire addio ai vari framework mvc (Angular, Meteor, Dart ecc)?
Non ancora. Ma il nuovo metodo Object.observe() darà un grande impulso allo sviluppo di applicazione Web Real Time più compatte e veloci.
Uso il futuro perchè al momento questa tecnologia, che è una anticipazione di quello che ci porterà ES7, è supportata solamente da Chrome 36 e Opera 23, quindi oggi solo pochi fortunati si possono divertire!!!

Cosa fa Object.observe() ?

Questo metodo attacca ad un generico oggetto JS una callback che reagisce (viene invocata) a qualsiasi variazione avviene sull’oggetto stesso:

// definiamo un oggetto di nome user con due 
// proprietà: nome e anno_nascita

var user = {
  nome: 'Alessandro',
  anno_nascita: 1990
};

// collega una callback con observe()
// attenzione: changes è un array!!
Object.observe( obj,  function(changes) {
  console.log(changes);
});

user.nome = 'Alex'; 
// sulla console appare un messaggio che indica:
// la proprietà modificata, 
// il nome dell'oggetto, 
// il tipo di modifica, 
// il valore della proprietò prima della modifica
// [{name: 'nome', object: <user>, type: 'update', oldValue: 'Alessandro'}]

.observe reagisce a 6 tipi di variazione:

  • add
  • update
  • delete
  • reconfigure
  • set_prototype
  • prevent_extension

add, update e delete si riferiscono alla aggiunta, modifica ed eliminazione di proprietà dell’oggetto.

Quanto è veloce?

Da test effettuati risulta che rispetto all’utilizzo di AngularJS il metodo observe() è dal 20 a 40 volte più veloce!

Prototype 1.7.2

E’ stata rilasciata la versione 1.7.2 di Prototype.
Questa release è sostanzialmente un bug fix che migliora il funzionamento della 1.7.x della quale ricordiamo le principali nuove funzionalità:

  • utilizzo del selector engine Sizzle (lo stesso utilizzato da jQuery)
  • Element.Layout, un metodo per misurare in pixel le dimensioni degli elementi presenti in una pagina
  • JSON è ora compatibile con ES5

JavaScript : Let vs Var

So che l’argomento è trito e ritrito ma oggi qualcuno ancora fa confusione: che differenza c’è tra dichiarare una variabile con Let e dichiarla con Var?

Come sappiamo in Javascript utilizzare una variabile senza dichiararla equivale a dichiarla globale e, come scrive Douglas Crockford nel suo Javascript the good parts:

forgetting to declare a variable is a very common mistake

Quindi è igienico dichiarare le variabili, se desideriamo che una variabile sia globale la dichiariamo fuori da qualunque funzione, se invece la dichiariamo nel corpo della funzione lo scope sarà locale.

Dichiarare una variabile globale con LET o VAR è esattamente la stessa cosa, dichiarare una variabile locale ad una funzione ha un significato diverso in base al token utilizzato: con VAR la variabile avrà scope di funzione e sarà utilizzabile (nel corpo della funzione) anche nelle righe che precedono la dichiarazione stessa (hoisting), se invece utilizzo LET lo scope sarà limitato al blocco all’interno del quale ho effettuato la dichiarazione e inoltre questa variabile non sarà soggetta all’hoisting.

L’esempio che segue è tratto dal javascript reference manual su developer.mozilla.org:

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // same variable!
    console.log(x);  // 71
  }
  console.log(x);  // 71
}

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // different variable
    console.log(x);  // 71
  }
  console.log(x);  // 31
}