modern-javascript-patterns
Применение современных JavaScript паттернов
Устаревшие кодовые базы JavaScript сложно поддерживать и оптимизировать. Этот навык предоставляет исчерпывающее руководство по функциям ES6+, включая стрелочные функции, деструктуризацию, async/await, промисы, функциональные паттерны и современные возможности классов для написания чистого, эффективного и поддерживаемого JavaScript кода.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «modern-javascript-patterns». Как деструктурировать вложенные объекты в JavaScript?
Ожидаемый результат:
Вложенная деструктуризация объектов позволяет извлекать значения из глубоко вложенных объектов:
```javascript
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Boston',
country: 'USA'
}
};
// Вложенная деструктуризация
const {
name,
address: { city, country }
} = user;
console.log(city); // 'Boston'
console.log(country); // 'USA'
// С значениями по умолчанию
const {
address: {
city = 'Unknown',
zipCode = '00000'
} = {}
} = user;
```
Использование «modern-javascript-patterns». В чём разница между Promise.all и Promise.allSettled?
Ожидаемый результат:
Promise.all быстро падает - если любой промис отклоняется, вся операция завершается неудачей. Promise.allSettled ожидает завершения всех промисов независимо от результата:
```javascript
// Promise.all - падает при первом отклонении
const users = await Promise.all([
fetchUser(1),
fetchUser(2)
]); // Выбрасывает ошибку, если любой не выполняется
// Promise.allSettled - ждёт все
const results = await Promise.allSettled([
fetchUser(1),
fetchUser(2)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Успех:', result.value);
} else {
console.log('Ошибка:', result.reason);
}
});
```
Аудит безопасности
БезопасноThis 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.
Оценка качества
Что вы можете построить
Рефакторинг устаревших JavaScript кодовых баз
Мигрируйте код на колбэках на паттерны промисов и async/await. Замените традиционные функции на стрелочные функции для решения проблем привязки 'this'. Примените деструктуризацию и операторы расширения для упрощения манипуляций с данными.
Изучение функционального программирования на JavaScript
Поймите, как использовать map, filter и reduce для преобразования данных. Научитесь создавать чистые функции без побочных эффектов. Примените композицию функций и пайплайны для читаемых конвейеров обработки данных.
Написание поддерживаемого JavaScript кода
Применяйте современные JavaScript паттерны для более чистого и выразительного кода. Используйте правильную организацию модулей и возможности ES6 классов. Реализуйте оптимизацию производительности, такую как debouncing, throttling и ленивые вычисления.
Попробуйте эти промпты
Как использовать [функция] в современном JavaScript? Можете показать мне примеры для [сценарий использования]?
У меня есть такой устаревший JavaScript код: [фрагмент кода]. Как я могу рефакторить его, чтобы использовать современные ES6+ паттерны? Какие конкретные функции мне следует применить?
Мне нужно реализовать [конкретная асинхронная задача]. Следует ли мне использовать промисы, async/await или их комбинацию? Покажите мне лучший паттерн для [сценарий] с правильной обработкой ошибок.
У меня есть массив объектов: [структура данных]. Как я могу использовать функциональное программирование для [преобразовать/сгруппировать/отфильтровать/агрегировать] эти данные? Покажите мне пошагово, как compose-ить функции для этой задачи.
Лучшие практики
- По умолчанию используйте const и только тогда используйте let, когда переприсваивание действительно необходимо. Это предотвращает случайные мутации и делает намерение кода более понятным.
- Предпочитайте стрелочные функции для колбэков и методов, которым нужно лексическое связывание 'this'. Используйте традиционные функции только тогда, когда вам нужен динамический 'this'.
- Применяйте деструктуризацию и операторы расширения для более чистых манипуляций с данными. Избегайте прямого доступа к свойствам и мутаций, когда это возможно.
Избегать
- Избегайте оборачивания уже асинхронных функций в новые промисы. Если функция уже возвращает промис, используйте её напрямую с await.
- Не мутируйте входные данные в функциях. Всегда возвращайте новые объекты или массивы с использованием операторов расширения для поддержания иммутабельности.
- Избегайте пирамид колбэков и чрезмерного связывания промисов. Используйте async/await для лучшей читаемости и обработки ошибок.
Часто задаваемые вопросы
В чём разница между стрелочными функциями и традиционными функциями в JavaScript?
Когда следует использовать async/await, а когда промисы напрямую?
Как обрабатывать ошибки с async/await?
Какие преимущества даёт функциональное программирование в JavaScript?
Когда следует использовать деструктуризацию, а когда прямой доступ к свойствам?
Какие последствия для производительности имеют современные JavaScript функции?
Сведения для разработчиков
Автор
wshobsonЛицензия
MIT
Репозиторий
https://github.com/wshobson/agents/tree/main/plugins/javascript-typescript/skills/modern-javascript-patternsСсылка
main
Структура файлов
📄 SKILL.md