Que signifie (function($) {})(jQuery); ?

Question

Je commence tout juste à écrire des plugins jQuery. J'ai écrit trois petits plugins mais j'ai simplement copié la ligne dans tous mes plugins sans vraiment savoir ce qu'elle signifie. Quelqu'un peut-il m'en dire un peu plus à ce sujet ? Peut-être qu'une explication me sera utile un jour pour écrire un framework :)

Qu'est-ce que cela fait ? (Je sais que cela étend jQuery d'une manière ou d'une autre, mais y a-t-il autre chose d'intéressant à savoir à ce sujet ?)

(function($) {

})(jQuery);

Quelle est la différence entre les deux façons suivantes d'écrire un plugin :

Type 1 :

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Type 2 :

(function($) {
    $.jPluginName = {

        }
})(jQuery);

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

Je peux me tromper et peut-être que tout cela signifie la même chose. Je suis confus. Dans certains cas, este ne semble pas fonctionner dans un plugin que j'ai écrit en utilisant le Type 1. Jusqu'à présent, le type 3 me semble le plus élégant, mais j'aimerais aussi connaître les autres.

Answer 1

Tout d'abord, un bloc de code qui ressemble à (function(){})() est simplement une fonction qui est exécutée sur place. Décomposons un peu.

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

La ligne 2 est une simple fonction, enveloppée dans des parenthèses pour indiquer au runtime de renvoyer la fonction à l'étendue parent, une fois renvoyée, la fonction est exécutée à l'aide de la ligne 4, peut-être que lire ces étapes vous aidera

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

Vous pouvez voir que 1 est la déclaration, 2 renvoie la fonction et 3 exécute simplement la fonction.

Un exemple de son utilisation.

(function(doc){

   doc.location = '/';

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

Pour ce qui est des autres questions concernant les plugins :

Type 1 : Ce n'est pas vraiment un plugin, c'est un objet passé comme une fonction, comme les plugins ont tendance à être des fonctions.

Type 2 : Il ne s'agit pas non plus d'un plugin puisqu'il n'étend pas l'interface de l'utilisateur. $.fn objet. Il s'agit simplement d'une extension du noyau de jQuery, bien que le résultat soit le même. C'est si vous voulez ajouter des fonctions de traversée comme toArray et ainsi de suite.

Type 3 : C'est la meilleure méthode pour ajouter un plugin, le prototype étendu de jQuery prend un objet contenant le nom et la fonction de votre plugin et l'ajoute à la bibliothèque de plugins pour vous.

Answer 2

Au niveau le plus basique, quelque chose de la forme (function(){...})() est une fonction littérale qui est exécutée immédiatement. Cela signifie que vous avez défini une fonction et que vous l'appelez immédiatement.

Cette forme est utile pour la dissimulation d'informations et l'encapsulation puisque tout ce que vous définissez à l'intérieur de cette fonction reste local à cette fonction et inaccessible au monde extérieur (à moins que vous ne l'exposiez spécifiquement - généralement via un objet littéral retourné).

Une variation de cette forme de base est ce que vous voyez dans les plugins jQuery (ou dans ce modèle de module en général). Ainsi :

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

Ce qui signifie que vous passez dans une référence à l'actuelle jQuery mais il est connu sous le nom de $ dans la portée du littéral de la fonction.

Le type 1 n'est pas vraiment un plugin. Vous assignez simplement un objet littéral à jQuery.fn . En général, vous attribuez une fonction à jQuery.fn car les plugins ne sont généralement que des fonctions.

Le type 2 est similaire au type 1 ; vous ne créez pas vraiment de plugin ici. Vous ajoutez simplement un objet littéral à la classe jQuery.fn .

Le type 3 est un plugin, mais ce n'est pas le meilleur moyen ni le plus facile d'en créer un.

Pour en savoir plus à ce sujet, jetez un coup d'œil à ce document similaire. question y réponse . Aussi, cette page explique en détail comment créer des plugins.

Answer 3

Un peu d'aide :

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

Answer 4

Juste un petit complément d'explication

Cette structure (function() {})(); s'appelle IIFE (Immediately Invoked Function Expression), elle sera exécutée immédiatement, lorsque l'interpréteur atteindra cette ligne. Donc quand vous écrivez ces lignes :

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

cela signifie que l'interpréteur invoquera la fonction immédiatement, et passera jQuery comme paramètre, qui sera utilisé à l'intérieur de la fonction comme $ .

Answer 5

En fait, cet exemple m'a aidé à comprendre ce que font (function($) {})(jQuery); moyen.

Considérez ceci :

// 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

Et maintenant, considérez ceci :

• jQuery est une variable contenant un objet jQuery.
• $ est une variable comme n'importe quelle autre ( a , $b , a$b etc.) et il n'a pas de signification particulière signification spéciale comme en PHP.

Sachant cela, nous pouvons examiner à nouveau notre exemple :

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