hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Fonctions JavaScript

Les fonctions JavaScript peuvent faire plus que simplement enfermer un tas de codes en attendant que l'appel soit exécuté. Les fonctions ont évolué au fil du temps, conduisant à de nouvelles définitions, méthodes d'exécution et syntaxes. Ce post couvrira certains des rôles que les fonctions JavaScript ont joué jusqu'ici.

Connaître les différentes manières d'exprimer et de définir les fonctions ouvre la possibilité d' implémenter une logique de manière plus optimale en JavaScript. De plus, vous pourrez peut-être répondre plus facilement aux questions d'entrevue.

Expressions de fonction

Lorsque vous définissez simplement une fonction avec le mot clé function, les paramètres optionnels et le corps de code, il s'agit d'une déclaration de fonction .

Mettez cette déclaration dans une expression JavaScript (comme dans une affectation ou une expression arithmétique), elle devient une expression de fonction .

 // Fonction de déclaration de fonction nom_fonction () {}; // Expression de la fonction var nom_fonction = function () {}; 

Toutes les déclarations JavaScript sont hissées (déplacées dans la portée) pendant l'évaluation. Par conséquent, écrire un appel de fonction avant la déclaration de la fonction est correct (puisque la déclaration sera déplacée de toute façon).

 nom_fonction (); // appel de fonction [WORKS] function nom_fonction () {}; 

Les expressions de fonction ne sont cependant pas levées car les fonctions font partie des expressions et ne sont pas des déclarations autonomes.

 nom_fonction (); // appel de fonction [NE FONCTIONNERA PAS] var nom_fonction = function () {}; 

Expression de fonction invoquée immédiatement (IIFE)

C'est une expression de fonction, dont le code est exécuté immédiatement (une seule fois quand il est évalué). Vous pouvez en créer un en ajoutant simplement () (syntaxe utilisée pour appeler une fonction) juste après une expression de fonction. Ils peuvent être anonymes (pas de nom pour l'appeler).

Voici les deux syntaxes les plus courantes pour créer l'IIFE:

 (function optional_function_name () {// body} ()); 

et

 (function optional_function_name () {// body}) (); 

La parenthèse entourant la déclaration de la fonction la convertit en une expression, puis ajoute () après l'appel de la fonction. Vous pouvez utiliser d'autres façons de créer IIFE tant que vous ajoutez () après une expression de fonction (comme ci-dessous), mais les méthodes préférées sont les deux précédentes.

 // Quelques façons de créer des IFEs! Function () {/ * ... * /} (); + fonction () {/ * ... * /} (); nouvelle fonction () {/ * ... * /}; 

IIFE est idéal pour l'écriture de code qui ne doit s'exécuter qu'une seule fois, l'espacement des noms, la création de fermetures, la création de variables privées, etc. Voici un exemple d'utilisation de l'IIFE.

 var page_language = (function () {var lang; // Code pour obtenir la langue de la page return lang;}) (); 

Le code pour obtenir la langue de la page ne s'exécute qu'une fois (de préférence après le chargement de la page). Le résultat est stocké dans page_language pour une utilisation ultérieure.

Méthodes

Quand une fonction est la propriété d'un objet, elle s'appelle la méthode. Puisqu'une fonction est aussi un objet, une fonction dans une autre fonction est aussi une méthode. Voici un exemple d'une méthode dans un objet.

 var calc = {ajouter: fonction (a, b) {renvoyer a + b}, sub: fonction (a, b) {renvoyer ab}} console.log (calc.add (1, 2)); // 3 console.log (calc.sub (80, 2)); // 78 

Les fonctions add et sub sont des méthodes de l'objet calc .

Maintenant pour une fonction dans l'exemple de fonction:

 fonction add (a) {return la fonction (b) {return a + b;}} console.log (add (1) (2)); // La sortie est 3 

La fonction anonyme renvoyée est une méthode d' add de fonction.

Note: Comme le paramètre ( a ) de la fonction add de l'exemple ci-dessus est disponible pour la fonction suivante invoke, ce type de processus est appelé currying .

Constructeurs

Lorsque vous ajoutez un new mot clé avant une fonction et que vous l'appelez, il devient un constructeur qui crée des instances. Voici un exemple où les constructeurs sont utilisés pour créer des instances de Fruit et des valeurs sont ajoutées aux propriétés de chaque Fruit .

 function Fruit () {var nom, famille; // Nom scientifique et famille this.getName = function () {return name;}; this.setName = fonction (valeur) {name = valeur}; this.getFamily = function () {return famille;}; this.setFamily = function (valeur) {family = valeur}; } var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var orange = nouveau Fruit (); orange.setName ("Citrus ÃÂ? Â" sinensis "); orange.setFamily ("Rutaceae"); console.log (orange.getName ()); // "Citrus ÃÂ? Â" sinensis "console.log (apple.getName ()); // "Malus domestica" console.log (orange.getFamily ()); // "Rutaceae" 

Flèche Fonctions (ES6 Standard) [Uniquement dans Firefox]

Une nouvelle définition de fonction de ES6 Standard fournit une syntaxe plus courte pour l'expression de fonction. La syntaxe est

 () => {/ * body * /} 

Cet exemple de fonction:

 var sing = function () {console.log ('chanter ...')}; 

est le même que:

 var sing = () => {console.log ('chanter ...')}; 

Les fonctions fléchées sont anonymes et n'ont pas this valeur, this ci sera la même dans le code qui l'entoure. En outre, vous ne pouvez pas le remplacer par un new mot clé.

Ils sont utiles lorsque vous voulez que this fonction soit la même qu'à l'extérieur et que sa syntaxe plus courte rende le code d'écriture fonctionnel dans la fonction concise (comme ci-dessous)

 setInterval (function () {console.log ('message')}, 1000); 

dans

 setInterval (() => console.log ('message'), 1000); 

Fonctions du générateur (ES6 Standard) [Uniquement dans Firefox]

Une autre nouvelle définition de fonction de la norme ES6 est la fonction de générateur. Les fonctions du générateur sont capables d'arrêter et de poursuivre son exécution. Sa syntaxe est:

 function * nom_fonction () {} 

ou

 function * nom_fonction () {} 

Les fonctions de générateur créent des itérateurs. La méthode next l'itérateur est ensuite utilisée pour exécuter le code dans la fonction du générateur jusqu'à ce que le mot-clé yield soit atteint. Après cela, la valeur itérée identifiée par le mot-clé yield est renvoyée par la fonction de génération et l'exécution est arrêtée.

La fonction de générateur s'exécute à nouveau lorsque la méthode next est appelée jusqu'à ce que le prochain mot-clé yield soit atteint. Une fois que toutes les expressions de yield sont exécutées, la valeur undefined renvoie undefined .

Voici un exemple simple:

 function * generator_func (count) {pour (var i = 0; 

Voici un autre exemple:

 function * randomIncrement (i) {rendement i + 3; rendement i + 5; rendement i + 10; rendement i + 6; } var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (valeur itr.next ().); // 9 console.log (valeur itr.next ().); // 14 

Il y a aussi une expression yield* qui transmet la valeur à une autre fonction de générateur

 fonction * fruits (fruit) {rendement * légumes (fruit); donner des "raisins"; } fonction * légumes (fruit) {donner du fruit + "et épinards"; donner des fruits + "et brocoli"; donner des fruits + "et concombre"; } var itr = fruits ("Apple"); console.log (itr.next (). value); // "Apple and Spinach" console.log (valeur itr.next ().); // "Apple and Broccoli" console.log (itr.next (). Value); // console et console "Apple and Cucumber" (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //indéfini 

Les fonctions de générateur sont utiles si vous voulez passer en revue les valeurs une par une à votre point préféré dans le code en le mettant en pause, plutôt qu'en une seule fois comme en boucle dans un tableau.

Conclusion

J'ai inclus une liste de références ci-dessous, où vous trouverez des liens vers des références et des articles qui approfondissent différents sujets séparément. Les deux fonctions standard ES6 ne fonctionneront que dans Firefox pour le moment .

Les références

  • ECMAScript Language: Fonctions et classes
  • Expression de fonction invoquée immédiatement (IIFE)
  • Les bases des générateurs ES6
  • Fonctions de flèche
  • Fonction - Réseau de développeurs Mozilla

40 modèles de pages Web gratuits dans Photoshop PSD

40 modèles de pages Web gratuits dans Photoshop PSD

Le temps c'est de l'argent, et cela est particulièrement vrai pour les concepteurs de sites Web qui peuvent gagner plus s'ils sont capables de gérer leur temps sur des projets. Une chose qui aide les concepteurs à gagner beaucoup de temps sont les modèles prêts à l'emploi. Les modèles peuvent être utilisés comme matériau de base pour créer un site Web personnalisé ou vous pouvez les montrer à vos clients pour les aider à visualiser le produit final.Donc, voici u

(Conseils techniques et de conception)

Créez des menus Hamburger coulissants faciles avec le cadre jQuery Slidebars

Créez des menus Hamburger coulissants faciles avec le cadre jQuery Slidebars

Les concepteurs de UX se chamaillent sur l'utilisation des menus hamburger dans la conception web. Ils servent un but pour les utilisateurs mobiles, mais ont également une plus faible visibilité .Je ne peux pas dire s'ils valent la peine d'utiliser sur votre site Web ou non, mais si vous cherchez un moyen facile de configurer un menu glissant, alors le SlideBars Framework est une ressource pratique.S

(Conseils techniques et de conception)