Syntaxe des fonctions Javascript

Question

Dans ma faible tentative d'apprendre JavaScript, j'ai acheté un livre qui vous apprend comment faire des choses en JavaScript, mais qui oublie de dire POURQUOI.

Venant de PHP, je suis familier avec la syntaxe typique des fonctions :

function name() {return;}

qui, d'après ce que j'ai compris, fonctionne de la même manière en JS.

Puis je décide d'essayer d'utiliser le cadre YUI 3 pour un petit projet afin de continuer à apprendre et je tombe sur ceci... Objet global YUI

YUI().use('node', function(Y) {
   Y.Node.get('#demo');
});

D'après ce que j'ai compris, il s'agit d'utiliser la fonction "use" de l'objet YUI(), en passant "node" à la fonction "use".... mais alors quoi... pourquoi déclare-t-on une fonction dans un autre appel de fonction ?

Quelqu'un pourrait-il expliquer la syntaxe utilisée ici ?

Une bonne référence qui explique la syntaxe générale de JavaScript, similaire à celle de php.net, serait également utile. Merci pour votre aide.

Answer 1

Il s'agit d'une fonction anonyme. Elle est considérée comme un rappel.

En PHP 4 et dans les premières versions de PHP 5, vous pouvez voir quelque chose comme ceci :

PHP

function callback($var){
   ...
}

array_filter( $array, "callback" );

Dans les versions ultérieures de PHP 5, vous pouvez les définir comme des fonctions anonymes en ligne.

Ainsi, en JavaScript, l'ancienne version ressemblerait à ceci :

JavaScript

function use_callback(Y){
    Y.Node.get('#demo');
}

YUI().use('node', use_callback);

Mais en définissant une fonction anonyme en ligne, vous pouvez vous épargner l'encombrement supplémentaire et la fonction définie :

YUI().use('node', function(Y) {
   Y.Node.get('#demo');
});

Ces deux fonctions sont équivalentes.

Answer 2

En JavaScript, les fonctions sont des objets. Dans ce cas, elles passent un objet comme deuxième valeur de paramètre (et le définissent en ligne).

YUI().use('node', function(Y) {
    Y.Node.get('#demo');
});

est le même que celui-ci :

var xxx = function(Y) {
    Y.Node.get('#demo');
};

YUI().use('node', xxx);

Answer 3

Il s'agit de construire une fonction anonyme, puis de passer la fonction elle-même en tant qu'argument à la fonction use . Les use appellera alors votre fonction anonyme avec une valeur, qui dans votre fonction sera appelée Y qui contient les modules que vous avez demandés dans les arguments précédents à l'adresse suivante use .

Ceci est essentiellement équivalent à ce qui suit, qui passe myFunction en tant que rappel de YUI().use sauf que la fonction anonyme n'a pas de nom :

function myFunction(Y) {
   Y.Node.get('#demo');
}

YUI().use('node', myFunction);

Ce modèle est utilisé parce que JavaScript n'a pas de notion explicite d'espaces de noms ou de modules. Il est toutefois possible de les imiter en utilisant la portée d'une fonction comme une sorte d'espace de noms. Dans ce cas, YUI().use construira un objet qui possède toutes les fonctionnalités que vous demandez, et transmettra cet objet à la fonction que vous fournissez, afin que vous puissiez utiliser cet objet. Y pour appeler les méthodes que vous avez importées.

Pour une bonne référence en ligne sur la syntaxe et les méthodes JavaScript, j'aime utiliser le site Centre des développeurs Mozilla la documentation. En particulier, ils ont de bonnes références sur JavaScript et le DOM . Comme il fait partie du projet Mozilla, il se concentre sur les méthodes et la syntaxe supportées par Gecko (le moteur de rendu de Firefox), mais il inclut généralement des notes de compatibilité pour mentionner ce qui est portable et ce qui est spécifique à Gecko.

Pour répondre à votre question, je vous recommande de lire la documentation du MDC sur fonctions et champ d'application des fonctions . Malheureusement, le MDC n'apparaît généralement pas en tête de liste lors d'une recherche sur Google ; à la place, vous obtenez W3Schools, qui a tendance à être de moins bonne qualité et à contenir plus de publicités. J'ai constaté qu'il était utile de toujours faire précéder mes recherches sur tout ce qui concerne JavaScript ou le DOM par "mdc" afin d'obtenir la documentation du MDC ; ainsi, par exemple, pour trouver ce lien, j'ai fait une recherche sur fonction mdc et j'ai trouvé ce dont j'avais besoin.

Answer 4

En javascript, les fonctions peuvent être transmises comme des variables. Voici donc d'autres façons dont le code YUI aurait pu être écrit

//original
YUI().use('node', function(Y) {
   Y.Node.get('#demo');
});

//more traditional "global function" 
function useNode(Y) {
    Y.Node.get('#demo');
}
YUI().use('node', useNode);

//local callback function
var myUseNode = function(Y) {
    Y.Node.get('#demo');
}
YUI().use('node', myUseNode);

éditer Pour ce qui est de la deuxième partie de votre question, vous pourriez écrire ce que je sais de PHP sur un timbre-poste, donc je ne peux pas vous aider, désolé :-)

Answer 5

Il s'agit d'un fonction anonyme (apparenté à fonction lambda ).

YUI().use('node', function(Y) {
   Y.Node.get('#demo');
})

En Javascript, les fonctions sont des citoyens de première classe - ce sont des objets comme les autres ; elles peuvent donc être passées en paramètre.