en jQuery ¿cuál es la diferencia entre $ .myFunction y $ .fn.myFunction?

Question

Estoy profundizando en la escritura de complementos para jQuery y estoy tratando de entender la distinción entre $ .f y $ .fn.f

He visto que los autores de pluggin usan ambos, o algunas veces asignan $ .f = $ .fn.f

¿Alguien me puede explicar esto, razonando, beneficios, etc.?

Answer 1

Mirando el código fuente jQuery será aclarar las cosas. Por cierto, jQuery y $ se refieren al mismo objeto, y así es como se define el objeto jQuery:

var jQuery = function(selector, context) { 
    return new jQuery.fn.init(selector, context); 
} 

jQuery es una función y en Javascript, una función es también un objeto del tipo Function. Por lo tanto, jQuery.f o $.f conecta f al objeto jQuery Function, o llámele la clase jQuery si lo desea.

si nos fijamos en la fuente de jQuery, verá que jQuery.prototype se ha asignado a jQuery.fn

jQuery.fn = jQuery.prototype 

Por lo tanto, siempre que se adjunta un método (o propiedad) a jQuery.fn, como en jQuery.fn.f = .., o $.fn.f = .., o jQuery.prototype.f = .., o $.prototype.f = .., ese método estará disponible para todas las instancias de esta clase jQuery (una vez más, no hay clases en Javascript, pero puede ayudar a comprender).

Cada vez que se invoca la función jQuery(), como en jQuery("#someID"), una nueva instancia de jQuery se crea en esta línea:

return new jQuery.fn.init(selector, context); 

y este caso tiene todos los métodos atamos al prototipo, pero no los métodos que se adjuntaron directamente al objeto Function.

Recibirá una excepción si intenta llamar a una función que no estaba definida en el lugar correcto.

$.doNothing = function() { 
    // oh noez, i do nuttin 
} 

// does exactly as advertised, nothing  
$.doNothing(); 

var jQueryEnhancedObjectOnSteroids = $("body"); 
// Uncaught TypeError: Object #<an Object> has no method 'doNothing' 
jQueryEnhancedObjectOnSteroids.doNothing(); 

---

Ah, y finalmente cortar un hilo largo y corto para responder a su pregunta - haciendo $.f = $.fn.f le permite utilizar la función como un plugin o un método de utilidad (en la jerga jQuery).

Answer 2

La $.f es una función de utilidad mientras que $.fn.f es un plugin/método jQuery.

Una función de utilidad es básicamente una función dentro del espacio de nombres jQuery que es útil para realizar alguna operación; por ejemplo, $.isArray(obj) comprueba si un objeto obj es una matriz. Es útil poner funciones en el espacio de nombres de jQuery si las usará con frecuencia y también para evitar la contaminación del espacio de nombres global.

Los métodos de jQuery, por otro lado, operan en jQuery objects/wrapped sets. Por ejemplo, $(document.body).append('<p>Hello</p>'); agregará un párrafo que contenga Hello al elemento de cuerpo del documento. $.fn es una abreviatura de $.prototype en versiones posteriores de jQuery (no siempre en versiones anteriores de la biblioteca). Lo usarías al escribir tus propios complementos.

Answer 3

El $.fn.f es simplemente un acceso directo a jQuery.prototype

Al utilizar el fn, puede agregar métodos de plugins sin utilizar el método extend:

jQuery.fn.myPlugin = function(opts) { ... }