Fundamentos de jQuery: Extendiendo la librería

En este artículo explicaremos cómo poder extender nuestro código de jQuery agregando funciones adicionales a la librería base.

Como hemos visto hasta ahora, la función contenedora jQuery() nos ofrece una gran cantidad de funciones que vamos a poder utilizar y reutilizar una y otra vez a lo largo de todo nuestro código para obtener distintas clases de resultados, muchas de estas funciones parecen ser la respuesta a todos nuestros cuestionamientos y abarcan gran parte de las soluciones a los problemas más comunes, sin embargo ninguna librería puede abarcar por completo las necesidades de todos los desarrolladores Web.

De hecho, esta característica no puede considerarse algo totalmente malo, puesto que si una librería busca anticiparse ante todas las necesidades de un amplio grupo de desarrolladores, puede dar lugar a la creación de un código grande, torpe, lleno de propiedades y características de poco uso, lo que al final solo lograría estropear el trabajo de desarrollo, llevando al desuso y desecho de la librería.

Los creadores de jQuery reconocieron este concepto, por lo tanto desde la primera elaboración de la librería han venido trabajando duro para identificar cuales son las características de mayor uso por parte de los desarrolladores, evaluando su necesidad decidieron incluir únicamente las principales en su librería base, pero reconociendo a la vez que existen necesidades particulares por lo que jQuery fue diseñado para ser fácilmente extendido con funciones adicionales.

Ventajas de extender jQuery

Extender jQuery representa la adición de funciones específicas para resolver problemas especiales de cada desarrollador, por ello muchos pueden predicar que no tiene sentido llevar acabo esta acción y mejor continuán utilizando funciones independientes con JavaScript nativo. Esto se puede presentar debido a que no reconocen las ventajas que conlleva este proceso, cuando extendemos podemos utilizar las características que jQuery ya ofrece, eso simplifica el código y agiliza el desarrollo, es más sencillo seleccionar elementos y manipularlos, y sobre todo contribuimos con la librería devolviendo un poco a cambio de lo mucho que nos ofrece.

Creando una función

Veamos un ejemplo concreto de como extender la librería, jQuery no viene con una función predefinida para deshabilitar un grupo de elementos de un formulario y muchas veces el tener una función así puede resultar bastante conveniente al utilizar dichos “forms” en nuestro código, por lo que desarrollarla nos ahorrará tiempo en el futuro y unos cuantos dolores de cabeza si nos somos aficionados a la validación de formularios.

Para empezar a desarrollarla debemos encontrar una sintaxis conveniente y sencilla como la siguiente:

jQuery("form#formulario input.campo").disable();

Con esto indicamos que los inputs de clase “campo” contenidos en el form cuyo id es “formulario” deben ser desactivado mediante la función “disable”, la cual aún no se encuentra definida en el core de nuestra librería, por lo que proseguimos con su creación.

Afortunadamente, por su diseño, jQuery hace que sea fácil extender su conjunto de funciones mediante la ampliación del contenedor que se regresa al momento de llamar la función jQuery() o $(). La expresión básica de nuestra función “disable” quedaría de la siguiente manera:

jQuery.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}

Es una gran cantidad de código nuevo para nosotros que vamos empezando a entender lo que es jQuery, por lo que trataré de ir desglosando parte a parte que fue lo que hicimos con esta sentencia que nos ayudo a extender la funcionalidad de la librería.

En primer lugar, “jQuery.fn.disable” significa que estamos ampliando el contenedor jQuery con una función llamada “disable”. Dentro de esa función, se encuentra la colección de elementos DOM envueltos que van a ser operados.

Después, el método “each()” de este contenedor es llamado para recorrer cada elemento de dicha colección envuelta, aclaro que vamos a explorar este y otros métodos similares con mayor detalle en artículos posteriores para conocer con más precisión su funcionamiento. Dentro de la función de iteración each() existe un puntero, que indica el elemento DOM actual.

Para cada elemento, realizamos la comprobación de que posea el atributo “disabled”, y si lo posee, se establece con el valor “true”. Finalmente regresamos los valores obtenidos con el método “each()” para que nuestro nueva función creada con el nombre de “disabled()” pueda ser concatenada con otros métodos, y de esta manera imitar la funcionalidad de muchos de los métodos nativos de jQuery.

Con esta sentencia, desde el punto de vista del código de la página, se ha creado una nueva función en la librería la cual puede ser utilizada las veces que deseemos dentro de nuestro propio desarrollo. Con esta técnica podemos ir creando pequeñas funcionalidades extras que nos permitirán agregar propiedades y experimentar con la flexibilidad de la librería.

Conclusión

Antes de empezar a profundizar en el desarrollo con jQuery, debemos comprender aspectos fundamentales del “core”, la base de nuestra librería, esto nos permitirá entender con muchísima más facilidad lo que se viene y la manera en que jQuery nos facilita las cosas.

En nuestro siguiente artículo hablaremos de como interactuar con otras librerías para obtener resultados más elaborados, una utilidad más para la casi milagrosa función “jQuery()”.