J'ai besoin d'aide pour comprendre ce JavaScript

Question

J'ai le code suivant qui semble étrange dans un fichier js et j'ai besoin d'aide pour comprendre ce qui se passe. Ce que je ne comprends pas, c'est pourquoi tout le code est mis entre paranthèses ? Qu'est-ce que cela signifie ?

(function() {
  var someobj = window.someobj = [];
  var parentId = '#wrapper';

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

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

Answer 1

Si le code que vous avez fourni est complet (à l'exception de ce qui se trouve à l'intérieur des deux fichiers $(document).ready(function() {}); ), alors ce code ne fait rien et la fonction n'est jamais exécutée. C'est la même chose avec ou sans les parenthèses enveloppantes.

En enveloppant une fonction entre parenthèses, vous pouvez créer une fonction anonyme fonction . Cependant, la fonction doit être exécutée immédiatement, ou stockée dans une variable (ce qui annulerait la partie anonyme). Vous verrez souvent cette technique pour éviter de polluer la portée globale avec des variables qui sont temporaires ou uniquement utilisées pour l'initialisation d'une application plus importante. Par exemple.

(function() {
  // Do initialization shtuff
  var someLocalVariable = 'value';
})(); 
// Notice the `();` here after the closing parenthesis.  
// This executes the anonymous function.

// This will cause an error since `someLocalVariable` is not 
// available in this scope
console.log(someLocalVariable);

Donc, ce qu'il manque à votre code, c'est la fonction (); après la parenthèse de fermeture à la fin de la fonction. Voici à quoi votre code devrait (vraisemblablement) ressembler :

(function() {
  var someobj = window.someobj = [];
  var parentId = '#wrapper';

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

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

Answer 2

Il ne semble pas que ce code soit complet. Tel qu'il est écrit, ce code ne fera rien du tout. Il manque une parenthèse fermante et un jeu de parenthèses supplémentaire à la fin ?

En JavaScript, il n'y a pas de système de modules, et donc pas de moyen de créer un module avec ses propres définitions de haut niveau qui n'entrent pas en conflit avec d'autres modules qui pourraient être utilisés.

Afin de surmonter ce problème, les gens utilisent des définitions de fonctions anonymes pour éviter les conflits de noms. Il s'agit de créer une fonction anonyme et de l'exécuter immédiatement.

(function () { /* do stuff */ })();

Cette opération crée une fonction, puis l'exécute immédiatement, sans aucun argument. Les variables définies à l'aide de var dans cette fonction n'entreront pas en conflit avec des variables définies ailleurs, et vous obtenez ainsi l'équivalent de votre propre espace de noms privé, comme ce que fournirait un système de modules.

Answer 3

Les parenthèses extérieures sont redondantes ici (il y a une erreur de frappe dans votre code, je pense qu'il vous manque la fermeture ); ). Parfois, les gens enveloppent une fonction dans des parenthèses pour plus de clarté lorsqu'ils invoquent la fonction immédiatement.

(function($) { 
    //some jQuery code    
})(jQuery);

Dans la fonction ci-dessus, le paramètre $ aura la valeur de la variable externe jQuery. Ceci est fait dans jQuery et les plugins jQuery pour éviter que le symbole $ n'entre en conflit avec d'autres frameworks.

Answer 4

Je vais supposer que cela fait en fait partie de la définition d'une fonction anonyme et que c'est pour cela que c'est entre parenthèses. Je pourrais envisager de le faire s'il y avait une sorte de logique pour que window.someobj change en fonction de différentes conditions, mais que du code plus loin fasse la même chose.

Answer 5

Les parenthèses ne sont pas vraiment nécessaires dans la mesure où ce code est utilisé. Ce code ne semble pas complet pour autant. La fonction s'initialise en fixant une variable à un objet de la page, puis en fixant une autre constante. Ensuite, il y a deux triggers apparemment identiques qui vont déclencher du code au chargement de la page.

Ça ne semble pas être un morceau de code très utile. Existe-t-il une portion plus importante qui pourrait nous éclairer sur ce point ?