Фронтендщик
الذهاب إلى القناة على Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
إظهار المزيد1 067
المشتركون
لا توجد بيانات24 ساعات
-27 أيام
-1130 أيام
جاري تحميل البيانات...
القنوات المماثلة
![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 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 10 أكتوبر | 0 | |||
| 09 أكتوبر | 0 | |||
| 08 أكتوبر | 0 | |||
| 07 أكتوبر | 0 | |||
| 06 أكتوبر | 0 | |||
| 05 أكتوبر | 0 | |||
| 04 أكتوبر | 0 | |||
| 03 أكتوبر | 0 | |||
| 02 أكتوبر | 0 | |||
| 01 أكتوبر | 0 |
منشورات القناة
С помощью функции завершения мы можем явно указать промису, что асинхронный код завершился. Для этого мы должны вызвать эту функцию в нужном нам месте:
let promise = new
Promise(function(resolve) {
setTimeout(function() {
let result = [1, 2,
3, 4, 5];
resolve(); // завершаем
промис
}, 3000);
});
📌 #instr || Фронтендщик
| 2 | С помощью функции завершения мы можем явно указать промису, что асинхронный код завершился. Для этого мы должны вызвать эту функцию в нужном нам месте:
let promise = new
Promise(function(resolve) {
setTimeout(function() {
let result = [1, 2,
3, 4, 5];
resolve(); // завершаем
промис
}, 3000);
});
📌 #instr || Фронтендщик | 1 |
| 3 | Этого, однако, не достаточно. Мы должны в явном виде указать, что наш асинхронный код завершился. В этом нам поможет специальная функция завершения, автоматически попадающая в первый параметр функции, если он указан:
let promise = new
Promise(function(resolve) { // указываем
параметр
setTimeout(function() {
let result = [1, 2,
3, 4, 5];
}, 3000);
});
📌 #instr || Фронтендщик | 13 |
| 4 | Для начала нужно обернуть наш асинхронный код в промис:
let promise = new
Promise(function()
{
setTimeout(function() {
let result = [1, 2,
3, 4, 5];
}, 3000);
});
📌 #instr || Фронтендщик | 19 |
| 5 |  Звучит запутано, поэтому давайте посмотрим на примере. Пусть у меня есть вот такой асинхронный код:
setTimeout(function() {
let result = [1, 2, 3, 4, 5];
}, 3000);
Пусть я хочу решить для него нашу основную задачу асинхронности: выполнить некоторый код после срабатывания таймера. При этом я не хочу размещать этот код в самом таймере и хочу, чтобы в этот код как-то попал результат, написанный мною в переменной result. В общем-то, мы решали эту задачу в предыдущих уроках через коллбэки и подписки. Давайте теперь посмотрим, как это сделать через промисы.
📌 #instr || Фронтендщик | 20 |
| 6 |  Как вы видите, я записал объект с промисом в переменную promise. В каком-то другом месте кода я могу применить к этой переменной метод then, передав в него функцию с кодом, который должен быть выполнен по завершении асинхронного кода, написанного при создании данного промиса:
promise.then(function() {
// выполнится при завершении
асинхронного
кода
});
📌 #instr || Фронтендщик | 21 |
| 7 | Промис представляет собой объект, в который параметром передается функция, внутри которой нужно размещать наш асинхронный код:
let promise = new
Promise(function()
{
// асинхронный код
});
📌 #instr || Фронтендщик | 21 |
| 8 | Введение в промисы в JavaScript
Вы уже знаете, что использование коллбэк-модели асинхронности легко приводит к ситуации callback hell. Поэтому в JavaScript была введена новая модель под названием промисы (promise). Давайте изучим эту модель.
📌 #instr || Фронтендщик | 23 |
| 9 | Код получился красивый и без callback hell, однако, мы вернулись к двум нашим проблемам: порядок картинок не гарантирован и невозможно поймать момент загрузки всех картинок.
И решения в данной ситуации нет: невозможно запустить цикл, использовать внутри него асинхронную функцию, а потом поймать момент завершения всех функций цикла. Либо вам не нужно ловить этот момент и приведенный выше код вам подойдет либо добро пожаловать в callback hell.
📌 #instr || Фронтендщик | 20 |
| 10 | Асинхронная загрузка картинок в цикле в JavaScript
Пусть пути к картинкам хранятся в массиве:
let arr = ['img1.png',
'img2.png',
'img3.png'];
Мы можем загрузить эти картинки в цикле:
for (let path of arr) {
loadImage(path, function(image,
err) {
document.body.append(image);
});
}
📌 #instr || Фронтендщик | 19 |
| 11 | Мы решили обе описанные проблемы. Однако, получили взамен другую. Пока она еще не сильно видна, но представьте себе, как будет выглядеть наш код, если в нем будет загрузка не трех, а, скажем, десяти картинок, плюс будет добавлена обработка исключений. В результате код станет крайне нечитаемым: сложность кода лавинообразно нарастает при вложенности коллбэков друга. Такая ситуация называется callback hell - ад коллбэков.
📌 #instr || Фронтендщик | 19 |
| 12 | Окей, переделаем код:
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 || Фронтендщик | 19 |
| 13 | С этим кодом кое-что не так. Дело в том, что картинки будут добавляться в bodyпо мере их загрузки. To есть никто не гарантирует нам, что картинки будут добавлены именно в том порядке, который нам нужен.
Есть еще кое-что. Пусть мы хотим сделать что-нибудь, когда будут загружены все три картинки. В нашем коде мы просто не сможем поймать этот момент, так как все три картинки грузятся независимо.
📌 #instr || Фронтендщик | 20 |
| 14 | Проблема 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 || Фронтендщик | 23 |
| 15 |  Либо с обработкой исключительной ситуации:
loadImage('image.png',
function(image,
err) {
if (!err) {
document.body.append(image);
} else {
console.log('произошла
ошибка: '
+ err);
}
});
📌 #instr || Фронтендщик | 23 |
| 16 | Мы можем использовать нашу функцию следующим образом:
loadImage('image.png',
function(image,
err) {
document.body.append(image);
// разместим картинку по
загрузке
});
📌 #instr || Фронтендщик | 25 |
| 17 | Пусть в первый параметр нашего коллбэка попадает ссылка на DOM элемент картинки, а во второй - ошибка, если произойдет исключительная ситуация:
loadImage('img.png',
function(image,
err) {
console.log(image, err);
});
📌 #instr || Фронтендщик | 27 |
| 18 | Загрузка картинок через асинхронные коллбэки в JavaScript
Давайте реализуем функцию loadImage, которая будет загружать картинки. Пусть первым параметром эта функция принимает путь к картинке, а вторым - коллбэк, который выполнится, когда картинка будет загружена:
loadImage('img.png',
function() {
// выполнится по загрузке
картинки
});
📌 #instr || Фронтендщик | 21 |
| 19 |  Давайте переделаем код нашей функции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 || Фронтендщик | 20 |
| 20 | В коллбэк-подходе с исключениями работают следующим образом: в первый параметр коллбэка отправляют результат, а во второй - ошибку. В этом случае обработка ошибок происходит следующим образом:
make(10, function(res, err) {
if (!err) {
console.log(res);
// ошибки не возникло,
выведем результат
} else {
console.log(err);
// ошибка возникла,
выведем ее текст
}
});
📌 #instr || Фронтендщик | 26 |
