CategoryJavascript

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

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

[Javascript] Vérifier qu’une chaîne de caractères string contient une sous-chaîne substring spécifique avec les méthodes includes ou indexOf

Source: en ES6 et pour Internet Explorer How to check whether a string contains a substring in JavaScript?

ES6

ES5 ou plus ancien (Internet Explorer)

Exemple in the field:

[Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur

Source: Removing elements from an array of objects based on duplicate values of multiple keys

[javascript] Les bases: les opérateurs

Ressources:

Exemple d’opérateurs: delete, &&, =, +, !, *, ||, typeof

Jargon

  • a = 10 « a » et « 10 » sont des operands ou des arguments.
  • Unary operators: un opérateur qui n’a qu’un seul argument:

  • Binary operators: un opérateur qui a 2 arguments:

Notation

Infix notation

Opérateur est déclaré ENTRE 2 operands/arguments:

Prefix notation

Opérateur est déclaré AVANT l’operand/argument:

Postfix notation

Opérateur est déclaré APRES l’operand/argument:

Demo:

Opérateurs de comparaison

<, <=, >, <=, ==, !=, ===, !==

Opérateurs logiques (logical operators)

and, or, not

Cas pratiques

[javascript] Les bases: les fonctions

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

=> variable à laquelle est assignée une « function expression »

Function expression as argument in the function call

=> callback function

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode setInterval()

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes setInterval(), clearInterval() et setTimeout()

[JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!

Sources:

[CSS][javaScript] Styler les barres de défilement (scrollbar) du navigateur

Ressources:


La barre de défilement est un élément d’UI propre à chaque OS et navigateur. L’aspect visible sur la maquette est celui d’un OS Mac et du navigateur Safari.

Tu peux faire un test en ouvrant la page suivante sous plusieurs navigateurs et en déroulant la 1ère liste de sélection: https://ng-select.github.io/ng-select#/data-sources

Changer l’aspect de cet élément se révèle faisable dans certains cas (pas tous!) et peut poser de gros soucis de performances suivant la solution choisie.
Je vois trois solutions:

  1. Solution reposant uniquement sur CSS: c’est la plus propre, la plus légère et elle ne devrait pas poser de problèmes de performances. C’est de loin la plus rapide à mettre en place et la plus fiable (enfin… sauf si tu choisis la solution 3).
    Problème: ça fonctionnera seulement avec les dernières versions de Chrome et Safari (supports mobile et desktop) et pas avec Firefox, IE, Edge, etc… qui conserveront l’aspect natif.
  2. Solution reposant sur javaScript: cela reviendrait à mettre en place du code sâle, lourd et à s’exposer à des problèmes de performances sans pour autant garantir que l’affichage sera parfait sur tous les navigateurs.
    Il faut également ajouter que les scripts que j’ai vu fonctionnent avec le contenu qui s’affiche au 1er chargement de la page et pas forcément avec du contenu qui se régénère à la volée comme cela se produit dans une application Angular.
  3. La solution que je préconise: accepter que chaque OS et navigateur puisse avoir une scrollbar différente et ne rien toucher.
    En soi, la scrollbar de la maquette n’a pas fait l’objet d’une attention particulière en terme de design. Elle est ainsi parce que la maquette a été réalisée sous Mac.

Source: https://stackoverflow.com/a/14150577/1662176

[javaScript] Un accordéon avec l’attribut HTML onClick

Problème: les composants Accordéon de Bootstrap et Foundation font lagguer l’affichage sur des pages longues (lorsqu’ils sont initialisés trop de fois).

Solution: ne pas les utiliser, mais préférer une petite fonction « ouvrir/fermer » qui s’active via un onClick="$(this).<ma_fonction>();" placé sur l’élément qui déclanche l’ouverture/fermeture.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑