Метод
.toString()
используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype
. Однако, его поведение зависит от типа данных. toString()
у примитивов Числа, строки, булевы значения,
null
, undefined
Для примитивных типов
toString()
работает просто — возвращает строковое представление значения:console.log((123).toString()); // "123"
console.log(true.toString()); // "true"
console.log(false.toString()); // "false"
console.log((3.14).toString()); // "3.14"
Но
null
и undefined
не имеют метода toString()
и вызов приведёт к ошибкеconsole.log(null.toString()); // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка
Поэтому для них лучше использовать
String()
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
toString()
у массивов Для массивов
toString()
преобразует их в строку, разделяя элементы запятойconsole.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)
По умолчанию метод
toString()
у объекта возвращает строку вида [object Object]
const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"
Если нужно другое поведение, можно переопределить
toString()
в объектеconst user = {
name: "Иван",
age: 30,
toString() {
return `Имя: ${this.name}, Возраст: ${this.age}`;
}
};
console.log(user.toString()); // "Имя: Иван, Возраст: 30"
Можно переопределять метод
toString()
в классахclass Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return `${this.name} (${this.age} лет)`;
}
}
const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"
Функции тоже имеют метод
toString()
, но он возвращает их исходный кодfunction hello() {
return "Привет!";
}
console.log(hello.toString());
// "function hello() { return 'Привет!'; }"
Для стрелочных функций
const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"
Лучше использовать
String(значение)
, потому что toString()
не работает на null
и undefined
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42)); // "42"
console.log(String({ a: 1 })); // "[object Object]"
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это реактивные свойства, которые зависят от других реактивных данных и автоматически пересчитываются, когда зависимости меняются.
Они кешируются до тех пор, пока зависимости не изменятся.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;
function increment() {
count += 1;
return count;
}
console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)
Модифицирует переданный аргумент
function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}
let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)
Выполняет побочные эффекты (например, изменяет DOM)
function changeTitle(newTitle) {
document.title = newTitle;
}
changeTitle("Новая страница");
console.log(document.title); // "Новая страница"
Генерирует случайное значение
function getRandomNumber() {
return Math.random();
}
console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)
Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.
Чистый вариант функции
addElement()
(не меняет исходный массив) function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}
let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- async загружает и выполняет скрипт сразу, не дожидаясь загрузки документа — полезно для независимых скриптов.
- defer загружает скрипт параллельно, но выполняет после полной загрузки HTML — лучше для скриптов, работающих с DOM.
Оба улучшают производительность, но используются в разных сценариях.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.
Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки:
main
и feature
.В ветке
feature
вы сделали несколько коммитов.Вы хотите объединить изменения из
feature
в main
.git checkout main
git merge feature
Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки:
main
и feature
.В ветке
feature
вы сделали несколько коммитов.Вы хотите перенести изменения из
feature
на текущий конец main
.git checkout feature
git rebase main
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- CI/CD пайплайны (Jenkins, GitLab, GitHub Actions);
- Сборка и доставка артефактов;
- Docker-контейнеры;
- Размещение в облачных сервисах (Heroku, AWS, GCP, Vercel, Netlify);
- Через scp/rsync или ftp для простых решений.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
bind()
– это метод, который создает новую функцию с привязанным контекстом (this
) и (опционально) фиксированными аргументами. Привязывает
this
, чтобы не потерять контекст Позволяет создавать частично примененные функции
Используется в обработчиках событий и таймерах
Пример: потеря
this
без bind()
const user = {
name: "Иван",
sayHello() {
console.log(`Привет, ${this.name}!`);
},
};
setTimeout(user.sayHello, 1000); // ❌ this = undefined
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- React.memo — мемоизация компонента.
- useMemo — мемоизация значений.
- useCallback — мемоизация функций.
- shouldComponentUpdate / React.PureComponent — в классовых компонентах.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
color
– одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG). p {
color: red;
}
CSS позволяет задавать цвета несколькими способами
Наследование
color
наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background
). body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}
currentColor
— скрытое золотоЭто специальное значение, которое означает "используй текущее значение
color
". Очень полезно для стилизации border
, box-shadow
, outline
и SVG. button {
color: red;
border: 2px solid currentColor; /* Использует color */
}
transparent
— особый цветp {
color: transparent;
}
Когда
rgba()
или hsla()
лучшеp {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}
color
и mix-blend-mode
Можно заставить текст взаимодействовать с фоном с помощью
mix-blend-mode
h1 {
color: white;
mix-blend-mode: difference;
}
color
в ::selection
и ::placeholder
Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания
color
::selection {
background: blue;
color: white;
}
input::placeholder {
color: gray;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Flow, Phrasing и Sectioning — считаются основными, так как покрывают структурную, текстовую и организационную основу HTML-документа.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут
draggable="true"
. Затем срабатывают специальные события, такие как dragstart
, drop
, dragover
и другие. <div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>
<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");
dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});
dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>
Основные события:
dragstart
— когда начали тянуть элемент. drag
— когда элемент двигается (срабатывает много раз). dragenter
— когда курсор заходит в зону сброса. dragover
— когда элемент находится над зоной (нужно preventDefault()
). dragleave
— когда курсор покидает зону сброса. drop
— когда элемент отпущен в зоне сброса. dragend
— когда перетаскивание завершено (даже если не сбросили). - Перетаскивание файлов в
<input type="file">
(например, загрузка изображений). - Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.
Да, можно использовать другие методы:
Через события мыши (
mousedown
, mousemove
, mouseup
). Через CSS
position: absolute
и transform
. Через JS-библиотеки (
Sortable.js
, React DnD
, Draggable.js
). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события
touchstart
, touchmove
, touchend
.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В React
ref
(сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:
Доступ к DOM-элементам
Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Установить фокус на текстовое поле
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Установить фокус</button>
</div>
);
}
export default TextInputWithFocusButton;
Получение размеров элемента
Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (divRef.current) {
const { width, height } = divRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
Измеряемый элемент
</div>
<p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
</div>
);
}
export default MeasureDiv;
Использование в классовых компонентах
Доступ к методам компонента:
import React, { Component } from 'react';
class CustomComponent extends Component {
customMethod() {
console.log('Метод компонента вызван');
}
render() {
return <div>Custom Component</div>;
}
}
class ParentComponent extends Component {
constructor(props) {
super(props);
this.customComponentRef = React.createRef();
}
handleClick = () => {
this.customComponentRef.current.customMethod();
};
render() {
return (
<div>
<CustomComponent ref={this.customComponentRef} />
<button onClick={this.handleClick}>Вызвать метод компонента</button>
</div>
);
}
}
export default ParentComponent;
Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React.
ref
следует использовать для случаев, которые не могут быть решены этим способом.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
На самом деле, статические методы не добавляются в
prototype
, потому что они принадлежат самому классу, а не его экземплярам. Но если ты хочешь имитировать статический метод в
prototype
, можно использовать функцию-конструктор и добавить метод вручную. В классе статические методы объявляются с помощью
static
. Они не находятся в prototype
, а принадлежат самому классу. class User {
static sayHello() {
return "Привет!";
}
}
console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)
Если нужно, чтобы каждый объект имел доступ к "статическому" методу через
prototype
, можно сделать такfunction User(name) {
this.name = name;
}
// Добавляем метод в prototype
User.prototype.sayHello = function () {
return "Привет!";
};
const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"
Если хочется добавить метод на сам класс, а не в
prototype
, можно сделать такfunction User(name) {
this.name = name;
}
// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
return "Привет!";
};
console.log(User.sayHello()); // ✅ "Привет!"
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это встроенные функции в Array.prototype, позволяющие перебирать, фильтровать, изменять, объединять и сортировать массивы. Примеры: map, filter, reduce, forEach, push, pop, splice, sort.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.
Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой
<div>
с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html
), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.<div id="app"></div>
<script src="bundle.js"></script>
Приложение становится очень интерактивным после инициализации.
Основная работа выполняется на клиентской стороне.
Легко добавлять сложные интерактивные компоненты.
Пользователь видит пустую страницу, пока загружается JavaScript и данные.
Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.
Больше ресурсов требуется на стороне клиента.
Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.
npm run build
HTML статичен и отдается сервером без обработки.
Поисковые системы могут легко индексировать готовый HTML.
Все вычисления выполняются заранее (во время сборки).
Для обновления нужно заново пересобирать сайт, что может занимать много времени.
Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.
Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (
revalidate
). После этого сервер пересоберет страницу и кэширует ее.export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}
Страницы отдаются как статические, но обновляются при необходимости.
Удобно для контента, который редко обновляется.
Поисковики видят статические страницы.
Нужно управлять кэшированием и интервалами обновления.
Если обновления контента слишком частые, ISR может не подойти.
Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.
Боты получают готовый HTML.
Пользователи получают интерактивные страницы через CSR.
Нужно отслеживать запросы и разделять их.
Генерация страницы на сервере может занять время.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML5 устранил устаревшие теги, такие как:
- <font>
- <center>
- <big>, <tt>
- <acronym>
- <frame>, <frameset>, <noframes>
- <applet>, <basefont>, <dir>
Их функциональность заменена CSS и современными элементами.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.
Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.
Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.
В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.
С методологией легко найти нужные элементы и вносить изменения.
Одна из самых популярных методологий для HTML и CSS.
- Она предлагает структурировать классы так:
- Блок: независимый компонент (например,
menu
).- Элемент: часть блока (например,
menu__item
).- Модификатор: вариант блока или элемента (например,
menu__item--active
).Пример кода
<div class="menu">
<div class="menu__item menu__item--active">Главная</div>
<div class="menu__item">О нас</div>
<div class="menu__item">Контакты</div>
</div>
Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта).
Пример
<!-- Атом -->
<button class="button">Клик</button>
<!-- Молекула -->
<div class="form">
<label class="form__label">Имя</label>
<input class="form__input" type="text">
</div>
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это немедленно вызываемое функциональное выражение. Используется для:
- Изоляции области видимости;
- Создания модуля;
- Предотвращения загрязнения глобального пространства имён.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM