Модификаторы доступа
Модификаторы доступа - это ключевые слова в объектно-ориентированных языках программирования, устанавливающие доступность классов, их свойств и методов.
Традиционно языки программирования поддерживает такие модификаторы доступа:
- private: Модификатор доступа private, применённый к свойству класса, традиционно делает это свойство доступным для чтения/записи только в методах и конструкторе этого класса. Получить доступ к этому свойству снаружи класса, обращаясь к нему через экземпляр, не получится.
- protected: Модификатор доступа protected, применённый к свойству класса, делает его доступным только в рамках этого класса и внутри классов-наследников.
- public: Модификатор доступа public, применённый к свойству класса, делает его доступным отовсюду посредством обращения к экземпляру.
👉 @frontendInterview
Модификаторы доступа - это ключевые слова в объектно-ориентированных языках программирования, устанавливающие доступность классов, их свойств и методов.
Традиционно языки программирования поддерживает такие модификаторы доступа:
- private: Модификатор доступа private, применённый к свойству класса, традиционно делает это свойство доступным для чтения/записи только в методах и конструкторе этого класса. Получить доступ к этому свойству снаружи класса, обращаясь к нему через экземпляр, не получится.
- protected: Модификатор доступа protected, применённый к свойству класса, делает его доступным только в рамках этого класса и внутри классов-наследников.
- public: Модификатор доступа public, применённый к свойству класса, делает его доступным отовсюду посредством обращения к экземпляру.
👉 @frontendInterview
👍4🔥1
Программирование в алгоритмах
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
🔥4
Reverse words
Напишите функцию, которая принимает строку и разворачивает каждое слово в строке. Все пробелы должны быть сохранены.
Пример:
👉 @frontendInterview
Напишите функцию, которая принимает строку и разворачивает каждое слово в строке. Все пробелы должны быть сохранены.
Пример:
"This is an example!" ==> "sihT si na !elpmaxe" "double spaces" ==> "elbuod secaps"👉 @frontendInterview
Что такое Virtual DOM?
Virtual DOM — это концепция в React, при которой создается и хранится в памяти легковесное виртуальное представление фактического DOM (Document Object Model). Это метод программирования, используемый для оптимизации производительности веб-приложений.
Когда вносятся изменения в данные или состояние компонента React, виртуальный DOM обновляется вместо того, чтобы напрямую манипулировать реальным DOM. Затем виртуальный DOM вычисляет разницу между предыдущим и обновленным состоянием компонента. Этот процесс известен под названием сравнения (diffing).
После того, как различия выявлены, React эффективно обновляет только необходимые части реального DOM, чтобы отразить изменения. Такой подход минимизирует количество фактических манипуляций с DOM и повышает общую производительность приложения.
Используя виртуальный DOM, React предоставляет способ создания динамических и интерактивных пользовательских интерфейсов, обеспечивая при этом оптимальную эффективность и скорость рендеринга.
👉 @frontendInterview
Virtual DOM — это концепция в React, при которой создается и хранится в памяти легковесное виртуальное представление фактического DOM (Document Object Model). Это метод программирования, используемый для оптимизации производительности веб-приложений.
Когда вносятся изменения в данные или состояние компонента React, виртуальный DOM обновляется вместо того, чтобы напрямую манипулировать реальным DOM. Затем виртуальный DOM вычисляет разницу между предыдущим и обновленным состоянием компонента. Этот процесс известен под названием сравнения (diffing).
После того, как различия выявлены, React эффективно обновляет только необходимые части реального DOM, чтобы отразить изменения. Такой подход минимизирует количество фактических манипуляций с DOM и повышает общую производительность приложения.
Используя виртуальный DOM, React предоставляет способ создания динамических и интерактивных пользовательских интерфейсов, обеспечивая при этом оптимальную эффективность и скорость рендеринга.
👉 @frontendInterview
👎8😁3👍1👏1
Как включить в расчёт ширины и высоты элемента его border?
Anonymous Quiz
4%
display: block
14%
box-sizing: content-box
3%
box-sizing: fit-content
80%
box-sizing: border-box
Что такое Vue.js и какие в нём основные фичи?
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи
1. Виртуальный DOM: Vue использует виртуальный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM.
2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue.
3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue.
4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением.
5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router.
6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
👉 @frontendInterview
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи
1. Виртуальный DOM: Vue использует виртуальный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM.
2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue.
3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue.
4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением.
5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router.
6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
👉 @frontendInterview
🔥7🥰2❤1
Как изменить opacity для элемента input, у которого установлен атрибут 'type' со значением "radio"?
Anonymous Quiz
86%
input[type="radio"]
7%
input:radio
3%
input:where(radio)
4%
input:is(radio)
🔥7👏3
Какие переменные доступны только внутри блока, в котором были объявлены, в JavaScript?
Anonymous Quiz
3%
Глобальные переменные
31%
Локальные переменные
64%
Переменные, объявленные с помощью ключевых слов let и const
2%
Переменные, объявленные с помощью ключевого слова var
👍14👎14
Чем отличается Vue 3 от Vue 2?
Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
👉 @frontendInterview
Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
👉 @frontendInterview
👍5❤2
Software Design by Example: A Tool-Based Introduction with JavaScript (2022)
Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.
👉 @frontendInterview
Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.
👉 @frontendInterview
👍7🔥2❤1
Beginner Series #2 Clock
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
👉 @frontendInterview
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
h = 0 m = 1 s = 1 result = 61000👉 @frontendInterview
👍1
Перечислите методы жизненного цикла компонента Vue
- beforeCreate: Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.
- created: Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el на данный момент недоступно.
- beforeMount: Вызывается непосредственно перед начало монтирования: функция render будет вызываться в первый раз. Не вызывается при отрисовке на стороне сервера.
- mounted: Вызывается после монтирования экземпляра. vm.$el установлено. Если необходимо подождать, пока не будут отрисованы и все дочерние, то можно воспользоваться vm.$nextTick внутри mounted.
- beforeUpdate: Вызывается при изменении данных, перед обновлением DOM. Это удобное место для получения доступа к существующему DOM перед обновлением, например, чтобы вручную удалить добавленные слушатели событий. Не вызывается при отрисовке на стороне сервера, потому что на стороне сервера выполняется только первоначальная отрисовка.
- updated: Вызывается после того, как обновится виртуальный DOM вследствие изменений данных.
DOM компонента будет уже обновлён к моменту вызова этого хука, поэтому здесь можно выполнять операции связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью методов-наблюдателей.
Обратите внимание, что updated не гарантирует, что все дочерние компоненты также были перерисованы. Если необходимо подождать, пока дочерние компоненты не будут повторно отрисованы, можно воспользоваться vm.$nextTick внутри updated.
Не вызывается при отрисовке на стороне сервера.
- activated: Вызывается при активации компонента внутри <keep-alive>. Не вызывается при отрисовке на стороне сервера.
- deactivated: Вызывается после деактивации компонента внутри <keep-alive>. Не вызывается при отрисовке на стороне сервера.
- beforeUnmount: Вызывается перед демонтированием экземпляра компонента. На этом этапе экземпляр компонента всё ещё полностью работоспособен. Не вызывается при отрисовке на стороне сервера.
- unmounted: Вызывается после того, как экземпляр компонента размонтирован. Когда этот хук вызван, все директивы экземпляра компонента уже отвязаны, все слушатели событий удалены и все дочерние экземпляры компонентов размонтированы. Не вызывается при отрисовке на стороне сервера.
- errorCaptured: Вызывается, когда фиксируется ошибка из любого дочернего компонента. Хук получает три аргумента: ошибку, экземпляр компонента, в котором вызвана ошибка, и строку с информацией, где была зафиксирована ошибка. Хук может возвращать false, чтобы остановить дальнейшее распространение ошибки.
-renderTracked: Служит для отслеживания перерисовки виртуального DOM. Хук получает в качестве аргумента debugger event. Это событие сообщает, какая операция была отслежена в компоненте и целевой объект, а также ключ этой операции.
-renderTriggered: Вызывается при срабатывании перерисовки виртуального DOM. Подобно renderTracked в качестве аргумента получает debugger event. Это событие сообщает, какая операция вызвала перерисовку, а также целевой объект и ключ этой операции.
👉 @frontendInterview
- beforeCreate: Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.
- created: Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el на данный момент недоступно.
- beforeMount: Вызывается непосредственно перед начало монтирования: функция render будет вызываться в первый раз. Не вызывается при отрисовке на стороне сервера.
- mounted: Вызывается после монтирования экземпляра. vm.$el установлено. Если необходимо подождать, пока не будут отрисованы и все дочерние, то можно воспользоваться vm.$nextTick внутри mounted.
- beforeUpdate: Вызывается при изменении данных, перед обновлением DOM. Это удобное место для получения доступа к существующему DOM перед обновлением, например, чтобы вручную удалить добавленные слушатели событий. Не вызывается при отрисовке на стороне сервера, потому что на стороне сервера выполняется только первоначальная отрисовка.
- updated: Вызывается после того, как обновится виртуальный DOM вследствие изменений данных.
DOM компонента будет уже обновлён к моменту вызова этого хука, поэтому здесь можно выполнять операции связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью методов-наблюдателей.
Обратите внимание, что updated не гарантирует, что все дочерние компоненты также были перерисованы. Если необходимо подождать, пока дочерние компоненты не будут повторно отрисованы, можно воспользоваться vm.$nextTick внутри updated.
Не вызывается при отрисовке на стороне сервера.
- activated: Вызывается при активации компонента внутри <keep-alive>. Не вызывается при отрисовке на стороне сервера.
- deactivated: Вызывается после деактивации компонента внутри <keep-alive>. Не вызывается при отрисовке на стороне сервера.
- beforeUnmount: Вызывается перед демонтированием экземпляра компонента. На этом этапе экземпляр компонента всё ещё полностью работоспособен. Не вызывается при отрисовке на стороне сервера.
- unmounted: Вызывается после того, как экземпляр компонента размонтирован. Когда этот хук вызван, все директивы экземпляра компонента уже отвязаны, все слушатели событий удалены и все дочерние экземпляры компонентов размонтированы. Не вызывается при отрисовке на стороне сервера.
- errorCaptured: Вызывается, когда фиксируется ошибка из любого дочернего компонента. Хук получает три аргумента: ошибку, экземпляр компонента, в котором вызвана ошибка, и строку с информацией, где была зафиксирована ошибка. Хук может возвращать false, чтобы остановить дальнейшее распространение ошибки.
-renderTracked: Служит для отслеживания перерисовки виртуального DOM. Хук получает в качестве аргумента debugger event. Это событие сообщает, какая операция была отслежена в компоненте и целевой объект, а также ключ этой операции.
-renderTriggered: Вызывается при срабатывании перерисовки виртуального DOM. Подобно renderTracked в качестве аргумента получает debugger event. Это событие сообщает, какая операция вызвала перерисовку, а также целевой объект и ключ этой операции.
👉 @frontendInterview
👍10🔥4
Чему равняется высота элемента .parent в следующем примере?
Anonymous Quiz
54%
0
31%
Высоте элемента .child
15%
Растягивается на всю высоту
👍13
В чем разница между v-show и v-if во Vue?
1. v-if рендерит элемент в DOM-дереве только если выражение истинно, в то время как v-show рендерит его при любом условии, но скрывает при помощи CSS.
2. v-if поддерживает директивы v-else и v-else-if, в то время как v-show не имеет альтернативной директивы.
3. v-if требует больше ресурсов при переключении состояния для рендера, а v-show позволяет делать это максимально быстро, но с соответствующими ограничениями.
4. v-if поддерживает <template>, а v-show нет.
👉 @frontendInterview
1. v-if рендерит элемент в DOM-дереве только если выражение истинно, в то время как v-show рендерит его при любом условии, но скрывает при помощи CSS.
2. v-if поддерживает директивы v-else и v-else-if, в то время как v-show не имеет альтернативной директивы.
3. v-if требует больше ресурсов при переключении состояния для рендера, а v-show позволяет делать это максимально быстро, но с соответствующими ограничениями.
4. v-if поддерживает <template>, а v-show нет.
👉 @frontendInterview
👍7
👍16🔥7