Écrivez du JavaScript plus propre et plus maintenable en utilisant les fonctionnalités ES6+ comme async/await, la déstructuration, les opérateurs de propagation et les motifs de programmation fonctionnelle.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "modern-javascript-patterns". Convert this callback to async/await: function getData(id, callback) { fetch('/api/' + id) .then(res => res.json()) .then(data => callback(null, data)) .catch(err => callback(err)); }
Résultat attendu:
Version refactorisée avec async/await :
async function getData(id) {
try {
const res = await fetch(`/api/${id}`);
const data = await res.json();
return data;
} catch (err) {
throw err;
}
}
Avantages :
- Code plus propre, à l'apparence synchrone
- Meilleure gestion des erreurs avec try/catch
- Plus facile à déboguer et maintenir
Utilisation de "modern-javascript-patterns". Apply destructuring to this code: const user = { name: 'John', age: 30, address: { city: 'NYC' } }; const name = user.name; const city = user.address.city;
Résultat attendu:
Refactorisé avec déstructuration :
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;
Ou avec renommage :
const { name: userName, address: { city: userCity } } = user;
Audit de sécurité
SûrAll 89 static findings are FALSE POSITIVES. The scanner misinterprets JavaScript code examples in markdown documentation as security risks. Backticks in code blocks are not shell commands. References to fetch() and dynamic import() are legitimate ES6+ patterns being taught. This is a safe educational skill about modern JavaScript patterns.
Problèmes à risque élevé (1)
Problèmes à risque moyen (2)
Problèmes à risque faible (2)
Score de qualité
Ce que vous pouvez construire
Modernisation de Code Legacy
Refactorisez du code JavaScript plus ancien basé sur des callbacks pour utiliser Promises et async/await pour une meilleure lisibilité et gestion des erreurs.
Apprentissage du JavaScript Moderne
Comprenez et appliquez les fonctionnalités ES6+ comme la déstructuration, les opérateurs de propagation et les modules pour écrire du code plus expressif.
Améliorations de Revue de Code
Appliquez des motifs JavaScript modernes lors des revues de code pour suggérer des implémentations plus propres et plus maintenables.
Essayez ces prompts
Convertissez cette fonction JavaScript basée sur un callback pour utiliser la syntaxe async/await. Montrez le code avant et après. [Insérez le code callback ici]
Refactorisez ce code JavaScript pour utiliser la déstructuration d'objets et de tableaux. Rendez le code plus concis et lisible. [Insérez le code avec des propriétés imbriquées ou des tableaux ici]
Transformez ce code JavaScript impératif pour utiliser la programmation fonctionnelle avec map, filter et reduce. Montrez une approche de pipeline chaînable. [Insérez le code de transformation basé sur des boucles ici]
Montrez-moi comment implémenter le chargement paresseux avec dynamic import() pour ce module de fonctionnalité. Incluez la gestion des erreurs et la logique de chargement conditionnel.
Bonnes pratiques
- Utilisez const par défaut, let uniquement quand une réassignation est nécessaire
- Préférez les fonctions fléchées pour les callbacks pour éviter les problèmes de liaison this
- Utilisez async/await plutôt que les chaînes de Promises pour une meilleure lisibilité
Éviter
- Utiliser var au lieu de const/let - manque le scope de bloc
- Callback hell avec des fonctions anonymes imbriquées
- Mutation directe des objets au lieu d'utiliser des motifs immuables
Foire aux questions
Quelle est la différence entre let et const ?
Quand dois-je utiliser async/await plutôt que les Promises ?
Qu'est-ce que la déstructuration en JavaScript ?
Quels sont les avantages des fonctions fléchées ?
À quoi sert l'opérateur de propagation ?
Comment les imports dynamiques améliorent-ils les performances ?
Détails du développeur
Auteur
sickn33Licence
MIT
Dépôt
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patternsRéf
main
Structure de fichiers