#27: Creación de un complemento jQuery simple | Programar Plus

← Vídeo anterior Vídeo siguiente →

Ahora que hemos analizado el uso de complementos de jQuery, vale la pena entender cómo crearlos también. Ya mencionamos brevemente el hecho de que puede extender el objeto jQuery nativo si lo desea. Al igual que:

$.myFunction = function() {
  console.log("I am a function on the jQuery object.");
};

// call it
$.myFunction();

Pero eso no es particularmente útil por sí mismo. Para crear un nuevo método para jQuery al que pueda llamar en un conjunto de elementos, deberá hacerlo así:

$.fn.myMethod = function() {
  // I'm a new method
});

Esto es exactamente lo mismo que usar .prototype en jQuery, y para los curiosos, pueden leer más sobre eso aquí. Hacerlo de esa manera significa que podremos usar ese nuevo método en un conjunto de elementos. Me gusta:

$("li").myMethod();

Puede hacer lo que quiera con ese método, pero para ser un buen ciudadano que construye el complemento jQuery, debe devolver el mismo conjunto de elementos del complemento.

$.fn.myMethod = function() {
  // Do some stuff

  return this;
});

De esa manera funcionará con el encadenamiento. Si no haces eso, y alguien intentó algo como:

$(“li”).miMetodo().show();

Eso fallaría, porque .show() estaría siendo llamado en esencialmente nada. A menudo, los complementos de jQuery están diseñados para recorrer cada elemento para que tenga acceso directo a cada elemento individual en el conjunto para hacer lo que necesita.

Otra cosa que debe hacer un buen ciudadano es envolver un complemento en una expresión de función invocada inmediatamente y pasarle jQuery como parámetro. De esa manera, puede usar el $ dentro de su código de complemento de manera más segura. Esto se debe a que, en algunas situaciones, la forma abreviada $ de jQuery no está disponible (p. ej., un usuario ha utilizado jQuery en “modo de compatibilidad”).

Con estas dos últimas cosas en su lugar, una estructura de complemento se convierte en:

(function($) {
$.fn.myMethod = function() {
  return this.each(function() {
    // do things
  });
};
})(jQuery)

En el screencast, terminamos creando un complemento simple para agregar una flecha al final de cualquier elemento.

Vea el Pen rwasH de Chris Coyier (@chriscoyier) en CodePen

Por supuesto, puede volverse más complejo a medida que aumenta su ambición de hacer más.