jQuery / Personalizando y optimizando selectores

Bienvenidos sean a este post, hoy veremos un tema particular.

En el post anterior vimos como podemos filtrar y marcar o seleccionar las filas para resaltarlas, en este nos enfocaremos en como mejorar la seleccion para ello vamos a crear nuestro propio selector, pero antes de continuar vamos a utilizar el codigo del post anterior, en caso de no tenerlo les dejo un link con los archivos:

Extraigan todos los archivos en un directorio y ya tenemos el codigo anterior disponible, antes de comenzar si repasamos el codigo anterior en el archivo codigo.js y veremos que tenemos una funcion donde seleccionara cada fila de la tabla y en base a si es par o impar la pinta o no, si revisan el post anterrior vimos en un momento como intercalar entre dos filas, nuestra meta en el dia de hoy sera lograr una funcion que nos permita establecer como marcarlo, para ello nuestro primer paso sera crear un nuevo archivo en este directorio que llamaremos plugin.js y le agregaremos el siguiente codigo:

plugin.js

(function($) {
	$.extend($.expr[':'], {
		grupo: function(elemento,index, matches) {
			var num = parseInt(matches[3], 10);
			var indice = elemento.sectionRowIndex - 1;
			if (isNaN(num)) {
				return false;
			}
			return indice % (num * 2) < num;
		}
	});
})(jQuery);

Este es un plug-in para nuestra pagina, de los cuales hablamos en este post de manerra inicial y continuamos con una serie despues, pero basicamente primero establecemos el namespace de jQuery, despues de esa forrma inicial tendremos disponible el alias para el selector, con extend podremos extender a nuestra libreria, como jQuery busca en un objeto interno llamado expr, le pasamos cual debe busar y este al trabajar de manera similar a filter cuando lo encuentre buscara en las propiedades que definamos en el interior la coinicida con la informada, nuestro primer paso sera definir la propiedad que se llamara grupo, en este caso sera una funcion ccon cuatro propiedades:

• elemento, el elemento DOM que trabajaremos
• index, el indice del elemento DOM en el conjunto de resultados
• matches, un array que contiene el resultado de la expresión regular que se utilizó para analizar este selector
• set, el conjunto total de elementos DOM encontrados hasta este punto, rara vez lo usamos

Nuestra primera definicion sera una variable con todas las coincidencias de la expresion regular, en este caso le pasamos un [3] porque de esta forma nos devolvera el valor que le pasemos entre parentesis al momento de llamar a este metodo, despues de esto definiremos el que realmente usaremos como indice donde tomaremos el valor de sectionRowIndex y le restaremos para darle un valor inicial de 0 y respete que el primero es par, si se preguntan porque hicimos esto fue debido a que el valor en index por alguna razon siempre es 0 por lo tanto al no recibir el valor de indice nos marcara todo sin importar el valor que pasemos, por esta razon tuvimos que agregar esta variable, lo siguiente es un condicional donde verifica si num no es un numero (is-Not-a-Number), en caso de ser verdadero devuelve un false y sale del metodo, en caso contrario observen que devuelve la misma formula que vimos en el post anterior donde pasaremos el indice del elemento actual, el operador de modulo con el doble del valor pasado y la comparacion sea con el valor informado, nuestro siguiente paso sera modificar el archivo lista.html y en este iremos al sector de head y entre el llamado a la libreri de jQuery y nuestro codigo agregaremos la siguiente linea:

<script src="codigo.js"></script>

Es basicamente el llamado a nuestro plug-in, nuestro siguiente paso sera ir al archivo codig.js y modificaremos la funcion marcar de la siguiente manera:

function marcar() {
	$('#stock').find('tr.alt').removeClass('alt');
	$('#stock tbody').each(function() {
		$(this).children(':visible').has('td')
			.filter(':grupo(3)').addClass('alt');
	});
}

En este caso reemplazamos la funcion encargada de tomar indice por indice y devolver si correspondia o no aplicarle la clase por el metodo que creamos recientemente y como valor le pasamos el numero de 3, el resto sigue de la misma forma, si recargan la pagina se vera de la siguiente forma

En este caso nos intercalara tres marcados con tres sin marcar, y si modifican el valor de grupo de 3 a 1, se vera de la siguiente forma

Y asi pueden de una forma practica y sencilla ajustarlo a su necesiddad, pero tiene un solo defecto, este vuelve a trabajar como lo vimos al comienzo en el post anterior, donde no recalculara cuando debe aplicarlo sino que lo devolvera con el color que le corresponde sin filtrar pero es un detalle menor para mostrar como pueden personalizarlo mediante un plug-in.

La performance del selector

A la hora de planear nuestro proyecto web siempre debemos tener en mente los siguientes temas:

• El tiempo que llevara crear el sitio
• La facilidad y rapidez de mantenimiento del codigo
• La performance del sitio con la interaccion de usuarios

Si bien los principales son los dos primeros porque son los que mas nos conciernen con respecto al tercero, sobre todo con scripting del lado del cliente podemos caer en las trampas de optimizacion prematura y micro-optimizacion, y estas a su vez nos pueden hacer perder tiempo para mejorar la performance pero que pueden ser solamente milisegundos, si bien la performance puede ser un inconveniente tendriamos una dificultad alta para descubrir los cuellos de botella para este, en posts anteriores hemos llegado a ver como algunos selectores son generalmente mas rapidos que otros y a su vez mover una parte del selector a un metodo transversal nos ayuda a mejorar la velocidad a la hora de encontrar los elementos en la pagina, vamos a examinar un par de guias para producir codigo selectores de jQuery optimizados.

Implementando el selector Sizzle

Siempre que pasamos una expresion de selector a la funcion $(), la implementacion de sizzle se encarga de analizar la expresion y determina como recopilar los elementos representados por ella, en su forma mas basica sizzle aplica el metodo DOM nativo mas eficiente que soporta el navegador para obtener un nodeList, un objeto nativo similar a un array de elementos DOM que jQuery se encarga de convertirlo en un array que lo agregara al objeto jQuery, veamos unu listado de los metodos DOM que se usa internamente:

• getElementById(), selecciona un elemento por el id unico y es soportado por todos los navegadores
• getElementsByTagName(), selecciona todos los elementos en base al nombre de tag pasado y es soportado por todos los navegadores
• getElementsByClassName(), idem al anterior pero con los nombres de las clases que tengan asignados, este es soportado por Firefox 3+, Safari 4+, Chrome 4+ y Opera 10+
• querySelectorAll(), selecciona todos los elementos que coincidan con la expresion de seleccion pasada, este es soportado por Firefox 3.5+, Safari 3+, Chrome 4+ y Opera 10+

Si una parte de la expresion del selector no puede ser manejado por algunos de estos metodos, sizzle vuelve a pasar por cada elemento que ya haya recolectado y vuelve a comparar cada uno contra una parte de la expresion, pero si ninguna parte de la exxpresion del selector puede ser manejada por el metodo DOM hara que sizzle comience con una coleccion de todos los elementos del documento, representado por:

document.getElementsByTagName('*');

Al pasar por todos ellos por turnos, lo cual sera muy costoso a nivel de performance que cualquiera de los metodos DOM citados previamente, pero para nuestra suerte las versiones mas modernas de los navegadores incluyen de forma nativa a querySelectorAll y sizzle lo usa en su lugar cuando ninguno de los anteriores funciono pero con una excepcion, cuando la expresion contenga elementos propios del jQuery como :eq() o :odd que no tienen contraparte en CSS si proccedera a hacer el loop antes citado.

Por ultimo si quieren ver como es la performance entre los distintos metodos o la diferencia con respecto al loop que efectua como ultimo recurso disponen de una pagina para poder ver los distintos analisis de performance, la pagina es:

https://jsperf.app/

Antes de finalizar les dejo los archivos del proyecto y codigos finales trabajados en este post:

En resumen, hoy hemos visto como crear un selector personalizado, tambien hemos visto como el tema de performance puede afectarnos en algunos casos, asi como tambien los metodos que se usan para realizar la tareas de jQuery, y por ultimo una pagina donde pueden analizar la performance de javascript en caso de ser necesario, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50