Yahoo User Interface Blog (YUIBlog)

YUI 3 Quick Tip: voeg je eigen Awesome

Luke ( @ ls_n ) gepost dit fragment in antwoord op een vraag de andere dag, en ik dacht dat het was de moeite waard te delen hier als een snelle tip.

Zoals met de meeste selector-gebaseerde idiomen, veel van de expressieve kracht YUI 3 komt van wat u kunt een keer heb je een verwijzing naar een of meer HTMLElements - in YUI 3, dat betekent met een centraal knooppunt referentie, die je meestal te krijgen via Y.one( selector string ) of Y.all( selector string ) . Ja, Y.one("#foo"). doSomethingInteresting is een gemeenschappelijk patroon.

Het is gemakkelijk om YUI 3's expressiviteit uit te breiden door het toevoegen van je eigen magische Node (en / of NodeList). Hier is een manier om uw toestel modulair en herbruikbaar.

Maak eerst een nieuwe aangepaste module (we noemen het node++ ):

  YUI.add ('node + +', function (Y) (
	
	 / / Een functie definiëren die wordt uitgevoerd in het kader van een
	 / / Node bijvoorbeeld:
	 functie doSomethingAwesome () (
		 Y.log ("Doe iets geweldig hier.");
	 )

	 / / Gebruik addMethod toe te voegen aan de doAwesomeThing Node prototype:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Uit te breiden deze functionaliteit NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 ), '0 .0.1 ', (Vereist: [' node '])); 

Luke's Gist is hier .

Met die definitie op de pagina, node++ kan worden use d in ieder geval. In uw implementatie-code, zou je dan doen:

  YUI (). Gebruik ('node + +', function (Y) (
	
	 / / Gebruik van een enkele Knooppunt:
         Y.one ('# foo') doAwesomeThing ().;

	 / / Gebruik van een NodeList:
	 Y.all ('p') doAwesomeThing ().;
	
 )); 

Merk op dat alleen de YUI instantie (s) waarop u uw binden node++ module zal om toegang te hebben doAwesomeThing . Een kenmerk van dit ontwerp dat je gelijk als je bouwt complexe applicaties is dat je de uitvoering logica niet hoeft te veranderen als de afhankelijkheid lijst voor node++ evolueert - dat krijgt u automatisch afgehandeld ten use() tijd, en de afhankelijkheid verklaring blijft met de code waarop zij betrekking heeft.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met Del.icio.us | digg it! | reddit!