Pourquoi dois-je encapsuler une fonction jQuery dans jQuery(function ($) { }) ;

Question

Je suis tombé sur un morceau de code qui ressemble à ceci :

jQuery(function($) {
  $('#saySomething').click(function() {
    alert('something');
  });
});

Je ne comprends pas bien. Pourquoi je ne peux pas simplement faire ça :

$('#saySomething').click(function() {
   alert('saySomething');
});

Answer 1

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

est la version abrégée de :

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

Si vous n'attendez pas que le document pour être prêt, les éléments sur lesquels vous lieriez les événements n'existeront pas dans le dom, et les événements ne seront pas réellement liés.

Vous pouvez également attendre que le body pour avoir fini de charger, mais cela inclut l'attente des images, qui prennent plus de temps à charger.

La vérité est dite, vous Ne le fais pas. doivent attendre document.ready . Vous pouvez aller de l'avant et utiliser $('#saySomething').click(...) si vous savez que l'élément existe dans le DOM :

<button id="saySomething>Say Something!</button>
<script>
    jQuery('#saySomething').click(...);
</script>

Il y a une dernière nuance à jQuery(function ($) {...}); que vous devriez connaître. Le site $ dans la fonction est utilisé pour alias jQuery a $ ce qui vous permettra d'utiliser le $ dans la fonction sans avoir à se préoccuper des conflits avec d'autres bibliothèques (comme le prototype).

Si vous n'attendez pas document.ready il est courant de voir un IIFE utilisé pour alias jQuery :

(function ($) {
    $('#saySomething').click(...);
}(jQuery));

Answer 2

jQuery(function($) {

est un raccourci pour

jQuery(document).ready(function(){

Cela attend que le document soit dans un état "prêt" où le DOM est construit. Vos scripts jQuery peuvent alors travailler avec la page complète et ne manquer aucun élément.

Mais - vous pouvez exécuter jQuery sans lui. Si votre script est dans la tête, vous risquez de sélectionner des éléments qui n'ont pas encore été créés. J'ai utilisé jQuery dans le corps de mon document immédiatement. après l'élément ou les éléments que je veux affecter afin d'essayer d'intervenir sur eux le plus rapidement possible. C'était un cas inhabituel et je ne le fais généralement pas.

Une autre raison d'utiliser la fonction ready - vous pouvez l'exécuter plus d'une fois. Si vous incluez plusieurs scripts ou si vous avez du code qui est inclus de manière conditionnelle, vous pouvez avoir plusieurs fonctions ready(). Le code dans chaque bloc ready est maintenu jusqu'à ce que l'état prêt soit atteint, puis le code est exécuté dans l'ordre où il a été ajouté.

Answer 3

Le premier exemple est exécuté après le chargement complet de la page. Le deuxième exemple est exécuté directement (et échouera probablement).

Donc, le premier est un raccourci pour :

$(document).ready(function(){
  // Do something after the page is loaded.
});

Answer 4

Il s'agit de l'abréviation de "document load" (chargement du document) et ils ont également utilisé l'abréviation "jQuery" avec un alias $ à l'intérieur pour éviter les collisions avec d'autres bibliothèques utilisant le signe $.

Si vous n'attendez pas le chargement du document, les choses peuvent devenir imprévisibles/ne pas fonctionner. De même, si vous avez des collisions de noms, les choses vont tout simplement exploser.

Answer 5

$(function() {}) est l'abréviation de la fonction de préparation de document de jQuery. http://api.jquery.com/jQuery/#jQuery3 y http://api.jquery.com/ready/ pour plus d'informations