CategoryJavascript

[JavaScript] Exécuter une fonction seulement une fois

js/utils.js:

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

[javaScript] Quelques expressions régulières (Regex) utiles

Source: Regex match string until whitespace Javascript.

Une regex qui extrait, à partir d’une chaîne de caractères de type level1 nav-1-1 category-item first active parent is-submenu-item is-drilldown-submenu-item la classe qui commence par nav- et se termine au prochain espacement (whitespace):

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

Source: Pure JS equivalent of Jquery eq().

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

Source: Ondragstart Attribute doesn’t appear when created dynamically.

En essayant de convertir la génération d’un élément TD dans le DOM avec jQuery en code vanilla JS, je me suis heurté aux erreurs suivantes:

Uncaught TypeError: Cannot read property ‘getData’ of undefined
Uncaught TypeError: Cannot read property ‘setData’ of undefined

Le code jquery de départ:

Version vanilla JS/ES6

On commence par créer l’élément TD:

Puis on lui assigne de multiples attributs (id, title, class) (source: Setting multiple attributes for an element at once with JavaScript):

(pour n’ajouter qu’un seul attribut: $row.setAttribute("class", "is-row");)

Mais pour ajouter des attributs relatifs à des événements (ondrop, ondragover, …), il faut utiliser la méthode addEventListener:

[Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild

Source: Pure JavaScript alternative to jQuery’s .remove()

Instruction initiale (en jQuery):

Boucle for:

Sous forme de fonction

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Attention: l’article et le code ci-dessous ne sont valables qu’au document ready. Ceci signifie qu’au chargement de la page seulement, on va vérifier la disponibilité d’un ou plusieurs éléments dans le DOM. Les sources ne concernent pas l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Pour cette deuxième fonctionnalité, se référer à la documentation de Mutation Observer sur developer.mozilla.org et un exemple d’utilisation ici: [Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur.

Source: Using Mutation Observers to Watch for Element Availability. Code source sous GIT. Version PDF pour la postérité.

[RequireJS] Astuces, bonnes pratiques

Apprendre les bases

Doc officielle

La documentation officielle de RequireJS avec un chapitre sur les erreurs les plus communes.

Tutoriels

RequireJS et le code JavaScript modulaire (tutoriel en français).

Tuto très clair de codedamn sur YouTube et code source. Permet d’aborder les bases avec:

  • Le fichier de config
  • La fonction require
  • La fonction define
  • AMD et les modules

Troubleshooting

La console me remonte cette erreur: require.js:166 Uncaught Error: Mismatched anonymous define(): dans le code source, remplacer define par require!

[javascript] Importer des breakpoints CSS

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

© 2021 devfrontend.info

Theme by Anders NorénUp ↑