Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).
async
Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.
async function fetchData() {
return 'данные';
}
fetchData().then(data => console.log(data)); // выводит "данные"
await
Используется для ожидания результата промиса внутри асинхронной функции
async
. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.async function fetchData() {
let data = await fetch('https://api.example.com/data');
let json = await data.json();
return json;
}
Асинхронный код, написанный с использованием
async
/await
, выглядит более структурированным и похожим на синхронный код, что упрощает его пониманиеВ асинхронных функциях с
await
можно использовать стандартный синтаксис try
/catch
для обработки ошибок, что делает код единообразнее.Использование
async
/await
позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2🤔1
По MIME-типу, заголовкам ответа и контексту тега. Если заголовки верны — картинка отобразится, если нет — может быть воспринята как бинарный поток или текст.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍3
WebGL (Web Graphics Library) — это JavaScript API для рендеринга 2D и 3D-графики в браузере без необходимости установки дополнительных плагинов. Он основан на OpenGL ES и работает внутри HTML5-элемента
<canvas>
. WebGL позволяет использовать мощность графического процессора (GPU) для отрисовки сложных сцен, анимаций и интерактивных приложений прямо в браузере.Без WebGL для создания сложных 3D-сцен в вебе приходилось использовать Flash, Java-апплеты или другие технологии. WebGL делает это нативно в браузере.
WebGL использует мощность видеокарты (GPU), а не только центрального процессора (CPU), что значительно ускоряет обработку графики.
WebGL работает на большинстве современных браузеров (Chrome, Firefox, Edge, Safari) и поддерживается на Windows, macOS, Linux, iOS и Android.
Используется в играх, 3D-графике, симуляциях, картографических сервисах (например, Google Maps, Cesium.js), визуализациях данных.
WebGL управляет графикой через шейдеры — небольшие программы, которые выполняются на видеокарте. Для работы с WebGL обычно используются библиотеки, упрощающие разработку, например:
- Three.js — высокоуровневая библиотека для удобной работы с WebGL.
- Babylon.js — мощный движок для создания 3D-приложений.
- PixiJS — библиотека для 2D-графики с поддержкой WebGL.
<canvas id="webgl-canvas"></canvas>
<script>
// Получаем WebGL-контекст
const canvas = document.getElementById("webgl-canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
console.error("WebGL не поддерживается");
}
// Устанавливаем цвет фона и очищаем экран
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Черный фон
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15
Боксовая модель определяет, как рассчитываются размеры и отступы элементов.
Состоит из:
- Content — содержимое;
- Padding — внутренние отступы;
- Border — рамка;
- Margin — внешние отступы.
Виды:
- content-box — по умолчанию, ширина/высота задаются только для content;
- border-box — ширина включает padding и border (удобнее в практике).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥4
Оба способа позволяют работать с асинхронным кодом в JavaScript, но
async/await
делает код чище, проще и удобнее. Код на
Promise.then()
часто становится вложенным и запутанным fetch("https://api.example.com/user")
.then(response => response.json())
.then(user => {
return fetch(`https://api.example.com/orders/${user.id}`);
})
.then(response => response.json())
.then(orders => {
console.log("Заказы:", orders);
})
.catch(error => console.error("Ошибка:", error));
Решение:
async/await
async function getUserOrders() {
try {
const response = await fetch("https://api.example.com/user");
const user = await response.json();
const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
const orders = await ordersResponse.json();
console.log("Заказы:", orders);
} catch (error) {
console.error("Ошибка:", error);
}
}
getUserOrders();
async/await
лучше обрабатывает ошибкиfetch("https://api.example.com/data")
.then(response => response.json())
.then(data => {
throw new Error("Ошибка в обработке данных");
})
.catch(error => console.error("Ошибка:", error));
async/await
+ try/catch
– мощная обработка ошибокasync function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Ошибка:", error);
}
}
fetchData();
async/await
удобен в for
и try/catch
const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
fetch(url)
.then(response => response.json())
.then(data => console.log(data));
});
async/await
в for of
async function fetchAll(urls) {
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
}
fetchAll(["url1", "url2", "url3"]);
async/await
работает с try/finally
async function fetchData() {
try {
console.log("Запрос данных...");
const response = await fetch("https://api.example.com");
const data = await response.json();
console.log("Данные:", data);
} catch (error) {
console.error("Ошибка:", error);
} finally {
console.log("Закрываем соединение...");
}
}
fetchData();
async/await
можно использовать внутри Promise.all()
Иногда
Promise.all()
быстрее, потому что запускает промисы параллельно. async function fetchMultiple() {
const [user, orders] = await Promise.all([
fetch("https://api.example.com/user").then(res => res.json()),
fetch("https://api.example.com/orders").then(res => res.json())
]);
console.log(user, orders);
}
fetchMultiple();
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥1
- interface — если описывается структура объекта или контракта API (особенно с наследованием).
- type — для объединения, пересечений, объединений с примитивами (type ID = string | number).
Общее правило:
- interface — для объектов.
- type — для композиции, объединений и utility-типов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥4🤔2
Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.
JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.
console.log("1: Перед запросом");
setTimeout(() => {
console.log("2: Данные загружены");
}, 2000);
console.log("3: После запроса");
Вывод в консоль
1: Перед запросом
3: После запроса
2: Данные загружены (спустя 2 секунды)
Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например,
click
, keydown
) в очередь и обрабатывает их только когда основной поток свободен. document.querySelector("button").addEventListener("click", () => {
console.log("Кнопка нажата!");
});
Когда мы загружаем данные с сервера (
fetch
, setTimeout
, setInterval
), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (
fetch
, XMLHttpRequest
) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится. console.log("Запрос данных...");
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log("Данные получены:", data));
console.log("Код выполняется дальше!");
Вывод
Запрос данных...
Код выполняется дальше!
(Спустя время) Данные получены: {id: 1, title: "..."}
Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью
setTimeout
или requestAnimationFrame
. let count = 0;
function heavyTask() {
for (let i = 0; i < 1e6; i++) {
count++;
}
console.log("Часть работы выполнена!");
if (count < 5e6) {
setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
}
}
heavyTask();
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
Можно подписаться на множество событий, в том числе:
- play — начало воспроизведения;
- pause — приостановка;
- ended — завершение воспроизведения;
- timeupdate — изменение текущего времени;
- loadeddata — когда данные загружены;
- volumechange — изменение громкости;
- seeking и seeked — начало и завершение перемотки;
- error — ошибка загрузки/воспроизведения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍3
Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода.
useEffect
позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
export default DataFetchingComponent;
Метод
componentDidMount
используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.import React, { Component } from 'react';
class DataFetchingComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
this.setState({ data });
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
render() {
const { data } = this.state;
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
}
export default DataFetchingComponent;
Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым.
service.js
export async function fetchData() {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
}
DataFetchingComponent.js
import React, { useState, useEffect } from 'react';
import { fetchData } from './service';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData()
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading data...</p>
)}
</div>
);
}
export default DataFetchingComponent;
Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
- div — это блочный элемент, используется для структурирования больших участков контента;
- span — строчный элемент, применяется для выделения текста внутри других блоков без создания новой строки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:
Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным.
React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение.
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.
Управление состоянием больших и сложных приложений может стать хаотичным.
React предоставляет механизмы для удобного управления состоянием компонентов с помощью
useState
, useReducer
, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой.По мере роста приложения, код может стать сложным для понимания и изменения.
Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.
Наличие обширного сообщества и инструментов для разработки.
React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.
import React, { useState } from 'react';
function Counter() {
// Определение состояния count с начальным значением 0
const [count, setCount] = useState(0);
return (
<div>
<p>Вы кликнули {count} раз(а)</p>
<button onClick={() => setCount(count + 1)}>
Кликни меня
</button>
</div>
);
}
export default Counter;
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤔1
Чтобы переменная, объявленная через var, не «утекала» в глобальную область, её можно изолировать с помощью функции или IIFE.
Поскольку var имеет функциональную область видимости, оборачивание кода в функцию — единственный способ изолировать её.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥5🤔2
Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.
В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
Затем передаем эти данные в дочерний компонент через пропсы.
В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий.
Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const message = "Привет, дочерний компонент!";
return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent message={message} />
</div>
);
}
export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>{props.message}</p>
</div>
);
}
export default ChildComponent;
Создаем переменную
message
, содержащую строку "Привет, дочерний компонент!".В JSX разметке мы рендерим дочерний компонент
ChildComponent
, передавая ему пропс message
со значением переменной message
. ChildComponent:
Принимаем пропс
message
через параметр props
.Используем
props.message
для отображения переданной строки внутри тега <p>
.Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const user = {
name: "Иван",
age: 25
};
return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent user={user} />
</div>
);
}
export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';
function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>Имя: {props.user.name}</p>
<p>Возраст: {props.user.age}</p>
</div>
);
}
export default ChildComponent;
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥1💊1
Значения функции компонента React находятся в теле функции. В функциональных компонентах состояние, эффекты, переменные — всё управляется через хуки и находится внутри этой функции.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊13
Event Loop (Цикл событий) – это механизм, который управляет выполнением кода, обработкой асинхронных задач и взаимодействием с Web API.
Используем асинхронный код:
setTimeout
, setInterval
, fetch
, Promise
, async/await
Оптимизируем выполнение тяжелых задач
Управляем приоритетами выполнения (Microtask vs Macrotask)
JavaScript выполняет код в однопоточном режиме, но может обрабатывать асинхронные задачи через очередь событий (Event Queue) и микрозадачи (Microtask Queue).
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
Вывод в консоли
1
4
3
2
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊6👍4🤔1
- Встраивание видео, чартов, приложений.
- Для отдельной изоляции контента (например, 3rd party).
- Открытие внешних сайтов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1
Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript.
Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="https://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Если SVG не нужно изменять, можно вставить его как обычное изображение.
<img src="image.svg" alt="Описание изображения" width="100" height="100">
SVG можно использовать как фоновое изображение.
<div class="icon"></div>
<style>
.icon {
width: 100px;
height: 100px;
background-image: url('image.svg');
background-size: cover;
}
</style>
Позволяет загружать SVG-файлы и взаимодействовать с ними.
<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>
SVG можно загружать в iframe.
<iframe src="image.svg" width="100" height="100"></iframe>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
- HTTP/1.1 — классический, последовательные запросы, keep-alive.
- HTTP/2 — мультиплексирование, бинарный формат, заголовки сжимаются.
- HTTP/3 (QUIC) — работает поверх UDP, более надёжный и быстрый при потере пакетов.
Каждая версия улучшает скорость и устойчивость соединения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍2
React.iss.onemo
— это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных.
React.iss.onemo
решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. React.iss.onemo
— это функция высшего порядка (HOC), которая оборачивает функциональный компонентimport React from "react";
const MyComponent = ({ value }) => {
console.log("Рендер компонента!");
return <div>Значение: {value}</div>;
};
// Оборачиваем компонент в React.iss.onemo
const MemoizedComponent = React.iss.onemo(MyComponent);
export default MemoizedComponent;
React.iss.onemo
vs. с React.iss.onemo
Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике
import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";
const Parent = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Увеличить</button>
<MemoizedComponent value="Привет, мир!" />
</div>
);
};
export default Parent;
Если компонент всегда ререндерится из-за изменения пропсов – смысла в
memo
нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу.
Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥1
Каналы с Junior IT вакансиями
и стажировками
Подписывайся и забирай свой оффер
1. Стажировки и вакансии по России и миру
2. IT вакансии по СНГ
3. IT стажировки по СНГ
4. ИИ-ассистент для автооткликов
5. DIGITAL и IT стажировки и вакансии
6. IT стажировки в топовых компаниях мира
7. Удалённые IT вакансии и стажировки
8. Python вакансии и стажировки
9. БИГТЕХ вакансии и стажировки
10. Design вакансии и стажировки
11. QA вакансии и стажировки
12. Junior вакансии и стажировки
13. Frontend вакансии и вопросы собесов
14. Вакансии и стажировки для аналитиков
15. Вакансии в русских стартапах за границей
16. Вакансии и стажировки для DevOps
17. Вакансии, которых нет на ХХ.РУ
Please open Telegram to view this post
VIEW IN TELEGRAM
- Область видимости — это область действия переменной.
- Замыкание — это функция, которая «помнит» окружение, в котором была создана, даже после выхода из него.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊11🤔5