Vuex — это централизованное хранилище данных. Он решает проблему, когда нескольким компонентам нужно работать с одними и теми же данными. Вместо того чтобы передавать данные через props или события, всё состояние хранится в одном месте. Это упрощает управление состоянием, особенно в больших приложениях, и делает логику более предсказуемой.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥6💊3
Viewport – это область видимой части веб-страницы в браузере пользователя.
Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег
viewport
: <meta name="viewport" content="width=device-width, initial-scale=1">
Без
viewport
(по умолчанию)На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить.
Управление масштабом
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Отключение адаптации iOS Safari
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9💊2
Обычно браузер пытается выполнить один reflow и один repaint за один кадр (примерно 16.6 мс при 60 fps), объединяя их по возможности. Если операции слишком тяжёлые, кадры могут пропускаться.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍2
Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в 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🔥4🤔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
👍8🔥1💊1
Значения функции компонента React находятся в теле функции. В функциональных компонентах состояние, эффекты, переменные — всё управляется через хуки и находится внутри этой функции.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊12
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
- Встраивание видео, чартов, приложений.
- Для отдельной изоляции контента (например, 3rd party).
- Открытие внешних сайтов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1