VS [Front-end]

ну отаке #мем 👀 Telegram | Youtube | LinkedIn

Що таке “callback hell”? “Callback hell” – це ситуація, коли багато вкладених callback-функцій (зворотних викликів) створюють складний для розуміння і підтримки код. Таке часто виникає під час роботи з асинхронними операціями в JavaScript (наприклад, запити до API, таймери тощо). Проблема: Код виглядає як “піраміда з індентів” або “ліс дужок”, ускладнюючи читабельність і дебагінг.

doSomething(function(result) { doSomethingElse(result, function(newResult) { doAnotherThing(newResult, function(finalResult) { console.log('Done:', finalResult); }); }); });

Як уникнути callback hell 1. Використовувати проміси: Проміси дозволяють обробляти асинхронні операції зручніше завдяки методу then.

doSomething() .then(result => doSomethingElse(result)) .then(newResult => doAnotherThing(newResult)) .then(finalResult => console.log('Done:', finalResult)) .catch(error => console.error('Error:', error));

2. Використовувати async/await: async/await робить асинхронний код більш лінійним і зрозумілим.

async function process() { try { const result = await doSomething(); const newResult = await doSomethingElse(result); const finalResult = await doAnotherThing(newResult); console.log('Done:', finalResult); } catch (error) { console.error('Error:', error); } } process(); 3. Розбивати код на менші функції: Замість вкладених функцій, винесіть кожну логіку в окрему функцію. function firstStep() { return doSomething(); } function secondStep(result) { return doSomethingElse(result); } function thirdStep(newResult) { return doAnotherThing(newResult); } firstStep() .then(secondStep) .then(thirdStep) .then(finalResult => console.log('Done:', finalResult)) .catch(error => console.error('Error:', error));

4. Використовувати бібліотеки для управління асинхронністю: Бібліотеки на кшталт Async.js або інструменти типу RxJS допомагають структурувати код. 👀 Telegram | Youtube | LinkedIn

😂вибачте #мем 👀 Telegram | Youtube | LinkedIn

😂Черговий мемчанський #мем 👀 Telegram | Youtube | LinkedIn

Якщо Ви коли-небудь задавалися питаннями що таке модуль у JavaScript і як працює імпорт/експорт, то ось вам стаття про це від Вови📱 Стаття “Як працюють нативні JavaScript imports” розглядає механізм імпорту в JavaScript, введений у стандарті ECMAScript 2015 (ES6). Вона пояснює, як імпорти сприяють модульності коду, полегшуючи його організацію, підтримку та розширення. Детально описано процес імпорту, включаючи розміщення файлів, HTTP-запити, завантаження та виконання коду, а також область видимості імпортованих змінних і функцій. Окремо розглядається робота JavaScript-движка V8 з імпортами, зокрема аналіз, парсинг, завантаження файлів та кешування. Стаття також надає практичні приклади використання імпортів у JavaScript. 🔗ПОСИЛАННЯ НА СТАТТЮ #article 👀 Telegram | Youtube | LinkedIn

😂Черговий мемчанський #мем 👀 Telegram | Youtube | LinkedIn

😂Черговий мемчанський #мем 👀 Telegram | Youtube | LinkedIn

Як працює делегування подій?📱 Делегування подій (event delegation) в JavaScript дозволяє оптимізувати обробку подій, прикріплюючи обробник до батьківського елемента замість кожного дочірнього. Ця техніка використовує спливання подій (event bubbling), коли подія, спрацьовуючи на дочірньому елементі, піднімається до батьківського. Як це працює: 1. Подія спливає: Коли подія (наприклад, click) трапляється на дочірньому елементі, вона піднімається через дерево DOM до верхніх елементів. 2. Обробник подій на батьківському елементі: Ви додаєте обробник лише до батьківського елемента, перевіряючи, на якому дочірньому елементі подія виникла. 3. Перевірка цільового елемента: Використовується властивість event.target, щоб визначити, який дочірній елемент був джерелом події.

// HTML /* <div id="parent"> <button data-action="save">Save</button> <button data-action="delete">Delete</button> </div> */ // JavaScript document.getElementById('parent').addEventListener('click', function(event) { // Перевірка, чи клікаємо на кнопку if (event.target.tagName === 'BUTTON') { const action = event.target.dataset.action; console.log(`Button clicked: ${action}`); if (action === 'save') { console.log('Saving...'); } else if (action === 'delete') { console.log('Deleting...'); } } });

1. event.target вказує на елемент, що ініціював подію (<button>). 2. Батьківський елемент <div> отримує всі кліки завдяки спливанню. 3. Ви перевіряєте event.target і реагуєте залежно від ситуації. 👀 Telegram | Youtube | LinkedIn

😂хто з нас? #мем 👀 Telegram | Youtube | LinkedIn

😂а у вас як? #мем 👀 Telegram | Youtube | LinkedIn

😂Черговий мемчанський #мем 👀 Telegram | Youtube | LinkedIn

Ви, до речі, як? Цілі і здорові?🙁

Спливаюче повідомлення з індикатором виконання Реалізовано на HTML, CSS та JS 🔗ПОСИЛАННЯ НА CODEPEN #useful 👀 Telegram | Youtube | LinkedIn

Особливо після ракет над головою #мем 👀 Telegram | Youtube | LinkedIn

😂Черговий мемчанський #мем 👀 Telegram | Youtube | LinkedIn