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

Estoy comenzando a escribir complementos de jQuery. Escribí tres pequeños complementos, pero simplemente he copiado 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 marco :)

¿Qué hace esto? (Sé que extiende jQuery de alguna manera, pero ¿hay algo más interesante 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 aquí y tal vez todos significan lo mismo. Estoy confundido. En algunos casos, esto no parece estar funcionando en un complemento que estaba escribiendo usando 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.

En primer lugar, un bloque de código que se parece (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 leer estos pasos ayudará

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

Puede ver que 1 es la declaración, 2 está devolviendo la función y 3 solo está ejecutando la 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 complementos:

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: nuevamente no es un complemento ya que no extiende el $.fnobjeto. 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, etc.

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 del complemento y lo agrega a la biblioteca de complementos para usted.

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 todo lo que defina dentro de esa función permanece local e inaccesible desde el mundo exterior (a menos que lo exponga específicamente, generalmente a través de un objeto literal devuelto).

Una variación de esta forma básica es lo que 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 jQueryobjeto real , pero se conoce como $dentro del alcance de la función literal.

El tipo 1 no es realmente un complemento. Simplemente está asignando un objeto literal a jQuery.fn. Por lo general, asigna una función, jQuery.fnya que los complementos generalmente son solo funciones.

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

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

Para comprender más sobre esto, eche un vistazo a esta pregunta y respuesta similares . Además, esta página entra en detalles sobre la creación de complementos.

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);

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 llegue a esta línea. Entonces, cuando estás escribiendo estas filas:

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

Esto significa que el intérprete invocará la función inmediatamente y pasará jQuerycomo un parámetro, que se utilizará dentro de la función como $.

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

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 considera esto:

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

Sabiendo que podemos echar otro vistazo a nuestro ejemplo:

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

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

Tipo 3, para que funcione 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 extender solo establecer directamente la propiedad en el prototipo jQuery, está haciendo exactamente lo mismo solo en más operaciones y más desorden.