IE11 e JavaScript

Sul fronte dello scripting Internet Explorer 11 introduce non poche novità. Come abbiamo già segnalato nelle precedenti puntate, a partire da questa versione viene a mancare il supporto a VBScript. Lavorando in modalità edge, il document mode predefinito in IE11, non è quindi possibile eseguire script VBScript. Per questioni di compatibilità, tuttavia, il linguaggio continua ad essere supportato negli altri document mode, anche se viene incoraggiata la transizione a JavaScript.

Per quel che riguarda JavaScript, IE11 ha arricchito il supporto a ECMAScript 6 ed implementato i Mutation observer, una specifica W3C in corso di definizione per il monitoraggio delle trasformazioni del Document Object Model (DOM4).

Le novità di ECMAScript 6

La versione di JavaScript presente in IE11 supporta alcune delle nuove caratteristiche delle specifiche ECMAScript 6, lo standard di riferimento delle future implementazioni di JavaScript. Tra le novità segnaliamo l'introduzione del costrutto const per la definizione di costanti:

const PIGRECO = 3.14;

Non è più necessario, pertanto, ricorrere a variabili per memorizzare valori costanti, con il rischio di potenziali modifiche in fase di esecuzione.

Abbiamo inoltre a disposizione il costrutto let per creare ambiti di visibilità ristretti delle variabili (scope). Ad esempio, il seguente codice definisce uno scope all'interno del quale è ridefinita la variabile x senza creare conflitto con l'omonima variabile esterna:

var x = "test";
var y;
let (x = 20) {
	y = x + 1;
}
console.log(y);	//21
console.log(x);	//"test"

IE11 supporta anche nuove strutture dati come Set, Map e WeakMap. Si tratta di strutture dati specializzate che evitano di ricorrere agli array quando la modalità di gestione del loro contenuto ha aspetti specifici.

Ad esempio, un Set è una struttura dati che rappresenta un insieme di elementi e su cui sono definiti metodi per aggiungere e togliere elementi e verificare l'esistenza di un elemento nell'insieme:

var mySet = new Set();
mySet.add("uno");
mySet.add("due"); 
console.log(mySet.has("due"));	//true

Una Map è una mappa associativa di chiavi e valori, dove le chiavi possono essere rappresentati da qualsiasi oggetto JavaScript e non soltanto da stringhe. Una WeakMap è una speciale Map i cui elementi possono essere automaticamente rimossi dal garbage collector se viene a mancare uno degli elementi dell'associazione chiave-valore.

Viene inoltre introdotto in questa versione di Internet Explorer il supporto alle Internationalization API, un'insieme di funzioni basati sull'oggetto Intl che consentono la formattazione di numeri, date e valute in base ad una specifica area geografica. Il seguente esempio mostra come formattare una data secondo la area italiana, inglese e americana:

var date = new Date(2013, 1, 1, 14, 0, 0);
var options = {  weekday: "long", year: "numeric",
                 month: "short", day: "numeric",
				 hour:"numeric", minute: "numeric" };
console.log(new Intl.DateTimeFormat("it-IT", options).format(date));
console.log(new Intl.DateTimeFormat("en-GB", options).format(date));
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
//venerdì 1 feb 2013 14:00
//Friday, 1 Feb 2013 14:00
//Friday, Feb 1, 2013 2:00 PM

Un'interessante applicazione di questa funzionalità è mostrata da uno specifico test drive di IE che mostra alcune informazioni statistiche sulle varie nazioni del mondo con diverse formattazioni.

I Mutation observer

IE11 introduce il supporto per i Mutation observer, un interessante meccanismo per monitorare le modifiche al DOM tramite JavaScript. Questa funzionalità è prevista in DOM4 ed allo stato attuale è in corso di standardizzazione presso il W3C.

Grazie ai Mutation observer possiamo gestire le variazioni agli elementi del DOM in maniera analoga a come gestiamo gli eventi su elementi HTML come <input> o <select>. Possiamo infatti intercettare l'aggiunta o rimozione di elementi sul DOM, la variazione del loro contenuto o del contenuto di un loro attributo ed altri eventi analoghi.

Vediamo con un semplice esempio come possiamo sfruttare questo meccanismo. L'intercettazione degli eventi del DOM avviene in tre fasi:

1. creazione di un Mutation observer;
2. registrazione degli eventi a cui siamo interessati;
3. gestione dell'evento vera e propria.

Nella prima fase, quindi, creiamo un Mutation observer:

var myObserver = new MutationObserver(mutationManager);

Al costruttore del Mutation observer passiamo la funzione di callback, che vedremo più avanti, il cui compito è la gestione dell'evento di modifica al DOM.

Registriamo quindi gli eventi a cui siamo interessati tramite il metodo observe():

var myElement = document.getElementById("myDiv");  
myObserver.observe(myElement, { childList: true,
                                attributes: true,
								attributeFilter: ["class"],
								attributeOldValue: true
							  });

Con queste istruzioni abbiamo indicato l'elemento del DOM che vogliamo monitorare ed abbiamo specificato che siamo interessati all'aggiunta o rimozione di elementi figli, alla variazione dell'attributo class dell'elemento e che vogliamo conoscere il vecchio valore dell'attributo.

Infine definiamo la funzione di callback che gestirà gli eventi di variazione del DOM:

function mutationManager(mutationRecordList) { 
	var i;
	for (var i in mutationRecordList) {
		console.log("Tipo di variazione: " + mutationRecordList[i].type);
		if (mutationRecordList[i].type == "attributes")
			console.log("Vecchio valore dell'attributo: " + mutationRecordList[i].oldValue);
	}
}

La funzione riceve un array di Mutation record, cioè di oggetti che rappresentano le variazioni registrate per l'elemento sotto osservazione. Ciascun record contiene le informazioni relative alle variazioni, come ad esempio il tipo di variazione e l'eventuale vecchio valore dell'attributo.

Grazie al meccanismo dei Mutation observer abbiamo quindi la possibilità di gestire dinamicamente le variazioni che avvengono sul DOM generate da codice o tramite interazione dell'utente.

Conclusioni

Con Internet Explorer 11, quindi, JavaScript diventa l'unico linguaggio di scripting supportato dal browser di Microsoft. La casa di Redmond prosegue sia nell'implementazione delle nuove funzionalità previste dalla prossima versione di ECMAScript sia nello sviluppo delle nuove tecnologie definite dal W3C.

Come vedremo in una prossima puntata di questa guida, anche le prestazioni dell'engine JavaScript hanno avuto un significativo incremento in IE11, segno dell'importanza che Microsoft sta conferendo a questo linguaggio nello sviluppo di applicazioni Web.