Cómo escribir el complemento jquery

El desarrollo de complementos de jQuery incluye dos tipos:

Uno es el desarrollo de complementos a nivel de clase, es decir, agregar un nuevo complemento global función a jQuery es equivalente a agregar una nueva función global a la clase jQuery Agregar métodos a sí misma. Las funciones globales de jQuery son funciones que pertenecen al espacio de nombres de jQuery, y la otra es el desarrollo de complementos a nivel de objeto, que consiste en agregar métodos a los objetos jQuery. El desarrollo de las dos funciones se presenta en detalle a continuación.

1. Desarrollo de complementos a nivel de clase

La comprensión más directa del desarrollo de complementos a nivel de clase es agregar métodos de clase a la clase jQuery, que puede entenderse como agregando métodos estáticos. Un ejemplo típico es la función $. AJAX(), que se define en el espacio de nombres de jQuery. El desarrollo de complementos a nivel de clase se puede ampliar de la siguiente forma:

1.1

Agregar una nueva función global

Para agregar una función global, solo Necesito definirlo de la siguiente manera:

jQuery.foo =

Function(){

alert('Esto es una prueba. Esto es solo una

test . ');

};

1.2

Agregar múltiples funciones globales

Agregar múltiples funciones globales , definido de la siguiente manera:

código de colección de código Java

jQuery.foo = function() {

alert('Esto es una prueba. Esto es

solo una prueba. ');

};

jQuery.bar =

Función (parámetro){

alert('Esta función requiere un parámetro, que es "' param '");

}

Se llama como una función: jquery(); ); o USD. foo(); $.bar("barra");

1.3

Usar jquery .extend(objeto);

jQuery.extend({ p>

foo:

Función(){

alert('Esto es una prueba. Esto es

solo una prueba.') ;

},

Barra: función (parámetro)

{

alert('Esta función requiere un

Parámetro, que es "'param'");

}

});

1.4

Usar espacios de nombres

Aunque en el espacio de nombres jQuery, tenemos prohibido utilizar una gran cantidad de nombres de funciones y nombres de variables de JavaScript. Sin embargo, sigue siendo inevitable que algunos nombres de funciones o variables entren en conflicto con otros complementos de jQuery, por lo que estamos acostumbrados a encapsular algunos métodos en otro espacio de nombres personalizado.

jQuery.myPlugin =

{

foo: function()

{

alert('este Es una prueba. Es sólo una prueba.

');

},

Barra: función (parámetro)

{

alert('Esta función acepta un parámetro, El el parámetro es " ' param

'".');

}

}

Las funciones que utilizan espacios de nombres siguen siendo funciones globales. , los métodos utilizados al llamarlos son:

$ . mi complemento .

$ mi complemento . >Con esta técnica (usando nombres de complementos separados) podemos evitar conflictos de funciones en el espacio de nombres.

2. Desarrollo de complementos a nivel de objeto

El desarrollo de complementos a nivel de objeto requiere las dos formas siguientes:

Tabla 1:

(function ($){

$.fn.extend({

pluginName: function(opt, callback){

//Nuestro El código de implementación del complemento es el siguiente:

Para usted

}

})

})(jQuery);

Formulario 2:

(función($)

{

$.fn.pluginName = función()

{

//Nuestro código de implementación del complemento está aquí

};

})(jQuery);

El. Lo anterior define una función jQuery y el parámetro formal es $. Una vez completada la definición de la función, pase el parámetro jQuery y llámelo inmediatamente para su ejecución. La ventaja de esto es que cuando escribimos complementos de jQuery, también podemos usar el alias $ sin entrar en conflicto con el prototipo.

2.1

Declarar un nombre bajo el espacio de nombres JQuery.

Este es un script de complemento único. Esto es necesario si su secuencia de comandos contiene complementos múltiples o en conflicto (por ejemplo:

$.fn.doSomething() y

$.fn.undoSomething()) Declare múltiples nombres de funciones. Sin embargo, normalmente cuando escribimos un complemento intentamos utilizar un solo nombre para abarcar todo su contenido. Nuestro complemento de ejemplo se llama "highlight"

$.fn.hilight

= function() {

//Nuestra implementación del complemento

El código se te entrega

a ti.

};

Nuestro complemento se llama así:

$('#myDiv '). hi light();

¿Pero qué pasa si necesitamos dividir nuestro código de implementación en múltiples funciones? Hay muchas razones: el diseño lo requiere; es más fácil de implementar y de leer y está más orientado a objetos. Esto es realmente problemático, ya que divide la implementación de la función en múltiples funciones sin agregar espacios de nombres innecesarios. Podemos hacer esto porque implementamos y usamos funciones como los objetos de clase más básicos en JavaScript. Al igual que otros objetos, las funciones se pueden especificar como propiedades. Entonces declaramos "resaltar" como un objeto de propiedad jQuery, y cualquier otra propiedad o función que deba exponerse se puede encontrar en "resaltar".

Atributos declarados en la función. Continúe más tarde.

2.2

Acepta parámetros de opciones para controlar el comportamiento del complemento.

Agreguemos la capacidad de especificar colores de primer plano y de fondo al complemento. Podemos pasar opciones a funciones de complemento como objetos de opciones.

Por ejemplo:

//Definición del complemento

$.fn.hilight =

Función (opción) {

var default valor = {

Primer plano:

Rojo,

Fondo:

Amarillo

};

>//

Amplíe nuestras opciones predeterminadas con las opciones proporcionadas.

Definir variables

opts = $. Extensiones (predeterminado, opciones);

//Nuestro

código de implementación del complemento está aquí.

};

Nuestro complemento se puede llamar así:

$('#myDiv '). hilight({

Primer plano: "Azul"

});

2.3

Exponer la configuración predeterminada del complemento.

Una mejora que debemos hacer al código anterior es exponer la configuración predeterminada del complemento. Esto facilita a los usuarios del complemento anular y modificar el complemento con menos código. A continuación, comenzamos a utilizar objetos de función.

//

Definición del complemento

$.fn.hilight =

Función (opción){

//Ampliar nuestras opciones predeterminadas

ofrecidas.

//Tenga en cuenta que el primer parámetro que se expandirá es

un objeto vacío -

//Esto es para evitar que se sobrescriba nuestro

El objeto "valor predeterminado".

var opciones = $. extension({},

$.fn.hilight.defaults, options);

//Nuestro

código de implementación del complemento está aquí.

};

//plug-in

Valor predeterminado: agregado como propiedad de la función del complemento

$. fn.hilight. defaults = {

Primer plano: "rojo",

Fondo: "amarillo"

};

Ahora usuarios can El script contiene esta línea:

//Esto solo debe llamarse una vez, no necesariamente en el bloque listo.

$ .fn .hi light .foreground

=

Azul';

A continuación podemos usarlo como este complemento. método, como resultado, establece el color de primer plano en azul:

$('#myDiv '). hi light();

Como puede ver, permitimos al usuario escribir una línea de código con el color de primer plano predeterminado del complemento. Los usuarios aún pueden anular selectivamente estos nuevos valores predeterminados si lo desean:

//

Anular el color de fondo predeterminado del complemento.

$ .fn .alta luz valores predeterminados = 'azul'; Llame al complemento

$('.hilightDiv') con la nueva configuración predeterminada. hi light();

// ...

//

Anula la configuración predeterminada pasando parámetros de configuración al método del complemento.

$('#verde'). hilight({

Primer plano:

Verde

});