Фронтендщик
رفتن به کانال در Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
نمایش بیشتر1 068
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-27 روز
-1330 روز
در حال بارگیری داده...
کانال‌های مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '260
در 0 کانال‌ها
سپتامبر '26
+1
در 0 کانال‌ها
Get PRO
اوت '26
+1
در 0 کانال‌ها
Get PRO
ژوئیه '26
+1
در 0 کانال‌ها
Get PRO
ژوئن '260
در 1 کانال‌ها
Get PRO
مه '260
در 0 کانال‌ها
Get PRO
آوریل '260
در 1 کانال‌ها
Get PRO
مارس '26
+1
در 0 کانال‌ها
Get PRO
فوریه '26
+1
در 0 کانال‌ها
Get PRO
ژانویه '260
در 0 کانال‌ها
Get PRO
دسامبر '25
+1
در 0 کانال‌ها
Get PRO
نوامبر '25
+1
در 0 کانال‌ها
Get PRO
اکتبر '250
در 0 کانال‌ها
Get PRO
سپتامبر '25
+7
در 0 کانال‌ها
Get PRO
اوت '25
+1
در 0 کانال‌ها
Get PRO
ژوئیه '25
+2
در 0 کانال‌ها
Get PRO
ژوئن '25
+1
در 0 کانال‌ها
Get PRO
مه '250
در 0 کانال‌ها
Get PRO
آوریل '25
+1
در 0 کانال‌ها
Get PRO
مارس '25
+6
در 0 کانال‌ها
Get PRO
فوریه '25
+4
در 0 کانال‌ها
Get PRO
ژانویه '25
+2
در 0 کانال‌ها
Get PRO
دسامبر '240
در 1 کانال‌ها
Get PRO
نوامبر '24
+1
در 0 کانال‌ها
Get PRO
اکتبر '24
+1
در 0 کانال‌ها
Get PRO
سپتامبر '24
+2
در 0 کانال‌ها
Get PRO
اوت '24
+2
در 0 کانال‌ها
Get PRO
ژوئیه '24
+3
در 0 کانال‌ها
Get PRO
ژوئن '24
+3
در 0 کانال‌ها
Get PRO
مه '24
+4
در 0 کانال‌ها
Get PRO
آوریل '24
+3
در 0 کانال‌ها
Get PRO
مارس '24
+3
در 0 کانال‌ها
Get PRO
فوریه '24
+3
در 1 کانال‌ها
Get PRO
ژانویه '24
+2
در 0 کانال‌ها
Get PRO
دسامبر '23
+3
در 0 کانال‌ها
Get PRO
نوامبر '23
+4
در 0 کانال‌ها
Get PRO
اکتبر '23
+3
در 0 کانال‌ها
Get PRO
سپتامبر '23
+8
در 0 کانال‌ها
Get PRO
اوت '23
+4
در 0 کانال‌ها
Get PRO
ژوئیه '23
+14
در 0 کانال‌ها
Get PRO
ژوئن '23
+6
در 0 کانال‌ها
Get PRO
مه '23
+8
در 0 کانال‌ها
Get PRO
آوریل '23
+41
در 0 کانال‌ها
Get PRO
مارس '23
+6
در 0 کانال‌ها
Get PRO
فوریه '23
+9
در 0 کانال‌ها
Get PRO
ژانویه '23
+17
در 0 کانال‌ها
Get PRO
دسامبر '22
+177
در 0 کانال‌ها
Get PRO
نوامبر '22
+142
در 0 کانال‌ها
Get PRO
اکتبر '22
+26
در 0 کانال‌ها
Get PRO
سپتامبر '22
+328
در 0 کانال‌ها
Get PRO
اوت '22
+1 290
در 0 کانال‌ها
Get PRO
ژوئیه '22
+106
در 0 کانال‌ها
Get PRO
ژوئن '22
+2
در 0 کانال‌ها
Get PRO
مه '220
در 0 کانال‌ها
Get PRO
آوریل '220
در 0 کانال‌ها
Get PRO
مارس '220
در 0 کانال‌ها
Get PRO
فوریه '220
در 0 کانال‌ها
Get PRO
ژانویه '220
در 0 کانال‌ها
Get PRO
دسامبر '210
در 0 کانال‌ها
Get PRO
نوامبر '21
+1
در 0 کانال‌ها
Get PRO
اکتبر '21
+1
در 0 کانال‌ها
Get PRO
سپتامبر '21
+4
در 0 کانال‌ها
Get PRO
اوت '210
در 0 کانال‌ها
Get PRO
ژوئیه '210
در 0 کانال‌ها
Get PRO
ژوئن '21
+1
در 0 کانال‌ها
Get PRO
مه '210
در 0 کانال‌ها
Get PRO
آوریل '21
+3
در 0 کانال‌ها
Get PRO
مارس '21
+2
در 0 کانال‌ها
Get PRO
فوریه '210
در 0 کانال‌ها
Get PRO
ژانویه '21
+1
در 0 کانال‌ها
Get PRO
دسامبر '20
+1 226
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 09 اکتبر | 0 | |||
| 08 اکتبر | 0 | |||
| 07 اکتبر | 0 | |||
| 06 اکتبر | 0 | |||
| 05 اکتبر | 0 | |||
| 04 اکتبر | 0 | |||
| 03 اکتبر | 0 | |||
| 02 اکتبر | 0 | |||
| 01 اکتبر | 0 |
پست‌های کانال
Промис представляет собой объект, в который параметром передается функция, внутри которой нужно размещать наш асинхронный код:
let promise = new
Promise(function()
{
// асинхронный код
});
📌 #instr || Фронтендщик
| 2 | Введение в промисы в JavaScript
Вы уже знаете, что использование коллбэк-модели асинхронности легко приводит к ситуации callback hell. Поэтому в JavaScript была введена новая модель под названием промисы (promise). Давайте изучим эту модель.
📌 #instr || Фронтендщик | 17 |
| 3 | Код получился красивый и без callback hell, однако, мы вернулись к двум нашим проблемам: порядок картинок не гарантирован и невозможно поймать момент загрузки всех картинок.
И решения в данной ситуации нет: невозможно запустить цикл, использовать внутри него асинхронную функцию, а потом поймать момент завершения всех функций цикла. Либо вам не нужно ловить этот момент и приведенный выше код вам подойдет либо добро пожаловать в callback hell.
📌 #instr || Фронтендщик | 18 |
| 4 | Асинхронная загрузка картинок в цикле в JavaScript
Пусть пути к картинкам хранятся в массиве:
let arr = ['img1.png',
'img2.png',
'img3.png'];
Мы можем загрузить эти картинки в цикле:
for (let path of arr) {
loadImage(path, function(image,
err) {
document.body.append(image);
});
}
📌 #instr || Фронтендщик | 16 |
| 5 | Мы решили обе описанные проблемы. Однако, получили взамен другую. Пока она еще не сильно видна, но представьте себе, как будет выглядеть наш код, если в нем будет загрузка не трех, а, скажем, десяти картинок, плюс будет добавлена обработка исключений. В результате код станет крайне нечитаемым: сложность кода лавинообразно нарастает при вложенности коллбэков друга. Такая ситуация называется callback hell - ад коллбэков.
📌 #instr || Фронтендщик | 15 |
| 6 | Окей, переделаем код:
loadImage('img1.png',
function(image1,
err1) {
document.body.append(image1);
loadImage('img2.png',
function(image2,
err2) {
document.body.append(image2);
loadImage('img3.png',
function(image3,
err3) {
document.body.append(image3);
console.log('все
картинки
загружены');
});
});
});
📌 #instr || Фронтендщик | 17 |
| 7 | С этим кодом кое-что не так. Дело в том, что картинки будут добавляться в bodyпо мере их загрузки. To есть никто не гарантирует нам, что картинки будут добавлены именно в том порядке, который нам нужен.
Есть еще кое-что. Пусть мы хотим сделать что-нибудь, когда будут загружены все три картинки. В нашем коде мы просто не сможем поймать этот момент, так как все три картинки грузятся независимо.
📌 #instr || Фронтендщик | 17 |
| 8 | Проблема callback hell в JavaScript
Пусть мы хотим с помощью функцииloadImage загрузить три картинки:
loadImage('img1.png',
function(image,
err) {
document.body.append(image);
});
loadImage('img2.png',
function(image,
err) {
document.body.append(image);
});
loadImage('img3.png',
function(image,
err) {
document.body.append(image);
});
📌 #instr || Фронтендщик | 20 |
| 9 |  Либо с обработкой исключительной ситуации:
loadImage('image.png',
function(image,
err) {
if (!err) {
document.body.append(image);
} else {
console.log('произошла
ошибка: '
+ err);
}
});
📌 #instr || Фронтендщик | 21 |
| 10 | Мы можем использовать нашу функцию следующим образом:
loadImage('image.png',
function(image,
err) {
document.body.append(image);
// разместим картинку по
загрузке
});
📌 #instr || Фронтендщик | 24 |
| 11 | Пусть в первый параметр нашего коллбэка попадает ссылка на DOM элемент картинки, а во второй - ошибка, если произойдет исключительная ситуация:
loadImage('img.png',
function(image,
err) {
console.log(image, err);
});
📌 #instr || Фронтендщик | 23 |
| 12 | Загрузка картинок через асинхронные коллбэки в JavaScript
Давайте реализуем функцию loadImage, которая будет загружать картинки. Пусть первым параметром эта функция принимает путь к картинке, а вторым - коллбэк, который выполнится, когда картинка будет загружена:
loadImage('img.png',
function() {
// выполнится по загрузке
картинки
});
📌 #instr || Фронтендщик | 18 |
| 13 |  Давайте переделаем код нашей функцииmake в соответствии с описанным:
function make(num, callback) {
setTimeout(function() {
let arr = [1, 2, 3, 4, 5];
let err;
if (arr[num] ===
undefined) {
err = 'elem not exists';
// текст ошибки
} else {
err = null; // ошибки нет
}
callback(arr[num], err);
}, 3000);
}
📌 #instr || Фронтендщик | 17 |
| 14 | В коллбэк-подходе с исключениями работают следующим образом: в первый параметр коллбэка отправляют результат, а во второй - ошибку. В этом случае обработка ошибок происходит следующим образом:
make(10, function(res, err) {
if (!err) {
console.log(res);
// ошибки не возникло,
выведем результат
} else {
console.log(err);
// ошибка возникла,
выведем ее текст
}
});
📌 #instr || Фронтендщик | 26 |
| 15 | В нашем случае исключение, возникшее внутриmake или коллбэка, не будет поймано:
try {
make(10, function(res) {
console.log(res);
});
} catch(err) {
// не поймается
}
📌 #instr || Фронтендщик | 21 |
| 16 | Иключения в асинхронных коллбэках в JavaScript
Пусть, если параметром make передан номер несуществующего элемента массива - это исключительная ситуация. Как вы уже знаете, исключения, возникшие внутри асинхронной функции, не могут быть пойманы через try-catch.
📌 #instr || Фронтендщик | 18 |
| 17 |  Для примера давайте получим третий элемент массива:
make(3, function(res) {
console.log(res); // третий
элемент массива
});
Давайте переделаем код нашей функции make в соответствии с описанным:
function make(num, callback) {
setTimeout(function() {
let arr = [1, 2, 3, 4, 5];
callback(arr[num]);
// результатом передаем элемент
массива
}, 3000);
}
📌 #instr || Фронтендщик | 16 |
| 18 | Передача параметров в асинхронный коллбэк в JavaScript
Сделаем теперь так, чтобы в асинхронную функцию можно было передавать входные параметры. Пусть для примера в качестве первого параметра функции make мы будем передавать номер того элемента массива, который мы хотим получить в качестве результата.
📌 #instr || Фронтендщик | 19 |
| 19 |  Теперь, при передаче коллбэка в вызов функции make мы можем написать в нем параметр - и в этот параметр попадет результат асинхронной операции:
make(function(res) {
console.log(res); // наш
массив
});
📌 #instr || Фронтендщик | 19 |
| 20 | Сделаем так, чтобы массив с результатом передавался в параметр коллбэка:
function make(callback) {
setTimeout(function() {
let res = [1, 2, 3, 4, 5];
callback(res); // передаем
результат
параметром
}, 3000);
}
📌 #instr || Фронтендщик | 16 |
