Schreiben Sie saubereren, besser wartbaren JavaScript-Code mit ES6+-Features wie async/await, Destructuring, Spread-Operatoren und funktionalen Programmiermustern.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "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)); }
Erwartetes Ergebnis:
Refactored async/await version:
async function getData(id) {
try {
const res = await fetch(`/api/${id}`);
const data = await res.json();
return data;
} catch (err) {
throw err;
}
}
Benefits:
- Cleaner, synchronous-looking code
- Better error handling with try/catch
- Easier to debug and maintain
Verwendung von "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;
Erwartetes Ergebnis:
Refactored with destructuring:
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;
Or with renaming:
const { name: userName, address: { city: userCity } } = user;
Sicherheitsaudit
SicherAll 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.
Probleme mit hohem Risiko (1)
Probleme mit mittlerem Risiko (2)
Probleme mit niedrigem Risiko (2)
Qualitätsbewertung
Was du bauen kannst
Modernisierung von Legacy-Code
Refactoring von älterem, callback-basiertem JavaScript-Code zur Verwendung von Promises und async/await für bessere Lesbarkeit und Fehlerbehandlung.
Lernen von modernem JavaScript
Verstehen und Anwenden von ES6+-Features wie Destructuring, Spread-Operatoren und Modulen, um ausdruckskräftigeren Code zu schreiben.
Verbesserung bei Code-Reviews
Anwendung moderner JavaScript-Muster während Code-Reviews, um sauberere, besser wartbare Implementierungen vorzuschlagen.
Probiere diese Prompts
Konvertieren Sie diese callback-basierte JavaScript-Funktion zur Verwendung von async/await-Syntax. Zeigen Sie den Code vorher und nachher. [Callback-Code hier einfügen]
Refaktorieren Sie diesen JavaScript-Code zur Verwendung von Objekt- und Array-Destructuring. Machen Sie den Code prägnanter und lesbarer. [Code mit verschachtelten Eigenschaften oder Arrays hier einfügen]
Transformieren Sie diesen imperativen JavaScript-Code zur Verwendung funktionaler Programmierung mit map, filter und reduce. Zeigen Sie einen verkettbaren Pipeline-Ansatz. [Schleifen-basierten Transformationscode hier einfügen]
Zeigen Sie mir, wie man Lazy Loading mit dynamischem import() für dieses Feature-Modul implementiert. Einschließlich Fehlerbehandlung und bedingter LadeLogik.
Bewährte Verfahren
- Verwenden Sie standardmäßig const, let nur wenn eine Neuzuweisung erforderlich ist
- Bevorzugen Sie Arrow-Funktionen für Callbacks, um this-Binding-Probleme zu vermeiden
- Verwenden Sie async/await statt Promise-Ketten für bessere Lesbarkeit
Vermeiden
- Verwendung von var statt const/let - fehlende Block-Scope
- Callback-Hölle mit verschachtelten anonymen Funktionen
- Direkte Mutation von Objekten statt Verwendung von unveränderlichen Mustern
Häufig gestellte Fragen
Was ist der Unterschied zwischen let und const?
Wann sollte ich async/await statt Promises verwenden?
Was ist Destructuring in JavaScript?
Was sind die Vorteile von Arrow-Funktionen?
Wofür wird der Spread-Operator verwendet?
Wie helfen dynamische Imports der Leistung?
Entwicklerdetails
Autor
sickn33Lizenz
MIT
Repository
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patternsRef
main
Dateistruktur