Cómo crear un complemento jQuery

comenzando | Strict Mode | Variables | Functions | Options | Planning | Source Code Como desarrollador, sé que escribir un complemento jQuery no siempre es necesario. Muy a menudo hay otro desarrollador que ya creó un complemento que se adaptará a mis necesidades, pero que no me ha impedido crear complementos jQuery. Ocasionalmente, me encuentro con un complemento que hace principalmente lo que quiero y se puede adaptar para satisfacer mis necesidades. Desafortunadamente, encontrar estos complementos puede ser un dolor y, en última instancia, decepcionante. Es durante estas horas oscuras que usted, como desarrolladores, debe dejar de buscar "complementos de jQuery" y aprender a crear los suyos propios; Si no es por las necesidades de un proyecto, entonces para el conocimiento que viene con él. En esta publicación, voy a repasar algunas de las cosas que he descubierto mientras aprendí a crear mi propio complemento que desearía que se hayan almacenado en un solo lugar.

comenzando

Los primeros pasos de aprender cualquier habilidad nueva siempre pueden ser los más complicados. Lamentablemente, el primer paso para crear un complemento jQuery no es diferente: presentar un nombre súper impresionante. Reservar un nombre de clase para su complemento puede ser un dolor si desea ser inteligente (o tal vez sea tan inteligente que sea fácil); De cualquier manera, el primer paso es tener un nombre para su complemento, que luego usaremos para llamar al complemento. Para este ejemplo, voy a ser súper creativo y nombrar a mi complemento "BlogPost" (inteligente, ¿verdad?).

 (función ($) {
    "Use estricto";

    $ .BlogPost = function (el, opciones) {
        var base = this;

        base. $ el = $ (el);
        base.el = El;

        base. $ el.data ('BlogPost', base);

    };
}) (jQuery);

Como puede ver, configuré mi nombre inteligente en la línea 4 en "BlogPost" y, como con cualquier buen complemento de jQuery, las opciones que se pueden anular están habilitadas, permitiendo que el complemento se personalice sin cambiar el código base. Las cosas se ponen interesantes en las líneas 7 y 8 cuando declaro dos estados de la variable "base". Una práctica común para los complementos jQuery es el uso de "$ this" o "$ (this)" o "$ BlogPost" para acceder a la función de un complemento y al DOM, y no hay nada necesariamente malo en ninguna de esas opciones. En este caso, configuré mi acceso DOM a la base. $ EL para evitar cualquier tipo de confusión con las funciones internas. Ahora que tenemos la estructura básica, debemos llamar al complemento en la parte delantera. Todavía no va a pasar nada. Necesitamos agregar más código.

 


     Blog Public

Modo estricto

Ahora, puede estar preguntándose qué es esta cosa de "usar estricto" en la línea 2. Lo más probable es que no lo estés, pero voy a explicarlo rápidamente para que sepas qué es y por qué está allí. El modo estricto es una característica que coloca el navegador en un modo de funcionamiento "estricto" (piense en transición frente a estricto en XHTML). Ahora, el modo estricto ofrece algunas características agradables para ayudar a su complemento:

atrapa errores de codificación comunes y arroja excepciones.
Evita el acceso a acciones "inseguras", como obtener acceso a un objeto global.
Deshabilita características deficientes o confusas. || 88

Most of this probably means nothing to you, and that’s fine. All you need to know is that adding “use strict” is generally a good idea when writing your jQuery plug-in. (If you want to know more, head over to John Resig’s blog post on Modo estricto .)

Variables

Como con cualquier guión jQuery, es importante acceder a variables. Tenemos dos tipos de variables a las que necesitamos acceso. Saber cuándo declararlos y dónde puede salvarnos de varios dolores de cabeza en el camino.

 (función ($) {
    "Use estricto";

    // variables globales
    var max_height = 100;

    $ .BlogPost = function (el, opciones) {
        // variables privadas globales
        var max_width = 200;
        var base = this;

        base. $ el = $ (el);
        base.el = El;

        base. $ el.data ('BlogPost', base);

        base.init = function () {
            var totalButtons = 0;
        };
    };
}) (jQuery);

Hemos agregado algunas cosas adicionales en esta sección. Primero, la adición de nuestra función "init"; Esto será lo primero que se llama cuando se inicie nuestro complemento. Vamos a tener más función más adelante. También tenga en cuenta que en la línea 5, agregamos un público Variable global. Esto significa que esta variable es accesible en cualquier lugar dentro del complemento. En la línea 9, agregamos un Privado Variable global, a la que se puede acceder en cualquier lugar dentro de la raíz del complemento (más tarde). Finalmente, en la línea 18, hemos agregado un local variable; que solo es accesible dentro de la función "init". Al declarar sus variables, considere para qué se utilizarán y qué debe acceder a ellas. Si por alguna razón la interacción de un usuario debe afectar una variable que se utilizará en todo el complemento, digamos al cambiar el tamaño de la ventana, considere agregarla como una variable global pública. Si es una variable a la que necesita acceso, pero el usuario no lo hace, vaya con una declaración global privada. Y finalmente, si una variable solo necesita acceder en una función y olvidarlo, declare como una variable local.

Funciones

En un complemento de jQuery, hay dos tipos de funciones: público y privado. En el ejemplo anterior, agregamos una función init. Esto es lo que se conoce como una función pública. Se puede acceder a una función pública en todo el complemento y por interacción del usuario. En nuestro ejemplo a continuación, agregamos 2 nuevas funciones y configuramos nuestra función init para hacer algo.

 (función ($) {
    "Use estricto";

    // variables globales
    var max_height = 100;

    $ .BlogPost = function (el, opciones) {
        // Funciones privadas
        función debug (e) {
            console.log (e);
        }

        // variables privadas globales
        var max_width = 200;
        var base = this;

        base. $ el = $ (el);
        base.el = El;

        base. $ el.data ('BlogPost', base);

        base.init = function () {
            var totalButtons = 0;

            base. $ el.append ('

En la línea 9, verá que agregué una función llamada "Depurar" utilizando el formato general para un complemento. Esta es una función privada a la que solo se puede acceder por el complemento. En las líneas 26 y 27 estamos aprovechando nuestro complemento DOM (base. $ EL) para agregar dos botones. Ambos botones intentarán hacer lo mismo para mostrar la diferencia entre una función pública y privada. La línea 31 crea nuestra tercera función llamada "Clicker" que simplemente accede a la función privada "Depurar". Finalmente, llamamos a la función init en la línea 35. Esto hará que la función se ejecute tan pronto como la página esté cargada y "init". Cada una de estas funciones pasará la información DOM de un clic cuando se presionen sus respectivos botones. Para acceder y leer esta información, necesitamos agregar algunas cosas. Debido a que el complemento está contenido, tenemos que controlar las acciones por separado.

 (función ($) {
    "Use estricto";

    // variables globales
    var max_height = 100;

    $ .BlogPost = function (el, opciones) {
        // Funciones privadas
        función debug (e) {
            console.log (e);
        }

        // variables privadas globales
        var max_width = 200;
        var base = this;

        base. $ el = $ (el);
        base.el = El;

        base. $ el.data ('BlogPost', base);

        base.init = function () {
            var totalButtons = 0;

            base. $ el.append ('

En la línea 38 presentamos la sección que nos permite controlar la entrada del usuario. Si su complemento necesita administrar un clic, cambiar el tamaño o realizar cualquier otra interacción desde el navegador, aquí es donde agregará ese control. Notará que agregamos dos funciones en el clic para cada uno de nuestros botones. Ambas acciones tienen el mismo objetivo final: acceder a la función "Depurar" e imprima los resultados de clic en la consola. Notará que nuestro primer botón, declarado en la línea 42, envía los datos DOM desde la función de clic en la función de complemento "Clicker". "Clicker" luego recibe esos datos y los envía a "Depurar", que escribe en la consola. Nuestro segundo botón, declarado en la línea 45, toma los mismos datos DOM del clic e intenta enviarlo directamente a la función "Depurar". Pruébelo y vea qué sucede.

Bueno, eso fue inesperado ... ¿o es así? Nuestro primer botón, que intenta acceder a nuestro público La función se apaga sin problemas. Pero el segundo botón, acceder a la función privado nos dice que "depuración" no está definida a pesar de que claramente está en la línea 9. Ahora, algunos de ustedes pueden haber notado una ligera diferencia en las dos funciones de clic. El botón "Public" está accediendo a "Bp.Clicker", y el botón "Privado" claramente está accediendo a "Depurar". Es posible que esté diciendo "No sé cuál es este" BP ", pero seguramente no se refiere a la compañía petrolera, por lo que debe ser por qué el segundo botón no funciona". Bueno, sí y no. "BP" se asigna en la línea 40 para permitirnos acceder al complemento. Es lo mismo que declarar $ este o usar base. Pero debido a que estamos "afuera" del complemento, tenemos que volver a decidirlo. Vamos a darle una oportunidad. Notarás que Bp.debug (E) se comenta en la línea 47, así que elimina ese comentario, comenta la depuración (E) en la línea 46 y dale otra oportunidad.

Huh ... lo mismo, bp.debug no es una función. Esta es la diferencia entre una función privada y una función pública. Se pueden acceder a las funciones privadas en la raíz del complemento, por todos sus métodos, mientras que se puede acceder a una función pública en todo el complemento. Al igual que con las variables, tendrá que planificar sus funciones en consecuencia. Si bien no es difícil cambiar una función privada a una función pública, tendrá que detenerse y pensar por un momento sobre lo que esa función va a hacer y si debería ser público o privado.

Opciones

Una de las cosas que hace que un complemento sea realmente genial es la capacidad de que cualquier otro desarrollador venga y personalice ciertos aspectos de la misma. Al planificar opciones de complemento, es importante asegurarse de que no sean restrictivamente flexibles. ¿Eh? Oxímoron alguien? ¿Qué quiero decir con eso? Bueno, es simple. Supongamos que está haciendo un control deslizante de imágenes, y desea permitir que las personas controlen el retraso entre las imágenes. No desea ser restrictivo y obligar a sus usuarios a opciones como "rápido" o "lento". Sí, podrían tener este tipo de opciones, y podrías hacer tantas opciones para estas como quieras. Pero piense en lo que entra en el back-end de convertir "rápido" o "lento" a un valor numérico que representa estas opciones. Una mejor solución sería simplemente darles al usuario acceso al valor de retraso directo. Comparemos.

 base.init = function () {
    // lento / rápido
    base.timedelay (base.options.delay);

    // Acceso directo
    Base.animation (base.options.delay);
}

base.timedelay = function (demora) {
    velocidad var;

    Switch (demora) {
        Caso "rápido":
            velocidad = 300;
            romper;
        caso "lento":
            velocidad = 800;
            romper;
        por defecto :
            velocidad = 400;
            romper;
    }

    base. Anim (velocidad);
};

base.animate = function (demora) {
    base. $ el.find ('botón'). Animate ({
        Izquierda: += 100
    },demora);
}

Simplemente restringir al usuario a dos opciones agrega otras 16 líneas de código. Solo imagine cuánto código innecesario habría si quisiera ser restrictivamente flexible al tener "súper rápido", "rápido", "moderado", etc. Ahora, en opciones; ¿Cómo los agregamos, cómo los anula el usuario, cómo se accede? Es sorprendentemente simple.

 (función ($) {
    "Use estricto";

    // variables globales
    var max_height = 100;

    $ .BlogPost = function (el, opciones) {
        // Funciones privadas
        función debug (e) {
            console.log (e);
        }

        // variables privadas globales
        var max_width = 200;
        var base = this;

        base. $ el = $ (el);
        base.el = El;

        base. $ el.data ('BlogPost', base);

        base.init = function () {
            var totalButtons = 0;

            base. $ el.append ('

Notará que la línea 40 agrega una nueva sección donde enumeramos las opciones predeterminadas. Para este ejemplo, solo incluyo dos opciones, el estilo de botón predeterminado y una función de devolución de llamada, por lo que puede suceder algo después de hacer clic en el botón. Las líneas 26 y 27 obtienen una ligera modificación para que podamos incluir el estilo. Aquí estamos accediendo a esas opciones con la línea "base.option.optionName". Finalmente, estamos haciendo una adición a la clase Clicker. La línea 34 llama a la opción ButtonPress. Ahora, ninguno de estos cambiará a menos que el usuario los cambie. Como puede ver a continuación, he modificado la llamada jQuery al complemento ligeramente, lo que me permite anular las opciones predeterminadas.

Cuando todo esto se combinó, ¿qué pasa? Ahora, cuando un usuario hace clic en los botones, el complemento hará su llamada para depurar, imprimirá algo en la consola y mostrará una alerta con un mensaje.

Planificación

Si me has mantenido al día hasta ahora, notarás que se destina a crear mucha planificación para crear un complemento jQuery; especialmente tu primero. Muchas veces, los desarrolladores recurren a las malas prácticas o no están completamente seguros de cómo hacer algo, y cuanto más intentan reelaborar el código, más desordenado será. Lo más importante que puede hacer antes de comenzar es tener una idea clara y enfocada de lo que desea que haga su complemento e ir desde allí. Siempre pregúntese si lo que está agregando es realmente necesario o si hay una mejor manera de hacerlo.

El complemento jQuery más aburrido del mundo

Ahora tenemos el complemento Lamest en la historia de jQuery. Si desea descargar los archivos, puede ver el enlace de arriba. Esperemos que esto actúe como una base básica para algunas de las características de complemento más comunes, incluidas las funciones públicas y privadas, las opciones, las devoluciones de llamada y la entrada del usuario. Si eres vago (o eficiente), como yo, y no quieres escribir un marco para cada proyecto, hay un buen recurso en PixelGraphics.us llamado Starter . Esta herramienta le permitirá establecer el nombre de su clase, el espacio de nombres, las funciones y las opciones predeterminadas para construir el documento Skeleton para usted. Es una excelente manera de comenzar a crear un complemento jQuery.