compréhension fonction anonyme

théorie

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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.

Édité par zaewyr

+0 -0
Staff

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.

Édité par victor

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Auteur du sujet

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

Édité par zaewyr

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

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")

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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