Inizio Blog User Interface (YUIBlog)

Delegazione eventi con YUI 3

applicazioni web sono sempre più il caricamento di contenuti on demand con AJAX o iniettando frammenti DOM in elementi per aggiornare i contenuti vecchi con nuovi contenuti. Se il nuovo contenuto include alcune funzionalità JavaScript - per esempio, i link che popup trigger sovrapposizioni - abbiamo bisogno di aggiungere gestori di eventi dopo che il contenuto viene inserito e rimuoverle prima recenti contenuto entra, in modo da evitare perdite di memoria in IE . Queste sono situazioni in cui "delegazione evento" gioca un ruolo importante per le applicazioni web.

Un caso d'uso

Si consideri un widget che mostra le ultime tweets da YUI sviluppatori . La lista è rappresentato da un ul elemento, e ogni tweet è rappresentato da un li elemento.

La lista viene aggiornata ogni 2 minuti utilizzando AJAX e l'utente può filtrare l'elenco utilizzando la casella di ricerca. Se un utente fa clic su un'immagine avatar o un link profilo, vogliamo visualizzare più informazioni in una sovrapposizione YUI .

Simple Solution

Con YUI 3, è semplice aggiungere listener di eventi agli elementi direttamente, non appena si rendono disponibili:

  Y.on ("click", handleClick, "a.profile"); 

Come potete vedere, questo è abbastanza semplice. Ma, dovremmo farlo ogni volta che cambia il contenuto, che aggiunge overhead al nostro codice, per non parlare della necessità di rimuovere ogni degli ascoltatori con Y.detach() prima di sostituire vecchi contenuti.

La Tecnica Bubbling

Approfittando di bubbling degli eventi, si può aggiungere un listener per un elemento contenitore, o anche per il document , per la cattura di un evento sulla sua strada lungo la catena bolla. Nella funzione di callback, ci piacerebbe analizzare il target dell'evento per identificare se si tratta di quello che ci aspettiamo (dal nome di classe o id) prima di eseguire il nostro codice di sovrapposizione.

Questa tecnica riduce il sovraccarico DOM di aggiungere listener di eventi per ogni singolo elemento, ma abbiamo ancora bisogno di analizzare ogni singolo clic nel contenitore e filtro per gli obiettivi di corretto all'interno della nostra funzione di callback. Ho scritto un articolo su questa tecnica qualche tempo fa , spiegando in dettaglio come la Bubbling YUI Library Extension opere.

Ma questo non è nuovo e già un concetto ampiamente utilizzato. Allora, cosa c'è di nuovo in YUI 3?

Introduzione Y.delegate()

YUI 3 introduce un nuovo metodo chiamato delegate() che si basa spento il principio di delega evento e adotta una sintassi familiare:

  / / Definizione di semplici ascoltatori su ogni elemento:
 Y.on ("click", handleClick,
   "# Container ul li a.profile");

 / / Metodo Definizione ascoltatore in un contenitore con il delegato ():
 Y.delegate ('click', handleClick,
   'Contenitore #', 'a.profile ul li');

La differenza qui è che il delegate() si avvale di bubbling degli eventi e si applica un ascoltatore su un elemento contenitore ( '#container' ), ma non si ferma qui. Quando viene generato l'evento, ogni obiettivo viene confrontato con il selettore di data ( 'ul li a.profile' ) prima che il callback viene eseguito. Come potete vedere, la definizione di funzione per la funzione di callback handleClick() può essere la stessa per entrambe le tecniche. Dal punto di callback di vista, le differenze sono normalizzati per l'utilità degli eventi. Ecco la descrizione visiva di questo:

  / / Markup
 <div id="container">

   <ul>
     href="avatar1.html" <li> class="profile"> <img src="1.jpg"/> </ a> <a href="username1.html" class="username"> Nome 1 </ a> </ li>
     href="avatar2.html" <li> class="profile"> <img src="2.jpg" /> </ a> <a href="username1.html" class="username"> Nome 1 </ a> </ li> </ li>
     href="avatar3.html" <li> class="profile"> <img src="3.jpg" /> </ a> <a href="username1.html" class="username"> Nome 1 </ a> </ li> </ li>
   </ Ul>

 </ Div> 

Se si clicca sull'immagine avatar secondo ( ul li a img ), l'evento bolle l'albero DOM della a legame con il nome di classe "profile" , e il metodo di callback handleClick() viene chiamato. Indipendentemente dalla tecnica utilizzata, che riceve lo stesso evento facciata della struttura:

  / / Markup
 var handleClick = funzione (e) {
    / / E.target - img>: il target effettivo click
    / / E.currentTarget -> ancoraggio: l'elemento della
    / / Ascoltatore era allegato (il: click),
    / / O l'elemento che corrisponda a
    / / La specifica delega (delegato: click).
 }; 

Incrementi delle prestazioni

Questa nuova funzione ci permette di migliorare le prestazioni drasticamente, in particolare in due aree:

• Diminuendo il tempo di caricamento iniziale, quando più elementi figlio richiedono la gestione di eventi
• Diminuzione tempo di esecuzione di iniezioni dinamica causata da interazione con l'utente

In entrambi i casi, i miglioramenti possono essere ottenuti riducendo il numero di interazioni DOM. Come ottenere i motori JavaScript più veloce, la realtà del collo di bottiglia DOM rimane. delegazione degli eventi in 3 mosse YUI l'overhead di camminare l'albero del DOM dal processo di carico al punto di interazione con l'utente, e diminuisce la complessità, eliminando la necessità di abbinare gli elementi di destinazione all'interno del callback. Invece, delegate() prove il target dell'evento ( e.target ) contro il selettore ( 'ul li a.profile' ) dopo che l'evento viene generato, ma prima il callback viene eseguita, che è particolarmente utile in complesse strutture DOM.

La vera bellezza dietro a questa implementazione, come ho accennato prima, è che la firma di callback è esattamente la stessa. Non abbiamo bisogno di modificare il codice per introdurre delegate() al nostro codice. Abbiamo solo bisogno di modificare la modalità di ascoltatori sono definiti e YUI 3 farà il resto.

Aggiunta di funzionalità

Se vogliamo anche mostrare la sovrapposizione di profilo quando un utente fa clic sul nome utente Twitter, che è un ancoraggio di classe "username" , abbiamo solo bisogno di aggiungere un selettore di più per la tesi finale:

  Y.delegate ('click', function (e) {
    / / E.target - nodo di destinazione>
    / / E.currentTarget - nodo di corrispondenza>
    / / E.container - nodo contenitore> (in questo caso "# container")
    / / E.currentTarget.get ('className') -> "profilo" o "username"
    e.halt (); / / scorciatoia per stopPropagation () e preventDefault ()
 }, '# Contenitore', 'ul a.profile li, ul a.username li'); 

La richiamata delega evento è simile a un callback del listener semplice, ma fornisce anche informazioni aggiuntive attraverso la facciata oggetto Event, come e.container che rappresenta l'elemento in cui è stato catturato l'evento.

Delegato come un nodo Plugin

Allo stesso modo che on() è disponibile non solo dal Y esempio, ma anche a YUI Nodo livello di istanza, delegate() è disponibile anche come plugin di un nodo. Ecco un esempio:

  / / Utilizzando YUI3 Nodo Delegato Plugin:
 Y.one ('# contenitore') delegato ('click', handleClick, 'a.profile ul li'). 

Assicurati di includere nel vostro use() dicitura "node" o "node-event-delegate" , e la funzione sarà caricato da utilizzare nel sandbox. Si noti anche che delegate() può essere utilizzato con altri eventi che sgorgano nel DOM e anche per coloro che sono emulati da YUI Event Utility , come la focus e blur .

Conclusione

Evento con delega delegate() è una caratteristica davvero cool, soprattutto per coloro che vogliono creare applicazioni complesse con un sacco di interazione con l'utente e le funzionalità AJAX. Questo è anche qualcosa che è possibile introdurre un secondo tempo nel applicazione senza alcun contatto o di complessità in più nel codice, per esempio, durante un processo di ottimizzazione delle prestazioni. E, infine, si dovrebbe sapere che la maggior parte dei widget prossimo in YUI 3 sarà certo per sfruttare questa tecnica fin dall'inizio.

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!