Ahora que entendemos los conceptos básicos del desarrollo de complementos, podemos profundizar un poco más. Debido a que, en última instancia, un complemento es una función, nos proporciona el alcance que necesitamos para organizar. ¿Recuerdas cuando pusimos nuestra casa en orden cuando estábamos aprendiendo sobre plantillas? Podemos usar algunos de esos mismos conceptos en un complemento.
Pero primero, creo que la arquitectura del complemento jQuery puede beneficiarse de un código repetitivo. Quizás esté familiarizado con HTML5 Boilerplate, que proporciona una serie de valores predeterminados inteligentes. Una plantilla de jQuery Plugin es el mismo tipo de cosas. Ahorra algo de escritura y le permite seguir un camino de desarrollo inteligente.
Me encontré con un proyecto literalmente llamado jQuery Boilerplate que supongo que es bueno. Pero no he profundizado mucho en eso. En cambio, me gusta bastante Starter de Doug Neiner. Usted proporciona un nombre, algunos valores predeterminados y algunas opciones y generará esa estructura estándar para usted.
Decidimos hacer un control deslizante llamado lodgeSlider con un parámetro de velocidad simple y terminamos con este código:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Mucho de eso debería resultar familiar. Hay un IIFE que envuelve el complemento por seguridad. Hay una función creada a partir del objeto jQuery. Hay una función de inicio llamada de inmediato. Hay un método creado a partir del objeto jQuery que devuelve un objeto jQuery. Hay variables creadas con referencias de almacenamiento en caché que probablemente volvamos a utilizar. Sobre todo cosas que hemos visto antes.
Quizás dos cosas nuevas. Uno es el objeto de opciones allí. Puede ver el valor 300 codificado de forma rígida. Pero vea también la línea con $.extend(). Esa es una función de jQuery para combinar dos objetos en uno y uno tiene prioridad sobre el otro. Cuando llamamos al complemento, tal vez así:
$("#slider-1").lodgeslider();No pasamos opciones, y ese objeto vacío se combina con nuestro objeto codificado, y los valores predeterminados están disponibles dentro del complemento. Pero también podríamos llamarlo así:
$("#slider-1").lodgeslider(( speed: 500 ));Pasamos un objeto como parámetro allí. Ese objeto se combina con nuestro objeto codificado, tiene prioridad y el valor que pasamos se convierte en el valor disponible en el complemento. Muy genial.
La otra novedad es esa parte extraña con .data(). Creamos la variable base para hacer referencia a la función en sí, que se crea de nuevo para cada elemento al que se llama el complemento. Por ejemplo, digamos que llamamos al complemento en $(".slider"): podría haber dos elementos en la página con un nombre de clase slider. Se ejecuta cada bucle y se crean dos instancias de la función lodgeSlider. En cada uno, le adjuntamos una referencia al propio elemento. De esa manera, podemos llamar a métodos de complemento internos desde cualquier referencia que tengamos de ese elemento.
Como tal vez:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Simplemente nos da una buena manera de usar métodos de complemento si es necesario.
No llegamos muy lejos en esta aventura de creación de complementos:
Vea el lápiz construyendo un control deslizante desde cero por Chris Coyier (@chriscoyier) en CodePen
Honestamente, el mundo probablemente no necesite otro complemento deslizante. Pero, puede ver lo complejos que podrían volverse. Aquí hay algunas ideas:
- Puede haber funciones de devolución de llamada (o eventos personalizados) para antes y después de los cambios de diapositiva, después de que se configura el control deslizante, después de que se derriba, etc.
- Los anchos pueden estar basados en porcentajes y recalcularse cuando cambia la ventana del navegador.
- La navegación podría construirse dinámicamente en lugar de ser requerida en el marcado.
- Los ID y #hash hrefs también se pueden crear dinámicamente.
- Se pueden agregar eventos táctiles como deslizamientos para hacer que el control deslizante sea más fácil de tocar (los pequeños puntos no son fáciles de tocar).
Cuantas más cosas hagas, mayor será el tamaño del complemento. Es por eso que lograr ese equilibrio entre características, practicidad, rendimiento y tamaño es tan complicado y donde hay tantos complementos diferentes que finalmente hacen lo mismo.