Пишите более чистый и поддерживаемый код JavaScript, используя возможности ES6+: async/await, деструктуризацию, spread-операторы и паттерны функционального программирования.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «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)); }
Ожидаемый результат:
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;
}
}
Преимущества:
- Более чистый код, выглядящий синхронно
- Лучшая обработка ошибок с try/catch
- Проще отлаживать и поддерживать
Использование «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;
Ожидаемый результат:
Refactored with destructuring:
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;
Или с переименованием:
const { name: userName, address: { city: userCity } } = user;
Аудит безопасности
БезопасноAll 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.
Проблемы высокого риска (1)
Проблемы среднего риска (2)
Проблемы низкого риска (2)
Оценка качества
Что вы можете построить
Модернизация устаревшего кода
Рефакторинг старого JavaScript-кода с callback-функциями для использования Promises и async/await для улучшения читаемости и обработки ошибок.
Изучение современного JavaScript
Понимание и применение возможностей ES6+: деструктуризация, spread-операторы и модули для написания более выразительного кода.
Улучшение code review
Применение современных паттернов JavaScript во время code review для предложения более чистых и поддерживаемых реализаций.
Попробуйте эти промпты
Конвертируйте эту функцию JavaScript с callback-функцией в синтаксис async/await. Покажите код до и после. [Вставьте callback-код сюда]
Рефакторьте этот JavaScript-код для использования деструктуризации объектов и массивов. Сделайте код более лаконичным и читаемым. [Вставьте код с вложенными свойствами или массивами сюда]
Преобразуйте этот императивный JavaScript-код для использования функционального программирования с map, filter и reduce. Покажите подход с цепочкой вызовов. [Вставьте код преобразования на основе циклов сюда]
Покажите, как реализовать ленивую загрузку с помощью динамического import() для этого функционального модуля. Включите обработку ошибок и логику условной загрузки.
Лучшие практики
- Используйте const по умолчанию, let только когда нужна переназначение
- Предпочитайте стрелочные функции для callback-функций, чтобы избежать проблем с this binding
- Используйте async/await вместо цепочек Promises для лучшей читаемости
Избегать
- Использование var вместо const/let - нет блочной области видимости
- Callback hell с вложенными анонимными функциями
- Прямая мутация объектов вместо использования неизменяемых паттернов
Часто задаваемые вопросы
В чём разница между let и const?
Когда использовать async/await вместо Promises?
Что такое деструктуризация в JavaScript?
Какие преимущества у стрелочных функций?
Для чего используется spread-оператор?
Как динамические импорты помогают производительности?
Сведения для разработчиков
Автор
sickn33Лицензия
MIT
Репозиторий
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patternsСсылка
main
Структура файлов