compréhension fonction anonyme

théorie

Le problème exposé dans ce sujet a été résolu.

Bonjour à tous,

J'essaye de comprendre plus en détails les fonctions anonymes et les différences entre les manières de les déclarer. J'ai trouvé un article mais je ne suis pas tout à fait sûr, concernant un point particulier donc je viens demander confirmation.

1
2
3
(function($){
    $('p').css('color', 'rouge-fluo')
})(jQuery.noConflic())

Il explique ceci :

jQuery.noConflic() restaure $ à sa valeur précédente, permettant à d’autres libs d’utiliser $ (comme la lib prototype.js). Mais jQuery.noConflic() retourne aussi l’objet jQuery, que l’on passe en paramètre. Ce paramètre est nommé $ dans la signature de la fonction. Dans notre fonction, on peut donc QUAND MÊME utiliser $ pour faire référence à jQuery car tout ce qui est dans la fonction est isolée du reste du monde. Et le reste du monde peut utiliser $ pour autre chose que jQuery.

Est ce que cela voudrait dire que dans notre bloc de code nous pourrons utiliser que la librairie jQuery ? Finallement je ne vois pas trop l'intérêt de passer un paramètre car de toute façon, lorsqu'on implémente un script avec <script src='jquery.min.js > par exemple on y a bien accès partout. Pourriez vous me donner un exemple précis où il est utile d'ajouter un paramètre à cette fonction ?

Merci d'avance.

+0 -0

Est ce que cela voudrait dire que dans notre bloc de code nous pourrons utiliser que la librairie jQuery ?

Non. C'est une fonction javascript, tu peux y utiliser tout javascript.

Finallement je ne vois pas trop l'intérêt de passer un paramètre car de toute façon, lorsqu'on implémente un script avec <script src='jquery.min.js > par exemple on y a bien accès partout.

Pas vraiment. Quand tu inclus jquery.min.js, tu as accès à jQuery, pas à $.

Pourriez vous me donner un exemple précis où il est utile d'ajouter un paramètre à cette fonction ?

Volontiers. Imagine que tu as envie d'utiliser deux bibliothèques. Une va polluer ton espace global avec un \$, appelons cette bibliothèque dollar. L'autre s'appelle jQuery et va aussi polluer ton espace global avec un \$ sauf si tu lui dis "arf mon amie, va y'avoir une bataille pour savoir ce que $ représente, c'est un conflit, stp no conflict".

Du coup comment faire ?

1
2
3
(function($){
  $('p').css('color', 'rouge-fluo')
})(jQuery.noConflict())

Maintenant que se passe-t-il dans ce code ?

Ligne 1. on défini une fonction qui a un argument nommé $. Ligne 2. c'est le corps de la fonction, on peut allègrement y utiliser l'argument. Ligne 3. fin de la définition de fonction, on l'appelle immédiatement en lui passant jQuery.noConflict() comme paramètre. Du coup tout va bien.

+0 -0

Bonjour,

Merci pour ta réponse et navré pour MA réponse tardive :/

Non. C'est une fonction javascript, tu peux y utiliser tout javascript.

Ce que je voulais dire par là c'était : Dans notre exemple, est ce que cela voudrait dire que le $ représentera uniquement la librairie jQuery et non pas la librairie prototype (ou autre) ? (je parle bien dans le corps de notre fonction pas à l'extérieur)

Et est ce que ce "formatage" est uniquement valable pour cet exemple ? Je suppose que cette nomenclature n'est pas utilisable uniquement pour éviter les conflits entre les libs.

Aurais-tu un autre exmple stp car finalement je ne vois pas trop en quoi ça pourrait m'être utile dans un autre cas…

1
2
3
(function(X){
  //Code
})(X)

Désolé je pose des questions peut être bêtes mais j'essaye de voir dans quelles situations ça pourrait m'être utile.

Merci d'avance

+0 -0

Ce que je voulais dire par là c'était : Dans notre exemple, est ce que cela voudrait dire que le $ représentera uniquement la librairie jQuery et non pas la librairie prototype (ou autre) ? (je parle bien dans le corps de notre fonction pas à l'extérieur)

En JavaScript une variable ne peut avoir qu'une seule valeur. Il est impossible de définir une variable qui vaudrait 'a' et 'b' par exemple. La variable nommée $ dans notre exemple ne peut pas contenir jQuery et prototype.

Reprenons :

1
2
3
(function($){
  $('p').css('color', 'rouge-fluo')
})(jQuery.noConflict())

ici, 

1
2
3
(function($){
  $('p').css('color', 'rouge-fluo')
})

retourne une fonction qui a un paramètre nommé $.

1
jQuery.noConflict()

retourne la bibliothèque jQuery.

On a donc une fonction qui prend un paramètre et le nomme $. On appelle cette fonction en lui passant jQuery comme argument. Donc dans le corps de cette fonction, $ est jQuery.

Si c'est toujours pas clair, essaie les choses suivantes:

1
2
3
(function(a){
  console.log(a);
})("hello world")

1
2
3
(function($){
  console.log($);
})({text: "hello world"})

1
2
3
4
var $ = "hehe";
(function($){
  console.log($);
})("hello world")
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte