Простая шина событий для общения между компонентами во Vue 2
2 года назад·2 мин. на чтение
Иногда нужно реализовать быстрое и простое решение для передачи данных между компонентами Vue.js.
Конечно, есть Vuex для централизованного управления состоянием. Таким образом, он может обеспечить приложению единый источник истины.
Но для приложения с простой архитектурой достаточно общаться между компонентами с помощью событий. Для этого мы можем создать быстрое решение и реализовать шину событий (event bus). Шину событий позволяет нам отправлять в одном компоненте и слушать это событие в другом.
В данном примере будет показано, как это сделать в приложении Vue.js. Благодаря простоте фреймворка Vue он позволяет нам создать механизм обмена событиями с помощью нескольких строк кода.
Здесь у нас есть компонент ComponentA, который импортирует
Здесь мы создали JavaScript ES6 модуль, который импортирует Vue, создали и экспортировали новый экземпляр Vue. Вот и все. Мы реализовали EventBus и теперь можем начать его использовать.// eventBus.js import Vue from "vue"; export const eventBus = new Vue();
eventBus
. Когда вызывается метод emitMethod()
компонента, он испускает новое событие с именем EVENT_NAME
и передает вместе с ним данные события (payload).
В другом компоненте мы можем зарегистрировать слушателя, который слушает событие// ComponentA.js <script> import { eventBus } from "./eventBus"; export default { name: "ComponentA", methods: { emitMethod() { eventBus.$emit("EVENT_NAME", { data: "someData" }); }, }, }; </script> <template> <p>ComponentA</p> </template>
EVENT_NAME
, передаваемое по шине eventBus
. Как только событие появится, мы можем выполнить JavaScript с полученным в качестве аргумента payload.
Вот и все. Вот так просто мы создали решение для передачи событий между различными частями нашего приложения.// ComponentB.js <script> import { eventBus } from "./eventBus"; export default { name: "ComponentB", mounted() { eventBus.$on("EVENT_NAME", this.handleEvent); }, beforeUnmount() { eventBus.$off("EVENT_NAME", this.handleEvent); }, methods: { handleEvent(payload) { console.log(payload); // => { data: "someData" } }, }, }; </script> <template> <p>ComponentB</p> </template>
В этом примере мы создали и реализовали механизм передачи данных между слабосвязанными компонентами. Не тратя много времени и усилий на изучение принципов Vuex, Redux или других фреймворков с неизменяемым состоянием. Это удобный способ коммуникации для более простой архитектуры. Которая впоследствии может быть усовершенствована путем внедрения какого-либо централизованного фреймворка управления состояниями по мере роста приложения.// App.js <script> import ComponentA from "./ComponentA"; import ComponentB from "./ComponentB"; export default { name: "App", components: { ComponentA, ComponentB, }, }; </script> <template> <div> <ComponentB /> <ComponentA /> </div> </template>
12 популярных вопросов с ответами на JavaScript собеседовании
2 года назад·4 мин. на чтение
Эта статья предназначена для junior разработчиков, которые хотят получить свою первую работу в качестве JavaScript разработчиков.
1. Что такое JavaScript и для чего он используется?
Javascript - это высокоуровневый, динамичный и интерпретируемый язык программирования, широко используемый для многих сред, таких как интерфейс веб-сайтов, backend службы, desktop и мобильные приложения. Но чаще всего JavaScript используется для создания динамических и интерактивных веб-сайтов.2. Что такое замыкание в JavaScript?
Замыкание — это функция, которая имеет доступ к переменным своей внешней функции. Это важно, потому что это позволяет внутренней функции «запоминать» переменные из своей внешней области, поэтому она может продолжать получать к ним доступ и манипулировать ими даже после того, как внешняя функция была завершена.function outerFunction(x) { return function innerFunction(y) { return x + y; }; } const add5 = outerFunction(5); console.log(add5(3)); // 8
3. Как this
работает в JavaScript?
this
важное ключевое слово в JavaScript. Его значение определяется тем, как вызывается функция. Его можно задать явно с помощью call()
, apply()
или bind()
.
По умолчанию его значение внутри функции устанавливается в глобальный объект (в браузере это объект window
), за исключением того, когда функция вызывается как метод объекта.
В этом случае this
указывает на объект, методом которого он является.
4. Что такое поднятие (hoisting) в JavaScript?
В JavaScript поднятие — это поведение, при котором переменные и объявления функций в памяти автоматически перемещаются в верхнюю часть своей области. Что это значит? Ну, это означает, что эти переменные могут быть использованы до того, как они будут объявлены, и объявления функций также могут быть вызваны до их определения.5. В чем разница между var
, let
и const?
var
: Переменные, объявленные с помощьюvar
, имеют функциональную область действия, что означает, что к ним можно получить доступ только в рамках функции, в которой они были объявлены. Внешняя переменная затеняется, когда переменная с тем же именем объявляется во вложенной функции.let
: Пусть переменные имеют блочную область действия, что означает, что они доступны только в том блоке, в котором они объявлены. Объявление переменной с тем же именем во вложенном блоке приведет к затенению внешней переменной.const
: переменные, объявленные с помощьюconst
, также какlet
, имеют область действия блока, но их нельзя переназначить.
function example() { var x = 1; let y = 2; const z = 3; if (true) { var x = 4; let y = 5; const z = 6; } console.log(x); // 4 console.log(y); // 2 console.log(z); // 3 } example();
6. Какова разница между ==
и ===
?
Оператор равенства ==
выполняет принудительное приведение типа, что означает, что он попытается преобразовать операнды в один и тот же тип перед их сравнением. С другой стороны, оператор строгого равенства ===
, не выполняет приведение типа. Он возвращает значение true
только в том случае, если оба операнда имеют одинаковый тип и значение.
Например:
console.log(1 == '1'); // true console.log(1 === '1'); // false
7. В чем разница между null
и undefined
?
undefined
указывает, что переменная была объявлена, но ей не было присвоено значение. Значение null
представляет собой преднамеренное отсутствие какого-либо значения объекта. Другими словами, null
— это явно заданное значение, указывающее на отсутствие значения.
8. Что такое событие в JavaScript?
В JavaScript событие — это любое действие в браузере, например нажатие пользователем кнопки, загрузка страницы или обновленный элемент. Слушатели событий обычно обрабатывают события, позволяя разработчикам указывать функции, которые должны выполняться при возникновении события. Пример:const button = document.querySelector('button'); button.addEventListener('click', () => { console.log('Button was clicked!'); });
9. В чем разница между синхронным и асинхронным кодом в JavaScript?
Синхронный код выполняется блокирующим образом, что означает, что следующая строка кода будет выполнена после завершения текущей строки. С другой стороны, асинхронный код выполняется неблокирующим образом, что означает, что другой код может выполняться не ожидая завершения асинхронного кодом. Асинхронный код обычно реализуется в JavaScript с помощью обратных вызовов или Promises.10. Что такое промисы (Promise) в JavaScript?
Объект Promise — это объект, представляющий успешное или неудачное завершение асинхронной операции. Promise позволяет регистрировать обратные вызовы для получения уведомлений о завершении или сбое асинхронной операции, а также обрабатывать ошибки более удобно и централизованно. Например:const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Data fetched!'); }, 1000); }); }; fetchData() .then(data => { console.log(data); }) .catch(error => { console.error(error); });
11. Что такое обратный вызов в JavaScript?
Функция обратного вызова передается в качестве аргумента другой функции и выполняется после завершения внешней функции. Разработчики могут использовать обратные вызовы для указания кода, который будет выполняться после завершения асинхронной операции. Пример:const fetchData = (callback) => { setTimeout(() => { callback('Data fetched!'); }, 1000); }; fetchData(data => { console.log(data); });
12. Что такое AJAX в JavaScript?
AJAX (асинхронный JavaScript и XML) — это метод выполнения асинхронных серверных запросов с веб-страницы без перезагрузки всей страницы. AJAX позволяет разработчикам динамически обновлять веб-страницу новыми данными без необходимости обновления страницы. Это достигается путем отправки HTTP-запроса из браузера на сервер и обновления только тех частей страницы, которые требуют его с ответом. Это улучшает взаимодействие с пользователем, поскольку страница не перезагружается, а обновляются только необходимые данные. Пример:Еще больше вопросов с собеседований можно найти здесь.const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data'); xhr.onreadystatechange = () => { if (xhr.readyState === XMLHttpRequest.DONE) { console.log(xhr.responseText); } }; xhr.send();