Auteur/autrice : admin

[Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières

Plusieurs sources pour cet article (car plusieurs techniques; à vous de choisir):

Avec le module pattern:

Je détaille celui-ci car il me plait bien 🙂 Mais voir également le Revealing module pattern juste en-dessous qui apporte quelques améliorations.

  • Variables et les fonctions privées: déclarées au sein d’une closure mais EN-DEHORS du scope du return
  • Variables et les fonctions publiques: déclarées au sein d’une closure mais DANS le scope du return

Avec le Revealing module pattern

Avec le Revealing module pattern, toutes les variables et toutes les fonctions sont d’abord déclarées en privé et on se sert du return pour lister celles qu’on rend ensuite publiques. C’est plus lisible et plus pratique à l’utilisation.

[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.

[UIKit v3] Mettre à jour les options d’un composant

Source: Is it possible to update the options of a component?. ATTENTION: le code d’illustration donnée dans l’issue Git est FAUX! Mais il m’a mis sur la bonne piste. Reportez-vous au code ci-dessous:

[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:

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

Fichier template.twig:

[Webpack Encore] Générer des fichiers HTML à partir de templates Twig

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).

Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).

Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:

webpack.config.js:

Résultat:

Fichiers source:

Fichiers destination:

[JavaScript] Exécuter une fonction seulement une fois

Mise à jour: 09/12/2021

Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.


js/utils.js: