modern-javascript-patterns
Appliquer les Patterns JavaScript Modernes
Les bases de code JavaScript héritées sont difficiles à maintenir et à optimiser. Cette compétence fournit des conseils complets sur les fonctionnalités ES6+ incluant les fonctions fléchées, la déstructuration, async/await, les promesses, les patterns de programmation fonctionnelle et les fonctionnalités de classe modernes pour écrire du code JavaScript propre, efficace et maintenable.
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". Comment déstructurer des objets imbriqués en JavaScript ?
Résultat attendu:
La déstructuration d'objets imbriqués vous permet d'extraire des valeurs d'objets profondément imbriqués :
```javascript
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Boston',
country: 'USA'
}
};
// Déstructuration imbriquée
const {
name,
address: { city, country }
} = user;
console.log(city); // 'Boston'
console.log(country); // 'USA'
// Avec valeurs par défaut
const {
address: {
city = 'Unknown',
zipCode = '00000'
} = {}
} = user;
```
Utilisation de "modern-javascript-patterns". Quelle est la différence entre Promise.all et Promise.allSettled ?
Résultat attendu:
Promise.all échoue rapidement - si une promesse est rejetée, toute l'opération échoue. Promise.allSettled attend que toutes les promesses se résolvent quel que soit le résultat :
```javascript
// Promise.all - échoue au premier rejet
const users = await Promise.all([
fetchUser(1),
fetchUser(2)
]); // Lance une erreur si l'une échoue
// Promise.allSettled - attend toutes
const results = await Promise.allSettled([
fetchUser(1),
fetchUser(2)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Success:', result.value);
} else {
console.log('Failed:', result.reason);
}
});
```
Audit de sécurité
SûrThis is a documentation skill containing educational content about JavaScript ES6+ patterns. All static analysis findings are false positives. The 'weak cryptographic algorithm' flags are triggered by JavaScript template literals and class private field syntax (#). The 'shell backtick execution' flags are false positives from JavaScript template literals in code examples. The 'dynamic import()' detections are legitimate ES6 module examples being documented. No malicious code patterns exist.
Score de qualité
Ce que vous pouvez construire
Refactoriser les Bases de Code JavaScript Héritées
Migrer le code basé sur les callbacks vers les Promises et les patterns async/await. Remplacer les fonctions traditionnelles par des fonctions fléchées pour corriger les problèmes de liaison 'this'. Appliquer la déstructuration et les opérateurs de spread pour simplifier la manipulation de données.
Apprendre la Programmation Fonctionnelle en JavaScript
Comprendre comment utiliser map, filter et reduce pour la transformation de données. Apprendre à créer des fonctions pures qui évitent les effets de bord. Appliquer la composition et le piping de fonctions pour des pipelines de traitement de données lisibles.
Écrire du Code JavaScript Maintenable
Appliquer les patterns JavaScript modernes pour un code plus propre et plus expressif. Utiliser une organisation modulaire appropriée et les fonctionnalités de classe ES6. Implémenter des optimisations de performance comme le debouncing, le throttling et l'évaluation paresseuse.
Essayez ces prompts
Comment utiliser [feature] en JavaScript moderne ? Pouvez-vous me montrer des exemples de [use case] ?
J'ai ce code JavaScript hérité : [code snippet]. Comment puis-je le refactoriser pour utiliser les patterns ES6+ modernes ? Quelles fonctionnalités spécifiques devrais-je appliquer ?
Je dois implémenter [specific async task]. Devrais-je utiliser les Promises, async/await ou une combinaison ? Montrez-moi le pattern de bonne pratique pour [scenario] avec une gestion appropriée des erreurs.
J'ai un tableau d'objets : [data structure]. Comment puis-je utiliser la programmation fonctionnelle pour [transform/group/filter/aggregate] ces données ? Montrez-moi étape par étape comment composer des fonctions pour cette tâche.
Bonnes pratiques
- Utilisez const par défaut et utilisez let uniquement lorsque la réaffectation est vraiment nécessaire. Cela empêche les mutations accidentelles et clarifie l'intention du code.
- Préférez les fonctions fléchées pour les callbacks et les méthodes qui nécessitent une liaison lexicale 'this'. Utilisez les fonctions traditionnelles uniquement lorsque vous avez besoin d'un 'this' dynamique.
- Appliquez la déstructuration et les opérateurs de spread pour une manipulation de données plus propre. Évitez l'accès direct aux propriétés et la mutation lorsque c'est possible.
Éviter
- Évitez d'encapsuler des fonctions déjà asynchrones dans de nouvelles Promises. Si une fonction retourne déjà une Promise, utilisez-la directement avec await.
- Ne mutez pas les données d'entrée dans les fonctions. Retournez toujours de nouveaux objets ou tableaux en utilisant les opérateurs de spread pour maintenir l'immutabilité.
- Évitez les pyramides de callbacks et le chaînage excessif de Promises. Utilisez async/await pour une meilleure lisibilité et gestion des erreurs.