Share
En este artículo vamos a construir nuestro propio complemento jQuery paso a paso desde cero; jQuery hace que esta tarea sea extremadamente fácil para nosotros, nos brinda un método simple para empaquetar nuestros scripts y exponer su funcionalidad, y alentar el uso de técnicas orientadas a objetos escalables y reutilizables..
Convertir el código en el que nos encontramos usando una y otra vez en un complemento jQuery tiene sentido; significa que podemos colocar scripts en sitios y hacer que funcionen de inmediato con poca o ninguna personalización, y significa que podemos compartir nuestro código con otros desarrolladores. Debido a la sintaxis común cuando se usan los complementos de jQuery, la mayoría de los desarrolladores deberían poder recogerlos y utilizarlos de forma intuitiva, dada una documentación sencilla que enumera las propiedades configurables..
Nuestro plugin será un simple cargador de imágenes.; Una vez que una página se ha cargado, que puede ser la página de inicio u otra página de destino común en nuestro sitio, cargamos una serie de imágenes. Estas imágenes se guardan en el caché del navegador del visitante y, por lo tanto, se pueden utilizar en el resto del sitio. Se cargarán mucho más rápido de lo normal, por lo que es una buena forma de cargar previamente las imágenes grandes para que el visitante no tenga que esperar a que se muestren al abrir la página que las contiene..
Crearemos un nuevo directorio para guardar todos los archivos necesarios en.
Ahora que tenemos todo en su lugar, podemos comenzar a crear scripts; en un nuevo archivo en su editor de texto comience con el siguiente código:
(función ($) // el código del complemento irá aquí ...) (jQuery);
Guarde el nuevo archivo en la carpeta de scripts como jquery.jloader.js. Comenzamos creando una función de envoltura anónima que se ejecuta automáticamente. La función acepta un solo argumento que es el símbolo del dólar. A la función le sigue un segundo conjunto de paréntesis; Los utilizamos para pasar la biblioteca jQuery a nuestro complemento. Esto significa que podemos usar cualquier funcionalidad jQuery estándar utilizando el signo $ como alias. Este segundo conjunto de paréntesis también es lo que hace que nuestra función sea autoejecutable..
Dentro de nuestra función anónima agregue el siguiente código:
$ .jLoader = por defecto: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Con este código creamos un nuevo objeto que se agrega como una propiedad al objeto jQuery. Anidado dentro de este objeto hay un segundo objeto llamado valores por defecto; este segundo objeto se utiliza para almacenar los diferentes ajustes de configuración para nuestro complemento. Estas configuraciones son propiedades de nuestro complemento y forman la API principal con la que se puede usar mediante programación. Una vez que el complemento ha sido codificado, aparecerá en la pestaña DOM de Firebug como una propiedad de los objetos $ o jQuery:
A continuación, debemos agregar nuestro método de construcción a jQuery para que podamos identificar elementos específicos o grupos de elementos y aplicarles nuestro complemento. Directamente después de las propiedades configurables agregue el siguiente código:
Accentsconagua
$ .fn.extend (jLoader: function (config, fileNames) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); (config .simpleFileNames == true)? simpleLoad (config): complexLoad (config, fileNames); devuélvalo;); El método de extensión de jQuery toma un objeto y aplica sus propiedades a otro objeto. Al crear complementos, aplicamos el objeto que representa nuestro complemento al objeto fn, que es un constructo especial de jQuery creado para la creación de complementos..
La propiedad jLoader en el objeto que aplicamos a fn tiene una función anónima como su valor; Dentro de esta función, primero agregamos nuestras propiedades configurables. Hacemos esto usando el método extend de jQuery una vez más. Nuestra función constructora acepta dos argumentos opcionales, un objeto de configuración creado por el desarrollador y una matriz de nombres de archivos.
Esto nos permite usar las propiedades predeterminadas, pero también aceptar un objeto de configuración cuando llamamos al método constructor desde un código externo. Cualquier propiedad suministrada en el objeto de configuración del constructor anulará los valores de cualquier propiedad coincidente en el objeto de configuración por defecto.
Es útil para otros desarrolladores proporcionar tantas propiedades configurables como sea posible para hacer que nuestros complementos sean más robustos y personalizables. El conjunto resultante de propiedades se almacena en la variable de configuración para que podamos pasarlo fácilmente a otras funciones.
Obtenemos el id del elemento seleccionado, que podemos obtener al consultar el atributo id del objeto jQuery actual, que apuntará al elemento (s) a los que se adjunta nuestra función de constructor.
Luego determinamos si estamos utilizando nombres de archivos simples (numéricos) o complejos (alfanuméricos); Podemos encontrarlo en la propiedad simpleFileNames de nuestro objeto de configuración. De forma predeterminada, se establece en verdadero, por lo que verificamos si su valor sigue siendo verdadero y llamamos a la función apropiada mediante la declaración condicional ternaria de JavaScript estándar. A cada función se le pasa el objeto de configuración para que podamos hacer uso de sus propiedades dentro de la función; si no lo hiciéramos, no podríamos acceder a ninguna de las propiedades de configuración desde nuestros métodos.
Finalmente, usamos la declaración de devolución para devolver nuestro objeto de complemento; este es un factor importante en el código del complemento y significa que podemos encadenar métodos jQuery adicionales al final de la llamada a nuestro método constructor para que se comporte exactamente igual que otros métodos internos de jQuery..
Nuestro complemento cuenta con dos métodos adicionales siguiendo el método del constructor; Estos dos métodos son utilizados internamente por el complemento y no necesitan ser llamados desde un código externo, piense en ellos como métodos protegidos. El primero de estos es el método simpleLoad y consiste en el siguiente código:
función simpleLoad (config) para (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" imagen "+ x, src: config.imgDir + x + config.imgFormato, título:" Imagen "+ x). appendTo (" # "+ config.imgContainer) .css ( pantalla: "ninguno");; Usando un JavaScript estándar para bucle, podemos crear el número requerido de elementos img de acuerdo con la propiedad imgTotal, que establecemos en 9 en nuestro objeto predeterminado. Puede parecer incómodo tener que decirle al complemento la cantidad de imágenes que queremos cargar, pero desafortunadamente no hay forma de consultar la carpeta por su contenido usando JavaScript. Esta propiedad ayuda a evitar que el complemento requiera soporte del lado del servidor.
Creamos cada imagen utilizando la excelente facilidad de creación de nodos DOM de jQuery y establecemos los atributos básicos que necesita cualquier imagen; Un id, src y un título. Para hacer que cada ID de elemento sea única, podemos usar la variable count de nuestro bucle for. El src de cada nuevo elemento img es el más complejo; para este atributo, primero agregamos la ruta a la imagen usando la propiedad imgDir. Con nombres de archivo simples también podemos usar la variable de conteo para agregar cada imagen especificada. Finalmente, agregamos la extensión de archivo usando la propiedad imgFormat. El atributo del título simplemente coincide con el ID.
Una vez que se ha creado cada imagen y se le han dado los atributos apropiados, luego la agregamos al elemento contenedor especificado en la propiedad imgContainer. Las imágenes precargadas no se deben ver en esta etapa, por lo que podemos usar el método CSS de jQuery para establecer su propiedad de visualización en ninguna. La función final, complexLoad, utiliza el objeto de configuración opcional y la matriz fileNames; El código debe aparecer como sigue:
función complexLoad (config, fileNames) para (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: fileNames [x], src: config.imgDir + fileNames [x] + config.imgFormat, title:" The "+ fileNames [x] +" nebula "). appendTo (" # " + config.imgContainer) .css (display: "none");; Todavía utilizamos un bucle for en este método, aunque el número de veces que se ejecutará se basa en el número de elementos de la matriz fileNames en lugar de la propiedad imgTotal. Todavía creamos una serie de elementos img y establecemos los mismos atributos en estos elementos que hicimos antes, aunque esta vez usamos diferentes valores para los atributos..
La identificación de cada nueva imagen simplemente se establece en el contenido del elemento de la matriz actual. La imagen se carga al concatenar la ruta, el nombre del archivo y la extensión del archivo una vez más, aunque esta vez usamos el contenido del elemento de la matriz actual como el nombre del archivo en lugar de un entero. El atributo de título tiene un valor ligeramente más detallado que antes y nuevamente hace uso del elemento de matriz en lugar de una propiedad de configuración.
Ahora hemos agregado todo el código que compone nuestro complemento. Es hora de ponerlo a prueba. Cree un archivo HTML en blanco como el siguiente:
Página de demostración de jLoader
Guarde esta página en la carpeta principal del proyecto (jLoader) como algo así como jLoader.demo.html. En el cuerpo de la página tenemos nuestros dos elementos contenedores que rellenaremos con las imágenes precargadas. Nos vinculamos a jQuery y al archivo de origen de nuestro widget y luego, a continuación, tenemos dos métodos de construcción para nuestro complemento..
El primero es el simpleImageContainer que utiliza el método de recuperación estándar de DOM de jQuery y llama a nuestro complemento sin ninguna configuración adicional. Esto invoca la implementación predeterminada y debe llenar el contenedor con las imágenes con nombre numérico. No verás esto en la página porque los configuramos para que muestren: ninguno, pero deberías poder verlos en Firebug:
El segundo método de construcción utiliza tanto un objeto de configuración como la matriz fileNames. Establecemos dos propiedades aquí; primero establecemos la propiedad simpleFileNames en false para que se use nuestro segundo método protegido en nuestro complemento, en segundo lugar, establecemos la propiedad imgContainer en el id del elemento al que vamos a agregar las imágenes. Luego, proporcionamos una matriz de todos los nombres de archivos de imágenes que queremos cargar en formato de cadena. De nuevo, no verás las imágenes; ese es todo el punto, pero Firebug probará su existencia:
En este tutorial, hemos analizado los pasos individuales que se necesitan para crear un complemento simple de jQuery; vimos cómo agregar propiedades a la API de nuestro complemento y cómo agregar métodos que realizan diferentes comportamientos. También vimos los métodos que jQuery nos brinda para hacer que los complementos de creación sean más fáciles y las técnicas que podemos utilizar para hacer que nuestras creaciones sean más sólidas..
Asegúrese de visitar el sitio jQuery para revisar los complementos disponibles. No sirve de nada reinventar la rueda a menos que estés aprendiendo.!
Visita el artículo
"A veces nos damos cuenta de que una tarea es demasiado compleja y la ignoramos. Esa ha sido mi mentalidad al pensar en desarrollar un complemento para jQuery. Siempre he pensado que parte del código que desarrollé tendría más sentido. como un plugin, pero simplemente no tuve tiempo de averiguarlo ".
Visita el artículo
"Así que estabas en tu búsqueda para encontrar la respuesta a la vida, el universo y todo, cuando culpas, encontraste a jQuery. Sí, lo sé, esperabas 42, pero también para nuestra sorpresa, fue jQuery. ¿Qué sigue? ¡Construye tu propio plugin! "
Visita el artículo
