A propos de la déclaration de fonction JS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu A propos de la déclaration de fonction JS

Message par Ast le Jeu 11 Aoû 2016 - 13:51

Bonjour à la communauté,
Autodidacte en JS depuis mes début sur FA, j'ai souvent récupérer des fonctions toutes faites pour ensuite en modifier le contenu. Au bout d'un moment, j'en viens forcément à me poser des questions sur la déclaration de ces fonctions.
J'ai notamment vu qu'en déclarant une fonction sous la forme :
1)
Code:
 $(  function Toto(){blabla}  );
Cela permettait à une fonction de s'exécuter en fonction des cases cochées ("sur l'index", "sur toutes les pages", etc...)

En revanche, une déclaration sous la forme :
2)
Code:
  function Toto(){blabla}
ne s'exécute pas automatiquement.

Une dernière écriture m'apparait encore plus nébuleuse :
3)
Code:
  (function Toto(){blabla})(jQuery); 

Ce n'est donc pas un besoin de code que j'ai mais simplement une question de culture générale, motivée par l'envie d'essayer de comprendre les différences entre ces 3 écritures.

Merci d'avance pour vos éclairages !


Dernière édition par Ast le Jeu 11 Aoû 2016 - 16:53, édité 1 fois

Ast
*

Messages : 39
Inscrit(e) le : 05/06/2015

http://lesameselementaires.forumactif.org/
Ast a été remercié(e) par l'auteur de ce sujet.

Résolu Re: A propos de la déclaration de fonction JS

Message par Ange Tuteur le Jeu 11 Aoû 2016 - 16:00

Bonjour Ast,

1. Cette déclaration est courte pour jQuery's $(document).ready(); fonction.

Par exemple :

cette provoque une erreur, parce que "#page-header" est pas encore disponible :
Code:
var header = document.getElementById('page-header'); // null
header.innerHTML = 'New Content'; // Uncaught TypeError: Cannot set property 'innerHTML' of null

cette exécute bien ( sur version phpbb3 >.> ) :
Code:
$(function() {
  var header = document.getElementById('page-header'); // <div id="page-header">...</div>
  header.innerHTML = 'New Content'; // "New Content"
});

Voir : https://learn.jquery.com/using-jquery-core/document-ready/ ( en anglais )


2. Cette déclaration est un "fonction invocable", il exécute le code lorsqu'il est invoqué.

Par exemple :

déclaration de la fonction :
Code:
// define function
function hello (nom) {
  alert('Hello ' + ( nom ? nom : 'world' ) + ' !');
};

invoquant la fonction :
Code:
// call function
hello(); // Hello world !
hello('Ast'); // Hello Ast !
hello('Ange') // Hello Ange !

Il est bon d'invoquer la même fonction à plusieurs reprises.


3. Cette déclaration est un "IIFE" ( Immediately Invoked Function Expression, en Anglais ). Il est utilisé pour invoquer immédiatement une fonction.

Par exemple :

assignant d'une valeur :
Code:
// assigning a value immediately by using a function
var lucky_numbers = (function() {
  var randomArray = [],
  i = 0;

  for (; i < 5; i++) {
    randomArray.push( Math.floor( Math.random() * 10 ) );
  }

  return randomArray;
}());

console.log(lucky_numbers); // [7, 2, 2, 4, 2]

une fonction anonyme :
Code:
// anonymous function
(function(head) {
  var stylesheet = 'URL';

  head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="' + stylesheet + '"/>');

}(document.getElementsByTagName('HEAD')[0]));

Voir : https://developer.mozilla.org/fr/docs/Web/JavaScript/Une_r%C3%A9introduction_%C3%A0_JavaScript#Les_fonctions ( pour 2 et 3 )


Je recommande d'utiliser la première déclaration des modifications générales.

Bonne journée. ::fleur::

Excusez mon Français svp. Je suis Anglais. edente

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: A propos de la déclaration de fonction JS

Message par Ast le Jeu 11 Aoû 2016 - 16:52

Merci pour ce retour. Aucun soucis pour l'anglais, l'important est que l'explication soit bien passée Wink
Je rajoute juste ce lien *ICI* sur lequel est expliqué ce qu'on entend par fonction anonyme (merci de m'avoir donné le terme, ça facilite les recherches Smile)

Ast
*

Messages : 39
Inscrit(e) le : 05/06/2015

http://lesameselementaires.forumactif.org/
Ast a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum