web-dev-qa-db-fra.com

jQuery signe dollar ($) comme argument de fonction?

Je comprends les fermetures JavaScript et j'ai vu cela dans JS natif:

(function () {
  // all JS code here
})();

Mais que fait l'ajout de l'épice jQuery?

(function ($) {
  // all JS code here
})(jQuery);
jqueryclosuresdollar-sign
48
ma11hew28

C'est un moyen de mapper jQuery au $ d'une manière telle que tout le code d'une page ne le verra pas.

Peut-être avez-vous un script existant qui utilise jQuery que vous souhaitez réutiliser, mais vous utilisez également un prototype qui utilise également $ dans la même page.

En encapsulant n'importe quel jQuery à l'aide de code dans cette construction, vous redéfinissez $ en jQuery pour la partie contenue sans entrer en conflit avec un autre code de la page.

35
David Mårtensson

Quand tu vois:

(function() {
  // all JS code here
})();

Il est connu comme fonction anonyme auto-invoquante . La fonction s'exécute dès qu'elle est analysée en raison de l'ajout de () à la fin (c'est ainsi que vous exécutez les fonctions js).

Notez que les accolades externes supplémentaires sont juste une convention, vous pouvez également l'écrire comme:

function() {
  // all JS code here
}();

Mais cette convention est largement utilisée tout autour et vous devez vous y tenir.

(function($) {
  // all JS code here
})(jQuery);

Ici, $ est mappé à l'objet jQuery afin que vous puissiez utiliser $ au lieu du mot clé jQuery. Vous pouvez également y mettre un autre personnage:

(function(j) {
  // all JS code here
})(jQuery);

Ici, j est mappé à l'objet jQuery à la place.

Notez également que les arguments spécifiés pour la fonction auto-invoquée restent dans la portée de cette fonction et n'entrent pas en conflit avec la portée/les variables externes.

J'avais écrit un article sur le sujet, veuillez le consulter:

52
Sarfraz
(function() {
   // all JS code here
})();

Est une expression de fonction immédiatement invoquée ( IIFE ), prononcé "iffy". Certaines personnes les appellent également "fonctions auto-exécutables anonymes" ou simplement "fonctions auto-exécutables".

(function(aParameter) {
   alert(aParameter);  // will alert "an argument"
})("an argument");

Voici un IIFE qui prend le paramètre 'aParameter' et passe lui-même l'argument "un argument".

(function($){
   alert($(window).jquery);  // alert the version of jQuery
})(jQuery);

Celui-ci est similaire, mais "jQuery" (l'instance d'objet jQuery) est l'argument de l'IIFE, et dans ce cas, jQuery est passé en tant que paramètre '$'. De cette façon, en tapant simplement "$", le corps de l'IIFE a accès à jQuery et à ses membres. Il s'agit d'une convention jQuery commune, et il est courant pour les personnes écrivant des plugins jQuery de maintenir cette convention de cette manière.

Non seulement le code ci-dessus maintient la convention jQuery, mais il garantit également que ni vous ni personne d'autre ne pouvez accidentellement rompre cette convention. Par exemple, prenez le code suivant:

var $ = function() {
   alert('foo');
}

Ce code transforme "$" en quelque chose qui n'est certainement pas jQuery. Si quelqu'un a fait cela dans un autre code en dehors du code de votre plugin, et que vous n'avez pas explicitement passé jQuery en tant que '$' à votre plugin, alors vous ne pourriez pas utiliser '$' en tant que jQuery comme vous le faites habituellement.

17
Hawkeye Parker

Il y a deux raisons de passer jQuery en fermeture de cette manière.

De loin le plus significatif est qu'il fait fonctionner votre code sur des pages qui utilisent le mode "sans conflit" de jQuery , qui permet l'utilisation de jQuery aux côtés d'autres bibliothèques qui veulent contrôler le $ global. Pour cette raison, le (function($) { ... })(jQuery) la technique est fortement recommandée lors de l'écriture de plugins jQuery.

La raison secondaire est qu'elle fait $ une variable locale dans le cadre de la fonction auto-exécutable et l'accès aux variables locales est (marginalement) plus rapide que l'accès aux variables globales. Personnellement, je ne considère pas cela comme une raison très convaincante - je ne peux pas imaginer un scénario dans lequel la surcharge d'utilisation de jQuery plutôt que des méthodes DOM serait acceptable, mais celle d'accéder à jQuery en tant que variable globale ne le serait pas. :-)

Je dirais que la meilleure raison d'utiliser cette technique lorsque pas l'écriture d'un plugin est pour la cohérence - vous êtes moins susceptible d'oublier de le faire quand il est important si vous avez l'habitude de le faire quand il n'est pas. De plus, vous ne savez jamais quand vous aurez la possibilité de recycler le code!

12
Ben Blank