¿Diferencia entre jQuery.extend y jQuery.fn.extend?

83

Estoy tratando de entender la sintaxis del complemento jquery, porque quiero fusionar dos complementos en uno. El intermitente que también debe poder detener el intervalo o ejecutarse varias veces.

De todos modos, esta sintaxis es la misma que

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },

esta

$.fn.blink = function(options)
    {

porque parece que el primero (sin =) es una forma de configurar varios métodos a la vez. ¿Es esto correcto? Además, mientras estoy aquí, ¿cuál sería la razón para agregar los elementos y algo de lógica al objeto jquery?

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",

(esto es del complemento del temporizador)

Ricardo
fuente
Si está aprendiendo el desarrollo del complemento jQuery personalizado, le recomiendo leer este hilo stackoverflow.com/questions/1117086/…
CrandellWS

Respuestas:

89

jQuery.extend se usa para extender cualquier objeto con funciones adicionales, pero jQuery.fn.extend se usa para extender el objeto jQuery.fn, que de hecho agrega varias funciones de complemento de una sola vez (en lugar de asignar cada función por separado).

jQuery.extend :

var obj = { x: function() {} }

jQuery.extend(obj, { y: function() {} });

// now obj is an object with functions x and y

jQuery.fn.extend :

jQuery.fn.extend( {
        x: function() {},
        y: function() {}
});

// creates 2 plugin functions (x and y)
Philippe Leybaert
fuente
1
gracias, eso está claro sobre la asignación de varios objetos, pero todavía no estoy seguro de cuándo se debe usar jquery.extend. ¿Por qué pasaría algo que hace en fn.extend a jquery.extend? También puedo publicar una nueva pregunta para esto, porque hice dos preguntas.
Richard
13
jQuery.extend () es en realidad una función de conveniencia que puede usarse en su propio código javascript para extender objetos de manera genérica. Es parte de las funciones de "utilidad" en jQuery (no se utiliza para la manipulación DOM)
Philippe Leybaert
74
jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

Uso: $.abc(). (No se requiere selector como $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});

Uso: $('.selector').xyz(). (Selector requiere like $('#button').click().)

Principalmente se utiliza para implementar $.fn.each().

Espero que ayude.

Dinesh
fuente
20

¿Diferencia entre jQuery.extend y jQuery.fn.extend?

En realidad, no hay ninguno aparte de su referencia base. En la fuente de jQuery , puede leer:

jQuery.extend = jQuery.fn.extend = function() { … };

¿Entonces, cómo funciona? La documentación dice:

Fusiona el contenido de dos o más objetos en el primer objeto.

Es solo un bucle for-in que copia propiedades, mejorado con una bandera para recursar objetos anidados. Y otra característica:

Si solo se proporciona un argumento $.extend(), esto significa que se omitió el argumento de destino

 // then the following will happen:
 target = this;

Entonces, si la función se invoca en jQuerysí misma (sin un objetivo explícito), extenderá el espacio de nombres jQuery. Y si se llama a la función jQuery.fn(sin un objetivo explícito), extenderá el objeto prototipo jQuery donde se encuentran todos los métodos (complementos).

Bergi
fuente
¡Mi voto a favor! a esto . Estaba mirando el código fuente para ver cómo se extiende jQuery
dekdev
15

Esta publicación de blog tiene una buena descripción:

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

Citas:

Como regla general, debes extender el objeto jQuery para funciones y el objeto jQuery.fn para métodos. No se accede a una función, a diferencia de un método, directamente desde el DOM.

Gavenkoa
fuente
1
¿Qué significa acceder a un método 'directamente desde el DOM' ?
Dan Nissenbaum
1
directly from the DOMse refiere a un concepto muy básico de JavaScript de llamada de función frente a propiedad de objeto / llamada de prototipo (en el contenedor de jQuery alrededor de objetos DOM nativos). Vea el ejemplo e intente encontrar la diferencia y piense por qué el código de los ejemplos no es intercambiable.
gavenkoa
10
$.fn.something= function{};

apunta al jQuery.prototype y permite acceder a los elementos dom a través de "this". Ahora puedes usar $(selector).something();Así que esto funciona como una función de complemento como$(selector).css();

$.something = function{};

agrega una propiedad o función al propio objeto jQuery y no puede usar "this" para el acceso dom Ahora puede usarlo como $.something(); esto funciona como una función de utilidad como$.trim()

pero

$.fn.extend({function1(), function2()}) and  $.extend({function1(), function2()}) 

permite agregar más de 1 función al mismo tiempo. También se pueden usar para fusionar dos literales de objeto en caso de que proporcionemos más de un objeto.

Shishir Arora
fuente