J'aimerais comprendre la syntaxe du plugin jQuery

Question

Le jQuery site répertorie les de base de la syntaxe de 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 là-bas à partir de Javascript point de vue, parce qu'il ne regarde pas comme il suit toute la syntaxe que j'ai vu JS faire avant. Voici donc ma liste de questions:

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

    (the_function)( jQuery );
   

   Qu'est-ce que "( jQuery );"? Sont les parenthèses autour de the_function vraiment nécessaire? Pourquoi sont-ils là? Est-il un autre morceau de code que vous pouvez donner à qui est semblable?

2. Il commence avec la fonction( $ ). C'est donc créer une fonction qui, aussi loin que je peux dire ne sera jamais exécuté, avec le paramètre de $, ce qui est déjà défini? Ce qui se passe là-bas?

Merci pour l'aide!

Answer 1

function(x){ 
    x...
}

n'est qu'une fonction sans nom, qui prend un argument, "x", et fait des choses avec x.

Au lieu de "x", qui est une commune nom de la variable, vous pouvez utiliser $, ce qui est moins commun nom de la variable, 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:

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

Juste pour le plaisir, nous allons appeler cette fonction et passer à jQuery comme une variable:

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

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

POURQUOI?

• Parce que l'écriture de 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 pourrait avoir défini $ pour signifier quelque chose d'autre. Cela garantit que tous les autres significations de $ sont ombragées par celui-ci.

Answer 2

---

Answer 3

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 l' $ à la fois le plugin est chargé. Cela empêche les conflits de noms avec d'autres bibliothèques, notamment Prototype.

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

Cela permet aussi de ne pas polluer l'espace de noms global (donc déclarer var myvar = 123; dans votre plugin corps ne sera pas soudainement définir window.myvar), mais le principal but manifeste est de vous permettre d'utiliser $ où $ ont depuis été redéfini.

Answer 4

Vous avez affaire à une auto-invocation de fonction anonyme. C'est comme les "meilleures pratiques" pour envelopper un plugin jQuery à l'intérieur de cette fonction, assurez-vous que l' $ signe est lié à l' jQuery objet.

Exemple:

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

Ce serait d'alerte BAR dans un <script> bloc. Le paramètre BAR est passé à la fonction qui s'appelle elle-même.

Le même principe qui se passe dans votre code, l' jQuery objet est passé à la fonction, de sorte $ va se référer à l'objet jQuery pour vous.

Answer 5

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

 (function(foo){

  foo.fn.myPlugin = function() {


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


    });

  };
})( jQuery );