javascript - remove - Qué hace(function($){})(jQuery); ¿media?

remove class jquery

Question

Estoy empezando a escribir plugins jQuery. Escribí tres pequeños complementos, pero simplemente copié la línea en todos mis complementos sin saber realmente lo que significa. ¿Alguien puede decirme un poco más sobre esto? Quizás una explicación te sea útil algún día cuando escribas un framework :)

¿Qué hace esto? (Sé que se extiende jQuery de alguna manera, pero hay algo más que saber sobre esto)

(function($) {

})(jQuery);

¿Cuál es la diferencia entre las siguientes dos formas de escribir un complemento:

Tipo 1:

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Tipo 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

Tipo 3:

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin''s name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

Podría estar muy lejos de aquí y tal vez todos significan lo mismo. Estoy confundido. En algunos casos, esto no parece funcionar en un complemento que estaba escribiendo con el Tipo 1. Hasta ahora, el Tipo 3 me parece el más elegante, pero también me gustaría saber sobre los demás.

Answer 1

Solo una pequeña adición a la explicación.

Esta estructura (function() {})(); se llama IIFE (Expresión de función inmediatamente invocada), se ejecutará de inmediato, cuando el intérprete llegue a esta línea. Así que cuando estás escribiendo estas filas:

(function($) {
  // do something
})(jQuery);

significa que el intérprete invocará esta función inmediatamente y pasará jQuery como parámetro, que se usará dentro de la función como $ .

Answer 2

En el nivel más básico, algo de la forma (function(){...})() es una función literal que se ejecuta inmediatamente. Lo que esto significa es que ha definido una función y la está llamando de inmediato.

Este formulario es útil para ocultar información y encapsular, ya que cualquier cosa que defina dentro de esa función permanece local para esa función e inaccesible desde el mundo exterior (a menos que la exponga específicamente, generalmente a través de un objeto literal devuelto).

Una variación de esta forma básica es lo que se ve en los complementos de jQuery (o en este patrón de módulo en general). Por lo tanto:

(function($) {
  ...
})(jQuery);

Lo que significa que está pasando una referencia al objeto jQuery real, pero se conoce como $ dentro del alcance de la función literal.

Tipo 1 no es realmente un complemento. Simplemente estás asignando un objeto literal a jQuery.fn . Normalmente, asigna una función a jQuery.fn ya que los complementos suelen ser solo funciones.

El tipo 2 es similar al tipo 1; Realmente no estás creando un plugin aquí. Simplemente estás agregando un objeto literal a jQuery.fn .

El tipo 3 es un complemento, pero no es la mejor manera ni la más sencilla de crear uno.

Para entender más sobre esto, eche un vistazo a esta question y answer similares. Además, esta página incluye algunos detalles sobre la creación de complementos.

Answer 3

En primer lugar, un bloque de código que se parece a (function(){})() es simplemente una función que se ejecuta en su lugar. Vamos a desglosarlo un poco.

1. (
2.    function(){}
3. )
4. ()

La línea 2 es una función simple, envuelta entre paréntesis para indicar al tiempo de ejecución que devuelva la función al ámbito principal. Una vez que se devuelve, la función se ejecuta utilizando la línea 4, tal vez la lectura de estos pasos ayude

1. function(){ .. }
2. (1)
3. 2()

Puede ver que 1 es la declaración, 2 está devolviendo la función y 3 simplemente está ejecutando la función.

Un ejemplo de cómo se utilizaría.

(function(doc){

   doc.location = ''/'';

})(document);//This is passed into the function above

En cuanto a las otras preguntas sobre los complementos:

Tipo 1: Esto no es realmente un complemento, es un objeto que se pasa como una función, ya que los complementos tienden a ser funciones.

Tipo 2: Esto tampoco es un complemento, ya que no extiende el objeto $.fn . Es solo una extensión del núcleo de jQuery, aunque el resultado es el mismo. Esto es si desea agregar funciones de desplazamiento como toArray y así sucesivamente.

Tipo 3: este es el mejor método para agregar un complemento, el prototipo extendido de jQuery toma un objeto que contiene el nombre y la función de su complemento y lo agrega a la biblioteca de complementos para usted.

Answer 4

En realidad, este ejemplo me ayudó a comprender qué hace (function($) {})(jQuery); ¿media?

Considera esto:

// Clousure declaration (aka anonymous function)
var $f = function (x) { return x*x; };
// And use of it
console.log($f(2)); // Gives: 4

// An inline version (immediately invoked)
console.log((function (x) { return x*x; })(2)); // Gives: 4

Y ahora:

jQuery es una variable que contiene el objeto jQuery.
$ es un nombre de variable como cualquier otro ( a , $b , a$b etc. y no tiene ningún significado especial como en PHP).

var $f = function ($) { return $*$; };
var jQuery = 2;
console.log($f(jQuery)); // Gives: 4

// An inline version
console.log((function ($) { return $*$; })(jQuery)); // Gives: 4

Answer 5

Tipo 3, para poder trabajar tendría que verse así:

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin''s name
        ''pluginname'': function(_options) {
            // Put defaults inline, no need for another variable...
            var options =  $.extend({
                ''defaults'': "go here..."
            }, _options);

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

No estoy seguro de por qué alguien usaría la extensión solo sobre la configuración directa de la propiedad en el prototipo jQuery, está haciendo exactamente lo mismo solo en más operaciones y más desorden.

Answer 6

Un poco de ayuda:

// an anonymous function
  
(function () { console.log(''allo'') });

// a self invoked anonymous function

(function () { console.log(''allo'') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = ''I/'m not jQuery.'';

(function ($) { console.log($) })(jQuery);