Frontend | Вопросы собесов

Что делает $emit ? Спросят с вероятностью 7% $emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные. Как его использовать 1️⃣В дочернем компоненте: ✅Используйте метод $emit, чтобы отправить событие. ✅Передайте имя события и любые данные, которые нужно передать родительскому компоненту. 2️⃣В родительском компоненте: ✅Слушайте это событие, используя директиву v-on или её сокращение @. ✅Обработайте событие в методе родительского компонента. Дочерний компонент (ChildComponent.vue)

<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>

Родительский компонент (ParentComponent.vue)

<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>

Пояснение 1️⃣В дочернем компоненте `ChildComponent`: ✅Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent. ✅Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных. 2️⃣В родительском компоненте ParentComponent: ✅Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked. ✅Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль. Почему это важно? ✅Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому. ✅Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события. ✅Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения. $emit используется для отправки событий из дочернего компонента в родительский, позволяя передавать данные и уведомления о произошедших изменениях. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Как передать данные из родительского компонента в дочерний ? Спросят с вероятностью 7% Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. Шаги для передачи данных из родительского компонента в дочерний 1️⃣Создание родительского компонента: ✅В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. ✅Затем передаем эти данные в дочерний компонент через пропсы. 2️⃣Приём данных в дочернем компоненте: ✅В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Рассмотрим пример, где родительский компонент передает строку message в дочерний компонент. Родительский компонент (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;

Пояснение 1️⃣В родительском компоненте `ParentComponent`: ✅Создаем переменную message, содержащую строку "Привет, дочерний компонент!". ✅В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2️⃣В дочернем компоненте 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;

В React данные передаются из родительского компонента в дочерний с помощью пропсов. В родительском компоненте данные передаются дочернему компоненту через атрибуты JSX, а в дочернем компоненте эти данные принимаются и используются через объект props. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что такое миксины ? Спросят с вероятностью 7% Миксины (mixins) — это способ повторного использования кода в различных контекстах. Позволяют вам создавать фрагменты кода, которые могут быть включены в другие объекты или классы. Это помогает избежать дублирования кода и упрощает его поддержку и расширение. Миксины Часто используются для добавления методов или свойств к классам. Это позволяет комбинировать функциональность из разных источников.

let sayHiMixin = {
    sayHi() {
        console.log(`Привет, ${this.name}`);
    },
    sayBye() {
        console.log(`Пока, ${this.name}`);
    }
};

class User {
    constructor(name) {
        this.name = name;
    }
}

// Копируем методы sayHiMixin в User.prototype
Object.assign(User.prototype, sayHiMixin);

let user = new User("Вася");
user.sayHi(); // Привет, Вася
user.sayBye(); // Пока, Вася

В этом примере миксин sayHiMixin добавляет методы sayHi и sayBye к классу User. Миксины в CSS (Sass/SCSS) Обычно используются в препроцессорах, таких как Sass или Less. Миксины позволяют определять наборы стилей, которые можно повторно использовать в различных местах стилей.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
            border-radius: $radius;
}

.box { 
    @include border-radius(10px);
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

В этом примере миксин border-radius определяет стили для создания скругленных углов. Затем он используется в классе .box для применения этих стилей. Почему это важно? ✅Повторное использование кода: Миксины позволяют избежать дублирования кода, что упрощает его поддержку и уменьшает вероятность ошибок. ✅Организация кода: Миксины помогают организовать код, разделяя общую функциональность на логические блоки. ✅Удобство и гибкость: С миксинами легко добавлять или изменять функциональность, не затрагивая основные классы или стили. Миксины — это способ повторного использования кода. Они позволяют добавлять общие методы и свойства к классам (в JavaScript) или повторно использовать наборы стилей. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Какие способы работы с асинхронным кодом знаешь ? Спросят с вероятностью 7% Существует несколько способов работы с асинхронным кодом. Основные из них включают использование обратных вызовов (callbacks), промисов (Promises) и асинхронных функций (async/await). Рассмотрим каждый из них более подробно. 1️⃣Обратные вызовы (Callbacks) Это функции, которые передаются как аргументы в другие функции и вызываются после завершения асинхронной операции.

function fetchData(callback) {
    setTimeout(() => {
        callback('Data received');
    }, 1000);
}

fetchData((data) => {
    console.log(data); // 'Data received'
});

2️⃣Промисы (Promises) Предоставляют более элегантный способ работы с асинхронным кодом, избегая "ад колбэков" (callback hell). Промис может находиться в одном из трёх состояний: ожидание (pending), выполнен (fulfilled) или отклонён (rejected).

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // 'Data received'
    })
    .catch((error) => {
        console.error(error);
    });

3️⃣Асинхронные функции (Async/Await) Это синтаксическая надстройка над промисами, которая позволяет писать асинхронный код так, как будто он синхронный, что делает его более читабельным и удобным.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

async function fetchAsyncData() {
    try {
        const data = await fetchData();
        console.log(data); // 'Data received'
    } catch (error) {
        console.error(error);
    }
}

fetchAsyncData();

4️⃣Асинхронные итераторы (Async Iterators) и генераторы (Generators) Используются для обработки потоков данных асинхронно, что полезно, например, при чтении данных из сетевых запросов или файлов.

async function* asyncGenerator() {
    let i = 0;
    while (i < 3) {
        yield new Promise((resolve) =>
            setTimeout(() => resolve(i++), 1000)
        );
    }
}

(async () => {
    for await (let value of asyncGenerator()) {
        console.log(value); // 0, затем 1, затем 2 (с интервалом в 1 секунду)
    }
})();

Почему это важно? ✅Управление асинхронностью: Все эти способы позволяют эффективно управлять асинхронными операциями, такими как сетевые запросы, таймеры и взаимодействие с базами данных. ✅Читаемость и поддерживаемость кода: Использование промисов и async/await делает код более читаемым и поддерживаемым по сравнению с колбэками, особенно в сложных сценариях. ✅Ошибки и обработка исключений: Промисы и async/await предоставляют удобные механизмы для обработки ошибок, что делает код более устойчивым и надёжным. Основные способы работы с асинхронным кодом включают колбэки, промисы и async/await. Каждый из них предоставляет свои преимущества для управления асинхронными операциями, делая код более читабельным и удобным для поддержки. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем уже завтра. Реклама. ИП Чернова О. А., ИНН:771399721044

В каком случае функция меняет контекст ? Спросят с вероятностью 3% Контекст выполнения функции определяется значением ключевого слова this. Контекст может изменяться в зависимости от способа вызова функции. Рассмотрим основные случаи, когда контекст функции меняется: 1️⃣Вызов функции как метода объекта Когда функция вызывается как метод объекта, контекст (this) ссылается на этот объект.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // 'Alice'

В этом примере this внутри функции greet ссылается на объект obj. 2️⃣Вызов функции без контекста (как обычная функция) Когда функция вызывается как обычная функция (не как метод объекта), контекст (this) ссылается на глобальный объект (window в браузере или global в Node.js). В строгом режиме (strict mode) контекст будет undefined.

function globalFunction() {
  console.log(this);
}

globalFunction(); // В нестрогом режиме: window (в браузере), в строгом режиме: undefined

3️⃣Вызов конструктора (с использованием new) Когда функция вызывается с использованием ключевого слова new, она работает как конструктор, и контекст (this) ссылается на новый объект, созданный этой функцией.

function Person(name) {
  this.name = name;
}

const person = new Person('Bob');
console.log(person.name); // 'Bob'

4️⃣Явное задание контекста с помощью call, apply и bind Позволяют явно задать контекст (this) для функции. ✅`call`: вызывает функцию с указанным контекстом и аргументами. ✅`apply`: вызывает функцию с указанным контекстом и аргументами в виде массива. ✅`bind`: возвращает новую функцию, которая при вызове имеет указанный контекст. Пример:

function greet() {
  console.log(this.name);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Dave' };

greet.call(person1); // 'Charlie'
greet.apply(person2); // 'Dave'

const boundGreet = greet.bind(person1);
boundGreet(); // 'Charlie'

5️⃣Стрелочные функции Не имеют своего собственного контекста (this). Вместо этого они наследуют контекст из внешней функции, в которой были объявлены. Это поведение называется "лексическим this".

const obj = {
  name: 'Eve',
  greet: function() {
    const arrowFunction = () => {
      console.log(this.name);
    };
    arrowFunction();
  }
};

obj.greet(); // 'Eve'

В этом примере this внутри стрелочной функции ссылается на объект obj, потому что стрелочная функция была объявлена внутри метода greet этого объекта. 6️⃣Методы как коллбеки Когда методы объектов передаются как коллбеки, контекст может измениться. Это часто происходит, если метод используется вне контекста своего объекта.

const obj = {
  name: 'Frank',
  greet: function() {
    console.log(this.name);
  }
};

setTimeout(obj.greet, 1000); // undefined или ошибка, так как this ссылается на глобальный объект или undefined в строгом режиме

Чтобы сохранить контекст, можно использовать bind:

setTimeout(obj.greet.bind(obj), 1000); // 'Frank'

Функция меняет контекст (this) в зависимости от способа ее вызова. Контекст может быть объектом, если функция вызывается как метод; новым объектом, если функция вызывается как конструктор; глобальным объектом или undefined, если функция вызывается как обычная функция; явно заданным при использовании call, apply или bind; или унаследованным из внешней функции в случае стрелочных функций. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых