Interfaz de usuario de Yahoo! Blog (YUIBlog)

YUI 3 Sugerencia rápida: Agregar tu propio diseño impresionante

Lucas ( @ ls_n ) publicó este fragmento de código en respuesta a una pregunta el otro día, y pensé que valía la pena compartir aquí como un consejo rápido.

Como con la mayoría de selección basado en expresiones idiomáticas, una gran cantidad de poder expresivo YUI 3 proviene de lo que puede hacer una vez que tenga referencia a uno o más HTMLElements - en YUI 3, que significa tener un nodo de referencia, lo que usted consigue generalmente a través de Y.one( selector string ) o Y.all( selector string ) . Por lo tanto, Y.one("#foo"). doSomethingInteresting es un patrón común.

Es fácil de ampliar la expresividad YUI 3 mediante la adición de su propia magia al nodo (y / o lista de nodos). Aquí está una manera de hacer que su extensión modular y reutilizable.

En primer lugar, crear un nuevo módulo personalizado (lo llamaremos node++ ):

  YUI.add ("nodo + + ', function (Y) {
	
	 / / Define una función que se ejecutará en el contexto de un
	 / / Instancia de Node:
	 doSomethingAwesome function () {
		 Y.log ("¿Es algo impresionante aquí.");
	 }

	 / / Usar addMethod añadir doAwesomeThing al prototipo de nodo:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Extender esta función a NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {Requiere: [' nodo ']}); 

Lucas lo esencial está aquí .

Con esa definición en la página, node++ se puede use en ningún caso d. En el código de la aplicación, puede hacer:

  YUI (). Uso ("nodo + + ', function (Y) {
	
	 / / Uso de un único nodo:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Usar de una lista de nodos:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Tenga en cuenta que sólo la instancia YUI (s) a la que se unen el node++ módulo tendrá acceso a doAwesomeThing . Una característica de este diseño que te gusta como a construir aplicaciones complejas es que la lógica de su aplicación no tendrá que cambiar si la lista de dependencias para node++ evoluciona - que se gestionan de forma automática en el use() el tiempo, y la dependencia la declaración se queda con el código a la que pertenece.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!