Je voudrais comprendre la syntaxe du plugin jQuery

Le site jQuery répertorie la syntaxe de base du plugin pour jQuery comme ceci: 

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

J'aimerais juste comprendre ce qui se passe du point de vue de Javascript, car il ne semble pas suivre une syntaxe que J'ai déjà vue. Voici donc ma liste de questions:

  1. Si vous remplacez la fonction($)... avec une variable, disons "the_function" , la syntaxe ressemble à ceci: 

     (the_function)( jQuery );

    Que fait "( jQuery);"? Les parenthèses autour de the_function sont-elles vraiment - elle nécessaire? Pourquoi sont-ils là? Y at-il un autre morceau de code que vous pouvez donner qui est similaire?

  2. Cela commence par la fonction ( $ ). Donc, il crée une fonction, qui pour autant que je sache ne sera jamais exécutée, avec le paramètre de$, qui est déjà défini? Ce qui se passe là-bas?

Merci pour l'aide!

87
demandé sur Danil Speransky 2010-12-19 20:52:13

7 réponses 

function(x){ 
    x...
}

Est juste une fonction sans nom, qui prend un argument, "x", et fait des choses avec X.

Au lieu de 'x', qui est un nom de variable commun, vous pouvez utiliser $, qui est un nom de variable moins commun, mais toujours légal.

function($){ 
    $...
}

Je vais le mettre entre parenthèses pour s'assurer qu'il analyse comme une expression:

(function($){
    $....
})

Pour appeler une fonction, vous mettez () après avec une liste d'arguments. Par exemple, si nous voulions appeler cette fonction en passant 3 pour la valeur de $, nous le ferions ce:

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

Juste pour les coups de pied, appelons cette fonction et transmettons jQuery en tant que variable: 

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

Cela crée une nouvelle fonction qui prend un argument, puis appelle la fonction, en passant jQuery comme valeur.

POURQUOI?

  • parce qu'écrire jQuery chaque fois que vous voulez faire quelque chose avec jQuery est fastidieux.

POURQUOI NE PAS SIMPLEMENT ÉCRIRE $ = jQuery?

  • parce que quelqu'un d'autre aurait pu définir $ pour signifier autre chose. Cela garantit que toutes les autres significations de $ sont ombrées par celui-ci.
127
répondu Joel Spolsky 2010-12-19 18:54:20 
(function( $ ){

})( jQuery );

C'est une fonction anonyme auto-exécutable qui utilise $ en argument afin que vous puissiez l'utiliser ($) au lieu de jQuery à l'intérieur de cette fonction et sans crainte de conflit avec d'autres bibliothèques car dans d'autres bibliothèques aussi $ a une signification particulière. Ce modèle est particulièrement utile lors de l'écriture de plugins jQuery.

Vous pouvez y écrire n'importe quel caractère au lieu de $ Aussi: 

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Ici {[8] } rattrapera automatiquement jQuery spécifié à la fin (jQuery). Ou vous pouvez laisser l'argument complètement, mais vous devrez utiliser jQuery mot-clé tout autour au lieu de $ sans crainte de collision encore. Donc $ est enveloppé dans l'argument pour la main courte afin que vous puissiez écrire $ au lieu de jQuery tout autour de cette fonction.

Si vous regardez même le code source de jQuery, vous verrez que tout est enveloppé entre: 

(function( window, undefined ) {
  // jQuery code
})(window);

C'est comme on peut le voir aussi une fonction anonyme auto-exécutable avec des arguments. Un argument window (et undefined) est créé et est mappé avec l'objet global window en bas (window). C'est un modèle populaire de nos jours et a peu de gain de vitesse car ici window sera examiné à partir de l'argument plutôt que de l'objet global window qui est mappé ci-dessous.

Le $.fn est l'objet de jQuery où vous créez votre nouvelle fonction (qui est aussi un objet) ou le plugin lui-même afin que jQuery enveloppe votre plugin dans son objet $.fn et le fasse disponible.

Fait intéressant, j'avais répondu à une question similaire ici:

Syntaxe de la fonction de fermeture JavaScript / jQuery

Vous pouvez également consulter cet article pour en savoir plus sur les fonctions auto-exécutables que j'avais écrites:

Fonctions auto-exécutables Javascript

35
répondu Sarfraz 2017-05-23 12:09:23

Le plugin de base de la syntaxe vous permet d'utiliser $ pour désigner jQuery dans le corps de votre plugin, indépendamment de l'identité de $ à la fois le plugin est chargé. Cela empêche les conflits de nommage avec d'autres bibliothèques, notamment Prototype.

La syntaxe définit une fonction qui accepte un paramètre appelé $ de sorte que vous pouvez vous référer à elle comme $ dans le corps de la fonction, puis immédiatement appelle cette fonction, mettre jQuery dans l'argument.

Cela aide aussi à ne pas polluer l'espace de noms global (donc déclarer var myvar = 123; dans votre corps de plugin ne définira pas soudainement window.myvar), mais le but principal ostensible est de vous permettre d'utiliser $ où $ a peut-être été redéfini depuis.

3
répondu Steven Xu 2010-12-19 17:57:39

Vous avez affaire à une fonction anonyme auto-invocatrice. C'est comme "meilleure pratique" d'envelopper un plugin jQuery dans une telle fonction pour s'assurer que le signe $ est lié à l'objet jQuery.

Exemple:

(function(foo) {
    alert(foo);
}('BAR'));

Cela alerterait BAR lorsqu'il est placé dans un bloc <script>. Le paramètre BAR est passé à la fonction qui s'appelle elle-même.

Le même principe se produit dans votre code, l'objet jQuery est passé à la fonction, donc $ fera référence à la jQuery objet pour vous.

3
répondu jAndy 2010-12-19 17:58:19

Le jQuery à la fin passe lui-même (jQuery) à la fonction, de sorte que vous pouvez utiliser le symbole $ dans votre plugin. Vous pourriez aussi faire 

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );
2
répondu harpax 2010-12-19 17:58:02

Pour trouver une explication claire de ceci et d'autres astuces JavaScript modernes et pratiques courantes, je recommande de lire Javascript Garden.

Http://bonsaiden.github.com/JavaScript-Garden/

C'est particulièrement utile, car beaucoup de ces modèles sont largement utilisés dans de nombreuses bibliothèques mais pas vraiment expliqués.

2
répondu OlliM 2011-04-13 16:12:42

Les autres réponses ici sont excellentes, mais il y a un point important qui n'a pas été abordé. Vous dites:

Donc, il crée une fonction, qui, autant que je sache, ne sera jamais exécutée, avec le paramètre de$, qui est déjà défini?

Il n'y a aucune garantie que la variable globale $ est disponible. Par défaut, jQuery crée deux variables dans la portée globale: $ et jQuery (où les deux sont des alias pour le même objet). Cependant, jQuery peut également être exécuté en mode noConflict:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Lorsque vous appelez jQuery.noConflict(), la variable globale $ est ramenée à ce qu'elle était avant l'inclusion de la bibliothèque jQuery. Cela permet à jQuery d'être utilisé avec d'autres bibliothèques Javascript qui utilisent également $ comme variable globale.

Si vous avez écrit un plugin qui reposait sur $ étant un alias pour jQuery, votre plugin ne fonctionnerait pas pour les utilisateurs fonctionnant en mode noConflict.

Comme les autres ont déjà expliqué, le code que vous avez posté crée une fonction anonyme qui est appelée immédiatement. La variable globale jQuery est ensuite transmise à cette fonction anonyme, qui est Alias en toute sécurité commevariable locale $ dans la fonction.

2
répondu Kip 2011-04-26 18:49:17