Étiquette : javascript

[Magento 2] Structure d’un plugin jQuery qui n’est ni un module RequireJS, ni un widget

app/design/frontend/MyVendor/default/Vendor_Catalog/web/js/collection-slider.js

Note: ce plugin utilise un autre plugin jQuery, à savoir Sly.

Exemple avec des paramètres:

app/design/frontend/MyVendor/default/Vendor_Catalog/requirejs-config.js

Importance de shim pour déclarer les différentes dépendances du plugin.

app/code/Vendor/Catalog/view/frontend/templates/category/whatever.phtml

Ici, veiller à bien re-lister toutes les dépendances à votre plugin (jQuery, sly, …)!

Exemple avec des paramètres:

[Javascript] Manipuler les objets JSON, astuces et bonnes pratiques

Boucler dans un objet JSON imbriqué et retourner une liste de toutes les valeurs d’une clé spécifique

Objectif: boucler dans l’objet JSON ci-dessous et retourner une liste de toutes les valeurs de la clé example.

Ressources en ligne:

[Javascript] Exécuter un événement qui se déclenche plusieurs fois de suite seulement après un certain délais en temps (un timeout)

Nouvelle méthode (tips: utilisez celle-ci)

The main difference between throttling and debouncing is that throttling executes the function at a regular interval, while debouncing executes the function only after some cooling period.

Source: Debouncing and Throttling in JavaScript

Version PDF: Debouncing and Throttling in JavaScript


Ancienne méthode

…et en fait j’ai jamais réussi à la faire fonctionner.

Source: How to respond to a Javascript event only if it is fired once and then not fired again during some time period?, Debouncing Javascript Methods

Problème:

In my application I listen to the Google Maps API ‘bounds_changed’ event to send an ajax request to update some div on the web page depending on the new boundaries of the map:

The event ‘idle’ is fired with a high frequency when the user drag the map around. So much that there are too many ajax requests sent to the server.

Basically I would like to make the function to be executed only after the user has stopped to move the map during some time period (for example 500ms).

Solution

A l’addListener pour l’événement idle de l’API Google Maps, on déclare une fonction qui contiendra juste notre appel à la fonction debounce:

[Javascript] Utiliser l’API de Géolocalisation avec des promesses ou Async Await

Source: un billet clair, concis et efficace: How to use Geolocation API with Promises

Avec une promesse:

Avec async, await:

[Javascript] Eviter qu’une callback function possédant un paramètre et invoquée via un EventListener click ne s’exécute immédiatement

(comprendre: sans que l’utilisateur n’ait cliqué au préalable).

J’ai rencontré ce souci en cherchant à ajouter un addEventListener 'click' à des markers que je créais dans ma fonction pour les placer sur une Google Maps.

Avec la déclaration suivante, la fonction invoquée ci-dessous en clickCallback était exécutée immédiatement:

Pour pallier à mon problème, j’ai dû déclarer mon événement comme suit:

Le code complet pour une vision plus globale:

La fonction dans laquelle j’initialise mon eventListener:

L’exécution de cette fonction:

La callback function:

[Javascript][Google Maps v3] Eviter une boucle infinie en exécutant un événement seulement si il n’a pas été invoqué dans les dernières x secondes

Problème: des événements de l’API Google Maps v3 comme bounds_changed, zoom_changed, idle se déclenchent à chaque exécution de la méthode fitBounds qui permet d’ajuster automatiquement le zoom de la carte afin que celle-ci affiche l’ensemble des markers de la map.

MAIS… comme très souvent remonté (ici et par exemple), l’exécution de la méthode fitBounds, incontournable si on souhaite afficher tous les markers disponibles sur la carte dans le viewport, va très logiquement déclencher les événements code>bounds_changed, zoom_changed, idle, puisqu’elle va faire « bouger » la carte lorsqu’elle va zoomer ou dézoomer. Si votre fonction fitBounds est exécutée au délenchement d’un des événements pré-cités, vous entrez dans une boucle infinie: l’exécution de fitBounds recommence encore er encore jusqu’à faire crasher le navigateur.

Solution: faire un mix de ce qui est suggéré ici: Do not fire ‘zoom_changed’ event when calling fitBounds function on map et ici: Fire javascript function 2 sec after no activity in input tag.

Créer un flag qui n’autorise pas les événements de la map à être exécutés si il est assigné (comme par défaut) à false.

Mettre en place un premier timer avec un seuil de 2 secondes qui se remettra à zéro et recommencera à chronométrer à chaque fois que l’event sera déclenché. Tant que ce timer n’aura pas atteint 2 secondes, il empêchera l’événement (bounds_changed dans notre exemple) de se déclencher réellement parce que le flag restera à false. Ce qu’on cherche ici, c’est d’éviter qu’en cas de boucle, le code assigné au déclenchement de l’événement ne soit exécuté encore et encore et encore…

[Javascript] Utiliser la fonction map à l’intérieur d’une autre fonction

Source: How to use map function and arrow function inside another function?

Ou:

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