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

Copié et collé directement depuis le docs :

jQuery( callback ) Les retours : jQuery

Description : Lier une fonction à exécuter lorsque le DOM a fini de se charger. chargement.

version added: 1.0jQuery( callback )

`callback` The function to execute when the DOM is ready.

Cette fonction se comporte exactement comme $(document).ready() , être utilisé pour envelopper d'autres $() sur votre page qui dépendent du DOM soit prêt. Bien que cette fonction soit, techniquement, enchaînable, il n'y a il n'y a pas vraiment d'utilité à chaîner contre elle.

Veuillez revoir l'api

Answer 2

Cela dépend du contexte du code, mais il existe une pratique de conception courante en JavaScript consistant à encapsuler les variables et les méthodes dans un espace de nom ou un modèle de module. Ce code mai être un dérivé de cette intention.

Le raisonnement qui sous-tend le modèle de conception modulaire se résume aux complications liées aux variables globales et aux dangers du "clobbering".

Le clobbering peut se produire lorsqu'une variable (ou une fonction) du même nom est définie deux fois. La deuxième définition remplacera la première et, par essence, l'annulera.

Par conséquent, la règle générale est d'envelopper votre code dans une construction qui protège vos variables (et fonctions) de l'espace de noms global. Douglas Crockford décrit bien ce type de scénarios.

Este exemple montre un légèrement une incarnation plus courante appelée "fermeture" :

var jspy = (function() {
    var _count = 0;

    return {
      incrementCount: function() {
        _count++;
      },
      getCount: function() {
        return _count;
      }
    };
})();

C'est désorientant au début, mais une fois que vous l'avez reconnu, cela devient une seconde nature. Le but est d'encapsuler la variable _count en tant que membre privé de l'objet retourné qui a deux méthodes accessibles.

C'est puissant car l'espace de noms global ne comprend plus qu'une seule var (jspy) au lieu d'une var avec deux méthodes. La deuxième raison pour laquelle cette méthode est puissante est qu'elle garantit que la variable _count ne peut être accédée que par la logique des deux méthodes (incrementCount, getCount).

Comme je l'ai dit, votre code mai est une incarnation de cette règle empirique.

Quoi qu'il en soit, il est important de connaître ce motif en JavaScript car il ouvre la porte à des interactions beaucoup plus puissantes entre les frameworks, par exemple, et dans le chargement asynchrone de ceux-ci, comme dans AMD.

Voici une belle espace de noms exemple.

En résumé, il existe un modèle de conception JavaScript avancé qui vous aidera à le connaître, et les termes pertinents sont Modèle de module, Modèle d'espace de nom. Les autres termes associés sont la fermeture et l'AMD.

J'espère que cela vous aidera. Tous nos vœux de réussite ! Nash

Answer 3

Este jQuery(function(){...} est un raccourci pour jQuery(document).ready(function(){...}) . L'événement Ready est déclenché lorsque le DOM est prêt, ce qui vous permet d'être sûr que vous n'accédez pas à quelque chose qui n'est pas encore disponible.

D'autre part, si vous liez la méthode click comme vous le faites dans votre deuxième extrait. Ce code sera exécuté immédiatement, vous devez donc vous assurer que vous le placez après la méthode #saySomething déclaration.

Answer 4

jQuery(function($) { ... }); est ce qui empêche votre code de s'exécuter jusqu'à ce que le DOM (HTML) soit entièrement rendu et accessible.

Answer 5

Si votre jquery n'a pas besoin que le DOM soit entièrement chargé, vous pouvez utiliser sans risque l'une ou l'autre forme. Pour garantir que le DOM est entièrement chargé avant l'exécution de votre jquery, enveloppez vos déclarations jquery dans des fichiers $(function... .

$(function(){ ...}); est un raccourci pour $(document).ready(function(){ ... }); https://stackoverflow.com/a/6454695/209942 http://jqfundamentals.com/chapter/jquery-basics

Code Jquery enveloppé dans $(function ne sera pas exécuté avant que tout le HTML ait été entièrement analysé en mémoire et que le document soit prêt à être utilisé.

Si, dans votre environnement, il n'est pas garanti que le DOM soit entièrement chargé avant que le moteur de rendu n'atteigne votre jquery, et que vous devez alors envelopper votre jquery dans $(function .

Vous pouvez également essayer cette autre forme DOM-ready, qui fait de $ une variable locale, pour éviter les conflits avec d'autres variables qui utilisent éventuellement le symbole $ :

jQuery(function($){. https://stackoverflow.com/a/6454701/209942

Si le code jquery n'est PAS enveloppé dans une enveloppe $(function Est-ce que ça va marcher ? Si votre DOM est chargé, alors oui. Le chargement du DOM dépend de la façon dont vous chargez votre javascript.
Comment appeler une fonction JavaScript lorsque le fichier JavaScript externe est référencé à la fin du corps du HTML ?

Sachez que cet autre formulaire, similaire, n'attendra PAS le rendu du DOM. C'est une fonction littérale qui est exécutée immédiatement. Il n'y a pas de premier $ ou de premier jquery, mais il y a des parenthèses d'ouverture et de fermeture :

(function(){...})() ;