Self Invoking Function comme callback jQuery ducument ready

Question

Quelle est la différence entre

$(function() {
    // bind some event listeners
});

y

$(function() {
    // bind some event listeners
}());

Answer 1

$(function() {
    // bind some event listeners
});

Dans le cas ci-dessus, la fonction est passée au jquery qui sera exécuté une fois le document prêt.

$(function() {
    // bind some event listeners
}());

Dans le cas ci-dessus, le retour de la fonction est passé au jquery. Puisque la fonction se3lf s'exécute elle-même, elle sera exécutée immédiatement et tout ce que la fonction renvoie sera transmis à jquery, ce n'est donc pas une bonne méthode car l'objectif est d'exécuter la fonction une fois que le document est prêt, ce qui n'est pas le cas ici.

Answer 2

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

Cette fonction est appelée lorsque le DOM est prêt, ce qui signifie que vous pouvez commencer à interroger les éléments par exemple. .ready() utilisera différentes manières sur différents navigateurs pour s'assurer que le DOM est vraiment prêt.

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

Ce n'est rien d'autre qu'une fonction qui s'invoque dès que possible lorsque le navigateur interprète votre JavaScript. Par conséquent, il est très peu probable que vous puissiez agir avec succès sur les éléments du DOM ici.

Answer 3

$(function() {
    // bind some event listeners
});

Celui-ci ne sera exécuté que lorsque le DOM sera entièrement chargé, c'est le raccourci de :

$(document).ready(function(){
  // Write code here
}); 

---

$(function() {
    // bind some event listeners
}());

Celui-ci est le même, mais la fonction à l'intérieur de l'élément $() est une fonction qui s'invoque elle-même. En général, l'objectif est d'éviter les conflits de noms de variables, car il s'agit de créer une nouvelle portée.

Answer 4

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

est simplement l'abréviation de jQuery :

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

Les expressions de fonctions immédiatement provoquées (ou IIFE), au contraire, sont des expressions "exécutées immédiatement", la convention est de les mettre entre parenthèses, mais tout type d'expression est exécuté immédiatement, voir les fonctions IIFE suivantes :

(function() {
    console.log("IIFE 1");
}());

+function() {
    console.log("IIFE 2");
}();

1-function() {
    console.log("IIFE 3");
}();

var f = 50 * function() {
    console.log("IIFE 4");
}();

J'espère que c'était clair, au revoir.