Yahoo! User Interface Blog (YUIBlog)

YUI 3 Quick Tipp: Hinzufügen eigener Ehrfürchtige

Lukas ( @ ls_n ) veröffentlicht diesen Ausschnitt als Antwort auf eine Frage, den anderen Tag, und ich dachte, es war es wert hier als eine schnelle Spitze.

Wie bei den meisten Wähler-basierte Idiome, kommt viel Ausdruckskraft YUI 3 die von dem, was Sie tun können, wenn Sie auf eine oder mehrere HTMLElements haben - in YUI 3, das heißt mit einem Knoten-Referenz, die Sie bekommen in der Regel über Y.one( selector string ) oder Y.all( selector string ) . Also, Y.one("#foo"). doSomethingInteresting ist ein gemeinsames Muster.

Es ist einfach, YUI 3 Ausdruckskraft, indem Sie eigene Magie, um Knoten (und / oder NodeList) zu verlängern. Hier ist eine Möglichkeit, um Ihren Erweiterung modular und wiederverwendbar.

Erstellen Sie zunächst ein neues benutzerdefiniertes Modul (wir nennen es node++ ):

  YUI.add ("Knoten + + ', function (y) {
	
	 / / Eine Funktion definieren, die im Rahmen eines Laufs wird
	 / / Node-Instanz:
	 Funktion doSomethingAwesome () {
		 Y.log ("Tun Sie etwas genial hier.");
	 }

	 / / Verwenden, um addMethod doAwesomeThing dem Knoten Prototyp hinzuzufügen:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Erweitern diese Funktionalität zu Nodelisten:
	 Y.NodeList.importMethod (Y.Node.prototype "doAwesomeThing");
	
 }, '0 .0.1 ', {Erfordert: [' Knoten ']}); 

Lukas-Kern ist hier .

Mit dieser Definition auf der Seite, node++ kann use d in jeder Instanz. In Ihrer Implementierung Code, würden Sie tun:

  YUI (). Nutzung ("Knoten + + ', function (y) {
	
	 / / Aus einem einzigen Knoten zu verwenden:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Aus einer NodeList verwenden:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Beachten Sie, dass nur die YUI-Instanz (en), zu dem Sie Ihre binden node++ -Modul Zugriff haben doAwesomeThing . Ein Merkmal dieser Konstruktion, die Sie gerne, wie Sie komplexe Anwendungen zu bauen, ist, dass Ihre Implementierung Logik nicht ändern müssen, wenn die Liste der Abhängigkeiten für node++ entwickelt sich - das wird für Sie automatisch gehandhabt zu werden bei use() Zeit, und die Abhängigkeit Erklärung bleibt mit dem Code auf die sie sich bezieht.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!