Catégorie : Javascript

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval

Problème:

J’essaye de pusher une fonction dans un tableau array. Cette fonction est constituée notamment d’une partie dynamique (son argument itemValue) qui doit être interprété avant que la fonction ne soit poussée dans le tableau. J’utilise les templates literals pour ça.

Les templates literals ont bien été interprétés dans la fonction présente dans le tableau, mais cette dernière est stockée sous forme de string (chaîne de caractères – cf. les guillemets autour de la fonction dans ma capture) et ne peut donc pas être ré-exécutée!

Solution: utiliser Function à la place d’eval()

Source: N’utiliser eval() qu’en dernier recours !

Avec eval() et des template literals

Avec Function et sans template literals

Inclus dans mon push push():

Solution alternative

Source: How to Call a JavaScript Function From a String Without Using eval

Les deux exemples ci-dessous fonctionnent on their own, mais je n’ai pas réussi à adapter mon propre code pour les faire exploiter.

Fonction sans paramètre

Fonction avec trois paramètres

[Javascript] Déclaration de condition If dynamique

Source: Dynamic JavaScript If Statement

[Javascript] Transformer une fonction fléchée (arrow function) en fonction classique

Comment transformer une fonction fléchée en fonction de Javascript à papa. Utile, par exemple, lorsqu’on travaille avec Magento 2.

Note: la fonction d’exemple provient de ce sujet sur stack overflow: best way to filter based on dynamic condition.

Fonction fléchée (arrow function)

Fonction classique

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

  • déléguer un événement à un élément du DOM créé dynamiquement
  • détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

Javascript dans le cas d’un SVG:

[Javascript] Envelopper du contenu existant dans un nouvel élément du DOM

Source: Pure javascript method to wrap content in a div

[Javascript] Annuler la sélection d’un bouton radio

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

[Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS

Source: DYNAMICALLY Accessing nested JavaScript objects and arrays by string path et un petit jsFiddle pour la route.

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

Utilisation: