3 замечательных совета по JavaScript для ускорения разработки

0 217

Да, язык очень эффективен, но знание некоторых хорошо адаптированных приемов для определенных ситуаций — вот что отличает способного разработчика 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 () { … })

3 замечательных совета по JavaScript для ускорения разработки

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})

3 замечательных совета по JavaScript для ускорения разработки

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

Оставьте ответ

Ваш электронный адрес не будет опубликован.