3 замечательных совета по JavaScript для ускорения разработки
Да, язык очень эффективен, но знание некоторых хорошо адаптированных приемов для определенных ситуаций — вот что отличает способного разработчика JavaScript, и для того, чтобы использовать эти приемы, требуется многолетний опыт. Итак, вот 3 моих любимых и довольно полезных JavaScript-трюка, которые позволяют сэкономить время.
1. Создание асинхронного контекста
Содержание статьи:
Обработка асинхронных событий в JavaScript немного сбивает с толку, особенно для новичков, потому что это напрямую связано с промисами, и, говоря простым языком, выполнение кода контролируется разработчиком. До ES6 (2015) асинхронный код нужно было обрабатывать следующим образом:
JavaScript promise .then(function () { … }) .catch(function () { … }) .then(function () { … }) .catch(function () { … })
| 12345 | promise .then(function () { … }) .catch(function () { … }) .then(function () { … }) .catch(function () { … }) |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Тем не менее, в ES6, введено новое и очень полезное ключевое слово: await. Используя его, вы можете просто дождаться завершения любой асинхронной задачи и продолжить выполнение. Все идеально, кроме одной оговорки. Await должно быть использовано в функции async и не может быть использовано в глобальном масштабе. Поэтому, мы будем использовать IIFE для имитации асинхронного контекста глобального уровня, в котором мы можем использовать await где угодно.
JavaScript let data (async () => { // This is the asynchronous context that you can use await const res = await fetch(“https ://google.com/mcdkncjs”) data = await res.json() })(); console.log(data)
| 1234567891011 | let data (async () => { // This is the asynchronous context that you can use await const res = await fetch(“https ://google.com/mcdkncjs”) data = await res.json() })(); console.log(data) |
2. Именованные аргументы функций
Обычно, когда вы определяете функцию, у вас есть параметры, которые можно передать при вызове. Вы разделяете их запятой (,) и передаете один за другим. Это совершенно нормально, если у вас мало параметров и отличная IDE или текстовый редактор с IntelliSense. Но если нет, то вы должны запомнить все параметры в определенном порядке.
JavaScript createUser(name, surname, 1542, 21, true)
| 1 | createUser(name, surname, 1542, 21, true) |
Тем не менее, с небольшой помощью ES6, мы можем создавать функции с именованными параметрами, которые легче читать и писать. Вместо того, чтобы передавать параметры один за другим, мы можем передать один объект аргумента, который содержит все параметры, так что нам не нужно запоминать порядок. Кроме того, в функции мы можем деструктурировать объект и получить параметры индивидуально.
JavaScript // Declare the function using destructured parameters. function createUser({ name, surname, id, age, isForeigner }) { … } // Then you can pass an object of parameters createUser({ name, surname, id: 1542, age: 21, isForeigner: true })
| 1234567891011121314151617 | // Declare the function using destructured parameters.function createUser({ name, surname, id, age, isForeigner}) { … } // Then you can pass an object of parameterscreateUser({ name, surname, id: 1542, age: 21, isForeigner: true}) |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
3. Функциональная оболочка для блоков Try / Catch
По мере того, как async/await становится все более популярным, использование catch уменьшается; вот почему разработчики начали использовать блоки try/catch для обработки ошибок в асинхронных функциях.
JavaScript try { var quote = await getQuote(); console.log(quote); catch (error) { console.error(error); }
| 123456 | try { var quote = await getQuote(); console.log(quote);catch (error) { console.error(error);} |
Но было бы здорово, если бы у нас была функция, которая возвращает ошибку или результат в зависимости от успеха без каких-либо отступов? Именно это мы и будем реализовывать. Оборачиваем блок try/catch функцией; затем используем его для обнаружения ошибок без отступов.
Функция обработки ошибок будет асинхронной функцией, поскольку мы хотим использовать await внутри и принимать другую асинхронную функцию в качестве аргумента. Затем, в зависимости от успеха функции, будет возвращен результат или ошибка.
JavaScript const handled = async (asyncFunc) => { try { const res = await asyncFunc(); return [null, res]; } catch (error) { return [error, null] } }
| 12345678 | const handled = async (asyncFunc) => { try { const res = await asyncFunc(); return [null, res]; } catch (error) { return [error, null] }} |
С помощью функции handled вы можете обрабатывать ошибки на том же уровне отступа, что и await. Все, что вам нужно сделать, это обернуть асинхронную функцию handled и деструктурировать как ответ, так и ошибку.
JavaScript const [error, res] = await handled(asyncFunc)
| 1 | const [error, res] = await handled(asyncFunc) |
Отличная работа! Теперь вы знаете три чудесных JavaScript-трюка, которые я использую ежедневно, чтобы облегчить себе жизнь, и я думаю, вы тоже найдете им применение. Спасибо за чтение.
Автор: Can Durmus
Источник: webformyself.com