$ (document). déjà raccourci

245

Le raccourci suivant est-il pour $(document).ready?

(function($){

//some code

})(jQuery);

Je vois que ce modèle est beaucoup utilisé, mais je ne trouve aucune référence à ce modèle. S'il s'agit d'un raccourci $(document).ready(), y a-t-il une raison particulière pour laquelle cela pourrait ne pas fonctionner? Dans mes tests, il semble toujours se déclencher avant l'événement prêt.

Mark Brown
la source
Toute variable définie à l'intérieur de la fonction de modèle mentionnée (par exemple var somevar;) ne changera pas le contenu des variables du même nom en dehors de la fonction
Timo Huovinen
3
Le code a pour effet de garantir que $ représente jQuery dans ce bloc de fonction afin que le code soit portable aux endroits où l'alias $ pour jQuery est désactivé ou défini comme autre chose.
AsksAnyway

Réponses:

253

Le raccourci pour $(document).ready(handler)est $(handler)(où handlerest une fonction). Voyez ici .

Le code dans votre question n'a rien à voir avec .ready(). Il s'agit plutôt d'une expression de fonction immédiatement invoquée (IIFE) avec l'objet jQuery comme argument. Son but est de restreindre la portée d'au moins la $variable à son propre bloc afin qu'elle ne provoque pas de conflits. Vous voyez généralement le modèle utilisé par les plugins jQuery pour vous en assurer $ == jQuery.

BoltClock
la source
14
Techniquement, c'est une expression de fonction immédiatement invoquée . Si elle s'auto-invoquait, elle s'appellerait d'elle-même. Recherchez sur le Web iifeou passez directement au célèbre billet de blog de Cowboy Alman . Détails… sheesh.
2540625
546

La sténographie est:

$(function() {
    // Code here
});
Kyle Trauberman
la source
24
Le premier argument est $. jQuery(function($, undefined) {});
Je pourrais
5
@raynos Ce n'est pas obligatoire. le code ci-dessus fonctionne très bien comme un alias pour$(document).ready(function(){ });
Kyle Trauberman
10
Il est juste utile de savoir que vous obtenez $gratuitement comme premier argument.
Raynos
3
Je visite encore cette réponse une fois par mois environ.
Nugsson
89

Le raccourci correct est le suivant:

$(function() {
    // this behaves as if within document.ready
});

Le code que vous avez publié…

(function($){

//some code

})(jQuery);

… Crée une fonction anonyme et l'exécute immédiatement en lui jQueryfaisant passer l'argument $. Tout ce qu'il fait est de prendre le code à l'intérieur de la fonction et de l'exécuter comme d'habitude, car il $s'agit déjà d'un alias pour jQuery. :RÉ

Gordon Gustafson
la source
4
Vous pourriez dire qu'il garantit également que $ est l'alias de jQuery, si d'autres outils qui utilisent également $ comme alias sont chargés
Jim Wolff
16

Ce n'est pas un raccourci pour $(document).ready().

Le code que vous avez publié contient le code interne et rend jQuery disponible $sans polluer l'espace de noms global. Cela peut être utilisé lorsque vous souhaitez utiliser à la fois le prototype et jQuery sur une seule page.

Documenté ici: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression

samy-delux
la source
Merci d'avoir répondu à la question
MarcGuay
12

Ces lignes spécifiques sont l'encapsuleur habituel pour les plugins jQuery:

"... pour vous assurer que votre plugin n'entre pas en collision avec d'autres bibliothèques qui pourraient utiliser le signe dollar, il est préférable de passer jQuery à une fonction auto-exécutable (fermeture) qui le mappe au signe dollar afin qu'il puisse ' t être écrasé par une autre bibliothèque dans le cadre de son exécution. "

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

Depuis http://docs.jquery.com/Plugins/Authoring

morgar
la source
11

Le raccourci sécurisé multi-framework pour prêt est:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

En effet, jQuery n'est pas le seul framework qui utilise les variables $etundefined

Timo Huovinen
la source
peut également être écrit comme(function($){ ... })(jQuery);
Mike Causer
2
@MikeCauser est également une bonne approche, mais elle ne sera pas invoquée, elle sera readyplutôt appelée immédiatement
Timo Huovinen
5

Une variante encore plus courte consiste à utiliser

$(()=>{

});

$représente jQuery et ()=>{}est appelé «fonction flèche» qui hérite thisde la fermeture. (De sorte que thisvous en aurez probablement windowau lieu de document.)

Edvard Rejthar
la source
0

Et ça?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
RN Kushwaha
la source