Frontend | Вопросы собесов
Разбираем вопросы с собеседований на Frontend программиста. HTML, CSS, JavaScript, React, Angular, Vue js Сайт: https://easyoffer.ru/ Реклама: https://telega.in/c/easy_javascript_ru Написать: @easyoffer_adv
نمایش بیشتر11 894
مشترکین
+6424 ساعت
+4387 روز
+3 14930 روز
- مشترکین
- پوشش پست
- ER - نسبت تعامل
در حال بارگیری داده...
معدل نمو المشتركين
در حال بارگیری داده...
Привет, я Леха. Вопросы собеседований берутся с моего сайта easyoffer.ru. Его я делал как пет-проект, чтобы устроиться на работу, но сейчас проект уже перерастает в стартап и я пишу об этом в своем TG блоге Идущий к IT и на YouTube.
"Как считается вероятность вопросов?"Об этом писал в статье на Habr ➖Если нашли ошибку в посте пишите @aurumsunset ➖Если хотите купить рекламу на канале пишите @easyoffer_adv ➖Чтобы получить доступ к приватной группе, где мы выкладываем реальные записи собеседований переходите в бота ➖Аналогично для тестовых заданий вот этот бот
Что такое solid ?
Спросят с вероятностью 7%
Принципы SOLID — это набор из пяти принципов ООП, которые помогают разработчикам создавать более понятный, гибкий и поддерживаемый код. Эти принципы были популяризированы Робертом Мартином (Robert C. Martin), также известным как "дядя Боб". Вот что обозначает каждый принцип:
1️⃣Single Responsibility Principle (Принцип единственной ответственности):
✅Каждый класс должен иметь одну и только одну причину для изменения, то есть одну ответственность.
✅Это помогает сделать код более понятным и облегчает его поддержку, так как каждая часть кода отвечает только за одну конкретную задачу.
// Пример плохого кода
class User {
void saveToDatabase() {
// сохраняет пользователя в базу данных
}
void sendEmail() {
// отправляет приветственное письмо пользователю
}
}
// Пример хорошего кода
class UserRepository {
void save(User user) {
// сохраняет пользователя в базу данных
}
}
class EmailService {
void sendWelcomeEmail(User user) {
// отправляет приветственное письмо пользователю
}
}
2️⃣Open/Closed Principle (Принцип открытости/закрытости):
✅Программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для модификации.
✅Это означает, что мы должны иметь возможность добавлять новый функционал без изменения существующего кода.
// Пример плохого кода
class Rectangle {
void draw() {
// рисует прямоугольник
}
}
class Circle {
void draw() {
// рисует круг
}
}
class GraphicEditor {
void drawShape(Object shape) {
if (shape instanceof Rectangle) {
((Rectangle) shape).draw();
} else if (shape instanceof Circle) {
((Circle) shape).draw();
}
}
}
// Пример хорошего кода
interface Shape {
void draw();
}
class Rectangle implements Shape {
public void draw() {
// рисует прямоугольник
}
}
class Circle implements Shape {
public void draw() {
// рисует круг
}
}
class GraphicEditor {
void drawShape(Shape shape) {
shape.draw();
}
}
3️⃣Liskov Substitution Principle (Принцип подстановки Барбары Лисков):
✅Объекты в программе должны быть заменяемы экземплярами их подклассов без изменения правильности выполнения программы.
✅То есть, подклассы должны дополнять, а не изменять поведение базового класса.
// Пример плохого кода
class Bird {
void fly() {}
}
class Ostrich extends Bird {
void fly() {
throw new UnsupportedOperationException();
}
}
// Пример хорошего кода
class Bird {}
class FlyingBird extends Bird {
void fly() {}
}
class Ostrich extends Bird {}
class Sparrow extends FlyingBird {
void fly() {
// реализация полета для воробья
}
}
Принципы SOLID помогают писать код, который легко поддерживать и расширять. Это набор правил, которые говорят о том, как разделять обязанности между классами, как правильно наследовать и как строить интерфейсы и зависимости.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 11❤ 3🤯 2
Какую проблему решает асинхронность в js ?
Спросят с вероятностью 3%
Асинхронность решает проблему блокировки основной нити выполнения (main thread) при выполнении длительных операций. Основная нить выполнения отвечает за обработку пользовательского интерфейса, а также за выполнение кода. Если длительные операции, такие как сетевые запросы, таймеры или ввод/вывод, выполняются синхронно, они могут блокировать пользовательский интерфейс, делая приложение неотзывчивым и неудобным для пользователя. Асинхронность позволяет выполнять такие операции параллельно, не блокируя основную нить.
Основные проблемы
1️⃣Блокировка пользовательского интерфейса (UI)
✅Синхронные операции, такие как загрузка данных из сети, чтение файлов или выполнение сложных вычислений, могут блокировать основной поток, замораживая интерфейс и делая приложение неотзывчивым.
✅Асинхронные операции позволяют избежать этой блокировки, выполняя задачи в фоновом режиме и возвращаясь к основному потоку, когда результаты готовы.
function fetchData() {
const request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', false); // false для синхронного запроса
request.send();
if (request.status === 200) {
console.log(request.responseText);
}
}
fetchData();
console.log('Этот код выполнится только после завершения fetchData');
2️⃣Параллельное выполнение задач
✅Асинхронные операции позволяют выполнять несколько задач параллельно, что повышает производительность и эффективность приложения.
✅Например, загрузка нескольких ресурсов (изображений, скриптов, стилей) одновременно может значительно ускорить время загрузки страницы.
const urls = [
'https://api.example.com/data1',
'https://api.example.com/data2',
'https://api.example.com/data3'
];
Promise.all(urls.map(url => fetch(url).then(response => response.json())))
.then(results => {
console.log('All data fetched:', results);
})
.catch(error => console.error('Error fetching data:', error));
3️⃣Обработка событий и таймеров
✅Асинхронные функции, такие как setTimeout
и setInterval
, позволяют выполнять задачи с задержкой или периодически, не блокируя основной поток.
✅Это полезно для выполнения задач по расписанию, создания анимаций, обработки пользовательских событий и многого другого.
console.log('Start');
setTimeout(() => {
console.log('Executed after 2 seconds');
}, 2000);
console.log('End');
4️⃣Работа с I/O (ввод/вывод)
✅Асинхронные операции ввода/вывода позволяют эффективно обрабатывать задачи чтения и записи данных, например, при работе с файлами или базами данных.
✅Это важно для серверных приложений, обрабатывающих множество одновременных запросов без блокировки.
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) {
console.error('Error reading file:', err);
return;
}
console.log('File content:', data);
});
console.log('This code runs while the file is being read');
Основные механизмы
1️⃣Коллбэки (Callbacks)
✅Функции обратного вызова, которые вызываются по завершении асинхронной операции.
function fetchData(callback) {
setTimeout(() => {
const data = 'Some data';
callback(data);
}, 1000);
}
fetchData(data => {
console.log('Data received:', data);
});
Асинхронность решает проблему блокировки основной нити выполнения при выполнении длительных операций, таких как сетевые запросы, таймеры и операции ввода/вывода. Она позволяет выполнять эти задачи параллельно, не блокируя пользовательский интерфейс и обеспечивая более отзывчивое и эффективное поведение приложений. Асинхронность реализуется с помощью коллбэков, промисов и синтаксиса async/await.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 18❤ 2
Senior-разработчик создал крутейший канал про Frontend — просто, понятно, интересно.
Подписывайся: @frontend
IMG_4587.MP41.32 MB
IMG_4588.MP42.64 MB
IMG_4589.MP42.29 MB
IMG_4590.MP47.42 KB
IMG_4591.MP41.99 MB
👍 5🔥 3😁 2🤔 1
Как работает react ?
Спросят с вероятностью 7%
React — это библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные, интерактивные UI из маленьких, изолированных частей кода, называемых компонентами. Он основывается на нескольких ключевых концепциях, которые обеспечивают его эффективность и гибкость.
1️⃣ Компонентный подход: Приложения состоят из компонентов. Компонент — это кусочек пользовательского интерфейса, который можно использовать повторно. Каждый компонент имеет своё состояние и пропсы (параметры, которые передаются от родительского компонента), что делает его независимым и способным к самостоятельной работе.
2️⃣ JSX: Использует JSX — синтаксис, похожий на HTML, для описания структуры интерфейса. Он делает код компонентов более читабельным и упрощает процесс их создания.
function App() {
return <div>Привет, мир!</div>;
}
3️⃣ Виртуальный DOM: Одной из главных особенностей является использование виртуального DOM — лёгкой копии реального DOM. Это позволяет React оптимизировать обновления интерфейса, сначала применяя изменения к виртуальному DOM, а затем, после вычисления наиболее эффективных изменений, к реальному DOM. Это существенно повышает производительность, особенно при работе с большими объёмами данных.
4️⃣ Однонаправленный поток данных: Данные течут строго от родителей к детям через пропсы, что упрощает отладку и понимание приложений, так как знаешь, откуда пришли данные и как они изменяются.
5️⃣ Хуки: С появлением хуков он стал ещё более мощным и гибким. Хуки позволяют использовать состояние и другие его возможности без написания классов. Например, хук useState
позволяет добавить состояние к функциональному компоненту.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Вы кликнули {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми на меня
</button>
</div>
);
}
React предлагает мощный набор инструментов для быстрой и эффективной разработки интерактивных пользовательских интерфейсов. Он позволяет разрабатывать компоненты независимо, управлять их состоянием и пропсами, а также эффективно обновлять интерфейс, минимизируя взаимодействие с реальным DOM.
React помогает создавать веб-страницы, которые быстро реагируют на действия пользователя, делая взаимодействие с сайтом плавным и приятным, не перезагружая страницу при каждом действии.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых👍 16❤ 3🔥 1
Photo unavailableShow in Telegram
🔓 Топовое обучение теперь доступно каждому!
😎 IT Syndicate — лучшее место для поиска курсов по IT-технологиям совершенно бесплатно.
У нас ты найдешь материал по любым специальностям и уровням подготовки!
🔥 Заходи прямо сейчас, чтобы не потерять — IT Syndicate!
👍 1
Зачем создавались библиотеки react и другие ?
Спросят с вероятностью 3%
Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для решения проблем и улучшения процессов разработки веб-приложений. Веб-разработка эволюционировала, и требования к производительности, масштабируемости, поддержке и интерактивности веб-приложений значительно возросли. Эти инструменты помогают разработчикам создавать более сложные, быстрые и поддерживаемые приложения. Рассмотрим основные причины создания таких библиотек и фреймворков:
1️⃣Управление состоянием и реактивность
React
Был создан для решения проблем управления состоянием и реактивности в пользовательских интерфейсах. Он предоставляет компонентный подход к построению UI и использует виртуальный DOM для оптимизации обновлений пользовательского интерфейса.
✅Компонентный подход: Разделение пользовательского интерфейса на переиспользуемые компоненты улучшает структуру кода и его поддерживаемость.
✅Виртуальный DOM: Минимизирует прямые обновления реального DOM, используя виртуальный DOM для вычисления необходимых изменений и оптимизации производительности.
// Пример компонента React
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
2️⃣Обработка сложных данных и взаимодействий
Angular
Предоставляет комплексный фреймворк для построения крупных приложений с сложными взаимодействиями и управлением состоянием.
✅Двусторонняя привязка данных: Позволяет синхронизировать данные между моделью и представлением автоматически.
✅Встроенные инструменты и решения: Включает маршрутизацию, HTTP-клиент, формы и многое другое, что упрощает создание сложных приложений.
// Пример компонента Angular
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello, {{ name }}!</h1>`,
})
export class AppComponent {
name = 'World';
}
3️⃣Простота и гибкость
Vue.js
Созданный Эваном Ю (Evan You), стремится предоставить простой и гибкий инструмент для построения пользовательских интерфейсов, который легко интегрируется с существующими проектами.
✅Легкий в освоении: Имеет простую и интуитивно понятную структуру.
✅Реактивность: Предоставляет мощную систему реактивности, которая автоматически отслеживает изменения данных и обновляет представление.
// Пример компонента Vue.js
<template>
<h1>Hello, {{ name }}!</h1>
</template>
<script>
export default {
data() {
return {
name: 'World',
};
},
};
</script>
4️⃣Повышение производительности
Современные библиотеки и фреймворки разработаны с учетом производительности. Они оптимизируют работу с DOM, минимизируют количество перерисовок и предлагают механизмы для эффективного управления состоянием и обработкой данных.
✅Виртуальный DOM (React): Обновления в DOM происходят только тогда, когда это необходимо, что снижает нагрузку на браузер.
✅Change Detection (Angular): Оптимизированный механизм обнаружения изменений позволяет эффективно обновлять представление.
Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для упрощения разработки сложных и интерактивных веб-приложений. Они решают проблемы управления состоянием, оптимизации производительности, модульности, улучшения процесса разработки и тестирования, а также предоставляют мощные инструменты и методологии для построения масштабируемых и поддерживаемых приложений.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых👍 11❤ 2
Photo unavailableShow in Telegram
💡 Огромная база актуальной теории для Frontend Разработчиков:
Что такое TDD?
Что такое AbortController в JS?
Что такое SSE(Server-Sent Events)?
Что такое Proxy в JavaScript?
Что такое Каррирование?
Что такое Mutation Observer?
Для чего используется ключевое слово super() в дочерних классах?
Какие есть коды ответа HTTP?
Что такое блочная модель в CSS?
Канал ведут опытные Frontend Разработчики, которые еженедельно проводят собеседования.
Подпишись на @frontend_questions
🔥 3🎉 3👍 1
Зачем нужны разные хештеги ?
Спросят с вероятностью 7%
Хештеги (#) в веб-разработке используются по-разному, в зависимости от контекста их применения. Во-первых, они могут использоваться в социальных сетях для группировки контента по определенным темам, что облегчает поиск информации. Во-вторых, в URL-адресах веб-страниц хештеги служат для навигации к определенной части страницы без перезагрузки (якорные ссылки).
1️⃣ Хештеги в социальных сетях:
(#пример) помогают пользователям находить сообщения и контент по определенным темам или интересам в социальных сетях. Когда вы добавляете хештег к своему посту, он автоматически становится кликабельным, и любой может кликнуть по нему, чтобы увидеть другие посты с ним же. Это способствует объединению контента по схожим интересам и упрощает поиск нужной информации.
#пример - делает ваш пост видимым для всех, кто ищет посты с этим хештегом.2️⃣ Хештеги в URL (якорные ссылки): В веб-разработке они используются в URL для навигации к определенному разделу или элементу на странице без перезагрузки страницы. Это называется якорная ссылка. Когда пользователь кликает по такой ссылке, браузер прокручивает страницу к элементу, который имеет соответствующий идентификатор (id).
Перейти к разделу 1
<div id="section1">Содержимое раздела 1</div>
В этом примере, когда пользователь кликает на ссылку "Перейти к разделу 1", страница прокручивается к <div id="section1">
.
Разные хештеги нужны для организации и упрощения поиска контента в социальных сетях, а также для навигации по веб-страницам без перезагрузки, направляя пользователя к определенному разделу или элементу страницы. Это делает информацию более доступной и интерактивной.
Хештеги помогают нам быстро находить интересующую информацию в интернете и перемещаться по веб-страницам, не перезагружая их целиком.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых❤ 5👍 3👾 2
Как id может участвовать в ссылке ?
Спросят с вероятностью 3%
id
атрибут элемента может использоваться для создания якорных ссылок (anchor links), которые позволяют переходить к определённому разделу или элементу на странице. Это особенно полезно для навигации по длинным страницам, позволяя пользователям быстро перейти к интересующему их контенту без необходимости прокручивать страницу вручную.
Как это работает:
1️⃣ Установите атрибут id
для целевого элемента на странице. Должен быть уникальным в пределах страницы.
<div id="section1">Это целевая секция</div>
2️⃣ Создайте ссылку с атрибутом href
, значение которого начинается с символа #
, за которым следует id
целевого элемента.
Перейти к целевой секции3️⃣ Когда пользователь кликает по такой ссылке, браузер автоматически прокручивает страницу до элемента с соответствующим id.
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы с якорными ссылками</title>
</head>
<body>
<h2>Перейти к Секции 1</h2>
<h2>Перейти к Секции 2</h2>
<div style="height:600px;">
<p>Прокрутите вниз</p>
</div>
<h2 id="section1">Секция 1</h2>
<p>Некоторый контент...</p>
<div style="height:500px;">
<p>Прокрутите вниз</p>
</div>
<h2 id="section2">Секция 2</h2>
<p>Ещё некоторый контент...</p>
</body>
</html>
В этом примере, кликая на "Перейти к Секции 1" или "Перейти к Секции 2", пользователь будет направлен к соответствующему разделу на странице.
Дополнительные применения:
✅ Создание навигационного меню: Используется для быстрого доступа к разделам на одностраничных сайтах или длинных лендингах.
✅ Ссылки на заметки: Позволяет создавать внутренние ссылки в документах или статьях, упрощая навигацию по тексту.
Использование id
в ссылках делает веб-страницы более удобными для пользователей, облегчая доступ к нужной информации и улучшая общий пользовательский опыт.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых👍 16🔥 2❤ 1👾 1