Yahoo! User Interface Blog (YUIBlog)

YUI 3 Quick Tip: Aggiunta di Impressionante il proprietario

Luke ( @ ls_n ) ha postato questo frammento di codice in risposta ad una domanda l'altro giorno, e ho pensato che valeva la pena condividere qui come una punta rapida.

Come con la maggior parte selettore basato su modi di dire, un sacco di potenza espressiva YUI tre proviene da ciò che si può fare una volta che hai riferimento ad uno o più HTMLElements - in YUI 3, che significa avere un riferimento Node, che solitamente si riceve via Y.one( selector string ) o Y.all( selector string ) . Così, Y.one("#foo"). doSomethingInteresting è un modello comune.

E 'facile estendere espressività YUI 3, aggiungendo la tua magia proprio al nodo (e / o NodeList). Ecco un modo per rendere la vostra estensione modulare e riutilizzabile.

In primo luogo, creare un nuovo modulo personalizzato (lo chiameremo node++ ):

  YUI.add ('node + +', function (Y) {
	
	 / / Definire una funzione che verrà eseguito nel contesto di una
	 / / Istanza Node:
	 doSomethingAwesome funzione () {
		 Y.log ("fare qualcosa di impressionante qui.");
	 }

	 / / Usa addMethod per aggiungere doAwesomeThing al prototipo Node:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Estendere questa funzionalità a NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {Richiede: [' node ']}); 

Succo di Luca è qui .

Con tale definizione sulla pagina, node++ è possibile use in qualsiasi istanza d. Nel tuo codice di implementazione, si dovrebbe fare:

  YUI (). Uso ('node + +', function (Y) {
	
	 / / Uso da un singolo nodo:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Uso da un NodeList:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Si noti che solo l'istanza YUI (s) a cui associare il node++ modulo avrà accesso a doAwesomeThing . Una caratteristica di questo disegno che ti piace come costruire applicazioni complesse è che la logica di attuazione non sarà necessario cambiare, se l'elenco di dipendenza per node++ si evolve - che avranno gestito automaticamente ad use() tempo, e la dipendenza dichiarazione rimane con il codice a cui si riferisce.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!