¿Cómo funciona jQuerys $ .each()?

Question

Quizás un título incorrecto, pero este es mi problema: Estoy construyendo un marco para aprender más sobre javascript. Y quiero usar el estilo "jQuery" ".

¿Cómo puedo hacer una función donde el () es opcional?

$("p").fadeOut(); //() is there 
$.each(arr, function(k, v) {...}); //Dropped the(), but HOW? 

Esto es lo que he llegado con, pero no funcionan:

$2DC = function(selector) 
{ 
    return new function() { 
     return { 
      circle : function() 
      { 
       //... 
      } 
     } 
    } 
} 


$2DC("#id1"); //Work 
$2DC("#id2").circle(); //Work 
$2DC.circle(); //DONT WORK 

Answer 1

$ es realmente solo un alias para la función jQuery. Puede llamar a la función con:

jQuery("p"); o $("p");

pero recuerda, en JavaScript puede adjuntar "cosas" directamente a las funciones.

function foo(){ 
} 
foo.blah = "hi"; 
foo.func = function() { alert("hi"); }; 

foo.func(); //alerts "hi" 

Esta es la forma (conceptualmente) se define la función de jQuery each.

jQuery.each = function(someArr, callback) { ... 

Y lo que ahora jQuery.each es una función que se puede llamar así:

jQuery.each([1, 2, 3], function(i, val) { 
}); 

o la más familiar

$.each([1, 2, 3], function(i, val) { 
}); 

---

Así que para su caso en particular, para apoyar :

$2DC.circle(); 

Habría que añadir la función circle directamente a $2DC:

$2DC.circle = function(){ 
    // code 
}; 

Answer 2

El método $.each que consulte es una propiedad en el objeto $ función.

El objeto $ en jQuery es un objeto de función y, como cualquier objeto en JavaScript, puede asignar propiedades al objeto.

Invocando el objeto de función $ actúa como una función de constructor y devuelve una nueva instancia de objeto creada por la función jQuery.fn.init(). El prototipo de jQuery se copia a jQuery.fn.init para que las instancias de objetos recién creados tengan acceso a los métodos y complementos definidos en jQuery.

Answer 3

Las funciones son objetos en JavaScript. Como tal, se pueden usar como variables, como enteros, cadenas, etc.

En su ejemplo, $2DC es una función que devuelve un objeto que contiene una función circle.

$2DC.circle(); no funciona como circle es solo una propiedad del objeto devuelto, no de $2DC sí mismo.

En el caso de $.each, esto funciona como $ contiene una propiedad each. Tu $2DC puede hacer eso también. De esta manera:

$2DC.circle = function(){ 
} 

Ahora, $2DC.circle(); funcionará. Entonces, como ve, las funciones son objetos y, como tales, pueden tener propiedades al igual que otros objetos.

Answer 4

$2DC.circle(); //DONT WORK 

esto no funcionó debido a $ 2DC no tiene ninguna función con el nombre circle. Es solo una función.

Donde $2DC("#id2") devuelve una nueva función que contiene el objeto que tiene la función circle así que $2DC("#id2").circle(); funciona bien para usted.

Si define

$2DC.circle = function(){ 

}; 

Usted puede utilizar $2DC.circle();

Answer 5

Trate de esta manera:

$2DC = (function(selector) 
{ 
    return new function() { 
     return { 
      circle : function() 
      { 
       //... 
      } 
     } 
    } 
})(); 

esta manera los $ 2DC es el objeto devuelto por la función y no la función sí mismo.

Answer 6

Crea tu función base, luego agrega métodos a la función.

var f = function(text){ 
    alert(text); 
} 
f.fn1 = function(text){ 
    alert('fn:'+text); 
} 
f.fn2 = function(text){ 
    alert('fn2:'+text); 
} 

f('hi'); //hi; 
f.fn1('hi'); //fn:hi; 
f.fn2('hi'); //fn2:hi; 

Answer 7

Se puede lograr utilizando algo como esto.

$.fn.each = function (otherparams); 

$.each = function (collection, otherparams) { 
    return $.fn.each.apply(collection, arguments.slice(1)); 
}; 

Adición de cada uno como una propiedad de fn (que es sólo un alias para jQuery.prototype) significa que es disponible como un método de cada colección jQuery. El segundo bit de código significa que se puede pasar en una colección como un argumento en su lugar.

apply (y call) son algunas de las características más útiles de javascript una vez que se acostumbre a ellas.