¿Qué significa (function (function) {})(jQuery);?


Estoy empezando con la escritura de plugins jQuery. Escribí tres pequeños complementos, pero simplemente he estado copiando la línea en todos mis complementos sin saber realmente lo que significa. ¿Alguien puede contarme un poco más sobre esto? Tal vez una explicación sea útil algún día al escribir un framework:)

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

(function($) {

})(jQuery);

¿Cuál es la diferencia entre la siguiendo dos formas de escribir un plugin:

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 estar funcionando en un plugin que estaba escribiendo usando el tipo 1. Hasta ahora, el tipo 3 me parece el más elegante, pero me gustaría saber sobre los demás también.

Author: Lightness Races in Orbit, 2010-05-30

6 answers

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 padre, una vez que se devuelve la función se ejecuta utilizando la línea 4, tal vez leer estos pasos ayude

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

Puede ver que 1 es la declaración, 2 devuelve la función y 3 solo ejecuta el función.

Un ejemplo de cómo se usaría.

(function(doc){

   doc.location = '/';

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

En cuanto a las otras preguntas sobre los plugins:

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

Tipo 2: Esto tampoco es un plugin 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 transversales como toArray y así sucesivamente.

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

 204
Author: RobertPitt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-24 00:48:00

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

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

Una variación de esto la forma básica es lo que ves 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ás pasando una referencia al objeto jQuery real, pero se conoce como $ dentro del alcance del literal de la función.

El tipo 1 no es realmente un plugin. Simplemente estás asignando un objeto literal a jQuery.fn. Normalmente se asigna una función a jQuery.fn ya que los plugins suelen ser solo funciones.

El tipo 2 es similar al Tipo 1; realmente no estás creando un plugin aqui. Simplemente estás agregando un objeto literal a jQuery.fn.

Type 3 es un plugin, pero no es la mejor forma ni la más fácil de crear uno.

Para entender más acerca de esto, echa un vistazo a esta pregunta similar y respuesta. También, esta página entra en algunos detalles sobre la creación de plugins.

 115
Author: Vivin Paliath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:20

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);
 23
Author: leaf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-05 06:21:19

Tipo 3, para trabajar tendría que tener este aspecto:

(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 extend over simplemente estableciendo directamente la propiedad en el prototipo de jQuery, está haciendo lo mismo exactamente solo en más operaciones y más desorden.

 11
Author: tbranyen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-30 02:20:09

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

Esta estructura (function() {})(); se llama IIFE (Expresión de Función Invocada inmediatamente), se ejecutará inmediatamente, cuando el intérprete alcance 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 utilizará dentro de la función como $.

 8
Author: Commercial Suicide,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-26 19:04:01

En realidad, este ejemplo me ayudó a entender lo que significa (function($) {})(jQuery);?

Considere 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 un 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
 6
Author: Krzysztof Przygoda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-25 10:26:33