Ahora que hemos analizado el uso de complementos de jQuery, también vale la pena comprender cómo construirlos. 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í solo. 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 de la creación de complementos de jQuery, debe devolver el mismo conjunto de elementos fuera del complemento.
$.fn.myMethod = function() ( // Do some stuff return this; ));De esa forma funcionará con el encadenamiento. Si no lo hace, y alguien intentó algo como:
$ (“Li”). MyMethod (). Show ();
Eso fallaría, porque .show()no se llamaría 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 necesite.
Otra cosa buena para hacer es envolver un complemento en una Expresión de función invocada inmediatamente y pasarle jQuery como parámetro. De esa manera, puede usar $ dentro del código de su complemento de manera más segura. Esto se debe a que en algunas situaciones la abreviatura $ para jQuery no está disponible (por ejemplo, un usuario ha usado 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 construyendo 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.