J'aimerais comprendre la syntaxe du plugin jQuery

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

(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 là-bas du point de vue de Javascript, car il ne semble pas qu'il suive une syntaxe que j'ai vue JS faire auparavant. Voici donc ma liste de questions:

1. Si vous remplacez la fonction ($) ... par une variable, dites "la_fonction", la syntaxe ressemble à ceci:

    (the_function)( jQuery );

   Qu'est-ce que "(jQuery);" Faire? Les parenthèses autour de la_fonction sont-elles vraiment nécessaires? Pourquoi sont-ils là? Y a-t-il un autre morceau de code que vous pouvez donner qui soit similaire?

2. Cela commence par la fonction ($). Il s'agit donc de créer une fonction qui, pour autant que je sache, ne sera jamais exécutée, avec le paramètre $, qui est déjà défini? Que se passe-t-il ici?

Merci pour l'aide!

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 courant, vous pouvez utiliser $, qui est un nom de variable moins courant, mais toujours légal.

function($){ 
    $...
}

Je vais le mettre entre parenthèses pour m'assurer qu'il est analysé comme une expression:

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

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

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

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

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

Cela crée une nouvelle fonction qui prend un argument, puis appelle cette 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 SEULEMENT ÉCRIRE $ = jQuery?

• Parce que quelqu'un d'autre aurait pu définir $ comme signifiant autre chose. Cela garantit que toutes les autres significations de $ sont masquées par celle-ci.

(function( $ ){

})( jQuery );

C'est une fonction anonyme auto-exécutable qui utilise $en argument pour que vous puissiez l'utiliser ( $) au lieu de l' jQueryintérieur de cette fonction et sans craindre d'entrer en conflit avec d'autres bibliothèques car dans d'autres bibliothèques a aussi $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 $:

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

})(jQuery);

Ici jrattrapera automatiquement jQuery spécifié à la fin (jQuery). Ou vous pouvez omettre complètement l'argument, mais vous devrez alors utiliser le jQuerymot-clé tout autour plutôt $que sans craindre une collision. Donc, $est enveloppé dans l'argument de raccourci afin que vous puissiez écrire $au lieu de jQuerytout autour de cette fonction.

Si vous regardez même le code source de jQuery, vous verrez que tout est encapsulé 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 mappé avec l' windowobjet global en bas (window). C'est un modèle populaire ces jours-ci et a peu de gain de vitesse car ici, windowil sera examiné à partir de l'argument plutôt que de l' windowobjet global qui est mappé ci-dessous.

C'est $.fnl'objet de jQuery où vous créez votre nouvelle fonction (qui est également un objet) ou le plugin lui-même afin que jQuery enveloppe votre plugin dans son $.fnobjet et le rend 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 Javascript auto-exécutables

La syntaxe de base du plugin vous permet d'utiliser $pour faire référence jQuerydans le corps de votre plugin, quel que soit l'identifiant $au moment où le plugin est chargé. Cela évite les conflits de noms avec d'autres bibliothèques, notamment Prototype.

La syntaxe définit une fonction qui accepte un paramètre connu sous le nom de $sorte que vous puissiez y faire référence comme $dans le corps de la fonction, puis invoque immédiatement cette fonction, en la plaçant jQuerycomme argument.

Cela permet également de ne pas polluer l'espace de noms global (donc déclarer var myvar = 123;dans le corps de votre plugin ne définira pas soudainement window.myvar), mais le principal objectif ostensible est de vous permettre d'utiliser $où $peut avoir été redéfini depuis.

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

Exemple:

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

Cela alerterait une BARfois mis dans un <script>bloc. Le paramètre BARest passé à la fonction qui s'appelle elle-même.

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

Le jQuery à la fin passe lui-même (jQuery) à la fonction, afin que vous puissiez utiliser le symbole $ dans votre plugin. Tu pourrais aussi faire

(function(foo){

  foo.fn.myPlugin = function() {


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


    });

  };
})( jQuery );

Pour trouver une explication claire de cela et d'autres astuces javascript modernes et pratiques courantes, je vous 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.

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

Il s'agit donc de créer une fonction qui, pour autant que je sache, ne sera jamais exécutée, avec le paramètre $, 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 redéfinie sur 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 le fait d' $être un alias pour jQuery, alors votre plugin ne fonctionnerait pas pour les utilisateurs fonctionnant en mode noConflict.

Comme d'autres l'ont déjà expliqué, le code que vous avez publié crée une fonction anonyme qui est appelée immédiatement. La variable globale jQueryest ensuite transmise à cette fonction anonyme, qui est aliasée en toute sécurité en tant que variable locale$ dans la fonction.