Основы фронтенд-интервью (необходимо освоить в течение 1 года)

Компания «Золотая тройка» «Серебряная четверка» попросила меня взять интервью у фронтенда годового опыта, поэтому я потратил время на изучение вопросов интервью.

css общий макет

базовая стоимость	flexbox	grid	table	плавающий макет
none	flex	grid	table	float-fixed
inline	inline-flex	inline-grid	table-row	float-fluid
block			table-cell	Макет сетки 960
inline-block

Проблемы и решения использования встроенного блока

проблема с горизонтальным зазором Это связано с тем, что при написании кода ввод пробелов и новых строк будет генерировать пробелы. Браузер не игнорирует пробелы и автоматически объединяет несколько последовательных пробелов в один, поэтому возникает так называемый пробел.

Вообще говоря, у нас есть два способа удалить этот пробел, вызванный новой строкой:Код не переносится и не устанавливает размер шрифта.

(Рекомендуется) Устраните этот пробел, установив размер шрифта родителя равным 0, а затем сбросив размер шрифта дочернего элемента, чтобы восстановить текстовые символы дочернего элемента.Просто установите встроенный блок, чтобы перейти к промежутку

плавать очистить плавать детали

В основном для того, чтобы решить проблему перекрытия или коллапса высоты родительского элемента из-за отрыва плавающего элемента.

Очистить поплавок предыдущего родственного элемента

Очистить плавающий элемент предыдущего родственного элемента легко, просто используйте clear:both для элемента, на который вы не хотите воздействовать плавающим элементом.

Закрытый дочерний элемент плавает

Установить clearfix для элементаОбычно используется

通过父元素的伪元素（::after）实现的著名 clearfix 方法，代码如下：
<div class="container clearfix">
    <div class="box"></div>
</div>
.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
给父元素增加一个专门用于处理闭合子元素浮动的 clearfix 类名，该类使用 ::after 伪元素类选择器增加一个内容为空的结构来清除浮动.

Создайте родительский элемент для BFC (контекст форматирования блока)

Для получения более подробной информации, пожалуйста, расскажите о таргетинге

Реализуйте эффект центрирования всплывающего окна в полноэкранном режиме.

div использует абсолютный макет, установитеmargin:auto;и установитьtop、left、right、bottomЗначения равны, не обязательно все 0.

.center{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Абсолютный макет, пусть и левый, и верхний будут равны 50%, что делает крайний левый элемент div на 50% дальше от крайнего левого края экрана в горизонтальном направлении и на то же самое в вертикальном направлении, поэтому используйте преобразование для перевода его собственной ширины влево (вверху) ( 50% высоты), достигается эффект центрирования, а рендеринг такой же, как и выше.

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Сказал, что под несколькими обычно используемыми селектор

Пять селекторов классов:

базовый селектор

Выбор элемента (получить имя элемента напрямуюP、h1) [слишком прямо]
выбор идентификатора (#id) [Значение уникально и не может использоваться повторно]
Выбор класса (.class) [сочетание, повторное использование]
*Общий селектор (все элементы)

селектор отношений
Селектор псевдокласса

:nth-child(n): n может быть числом (4), ключевым словом (старым, четным) или формулой (2n+1)
:active: добавить стили к активному элементу
:focus: добавить стиль к выбранному элементу
:hover: добавлять стили, когда мышь находится над элементом
:link: добавить в непосещенную ссылку
:visited, чтобы добавить к посещенным ссылкам
:first-child: добавить к первому дочернему элементу
:lang: определяет используемый язык

Селектор псевдоэлементов :first-letter : первая буква для добавления в текст :first-line : добавить в первую строку текста :before : вставить что-то перед элементом :after : вставить что-то после элемента
селектор атрибутов

Расскажите о новых возможностях CSS3.

Семантические элементы HTML5
Веб-хранилище HTML5

sessionStorage: хранилище данных клиента, которое может поддерживаться только в рамках текущего сеанса.
localStorage: хранилище данных на стороне клиента, которое может поддерживаться в течение нескольких сеансов. Данные объектного хранилища не имеют ограничения по времени. Для большого количества сложных структур данных обычно используется IndexDB.

Мультимедийный запрос CSS3 @media all and(min-width:800px){...}
CSS3 преобразования и трансформации: преобразование
Переход CSS3: переход
Анимация CSS3: анимация

Реализация асинхронного запроса

Самый примитивный js, новый XMLHttpRequest();//由于浏览器兼容的原因，代码复杂，多使用基于jQuery的异步请求方法（内部封装）
Подход Ajax на основе jQuery:
Vue--axios (обещание)

Расскажите свой собственный метод отладки кода

Работа с массивами JS

concat() объединяет два или более массива и возвращает результат
join() разбивает массив по указанному разделителю и объединяет его в строку
pop() удаляет и возвращает последний элемент массива
push() добавляет один или несколько элементов в конец массива и возвращает новую длину
reverse() меняет порядок элементов в массиве на обратный

JQ DOM SELECTOR, MANIPULTULL DOM

append() : вставляет содержимое, указанное параметром, в конец элемента.
prepend(): вставляет содержимое, указанное параметром, в начало элемента.
after() : вставить содержимое после соответствующего элемента.
before(): вставить содержимое перед каждым соответствующим элементом.
addClass(): добавляет указанное имя класса к соответствующему элементу.
attr() : устанавливает или возвращает атрибут и значение соответствующего элемента.
Removeattr (): Удаляет указанный атрибут.

Преимущество фреймворка VUE

МВВМ: Уровень модели представляет собой модель данных, и в модели также может быть определена бизнес-логика модификации и работы с данными; Представление представляет компонент пользовательского интерфейса, который отвечает за преобразование модели данных в пользовательский интерфейс и его отображение. ViewModel — это объект, который синхронизирует представление и модель.
Между mvc и mvvm нет большой разницы. Это все дизайнерская идея. Главное, что Controller в mvc превратился в viewModel в mvvm. mvvm в основном решает проблему, заключающуюся в том, что большое количество операций DOM в mvc снижает производительность рендеринга страниц, замедляет скорость загрузки и влияет на взаимодействие с пользователем.

разницаVue, управляемый данными, через данные для отображения слоя представления, а не операций узла. Сценарий: сценарии с большим количеством операций с данными более удобны.

жизненный цикл vue (подробно)

beforeCreate: некоторые параметры инициализируются, если есть одинаковые параметры, параметры объединяются и выполняется beforeCreate, объекты el и data не определены и не инициализированы;
created: Inject, Provide, props, методы, данные, вычисляемые и наблюдающие инициализируются, а created выполняется, данные доступны, el еще нет;
beforeMount: проверить, существует ли атрибут el, если он существует, выполнить операцию рендеринга dom и выполнить beforeMount; $el и данные инициализированы, но dom все еще является виртуальным узлом, и соответствующие данные в dom не были заменены;
Mounted: создать экземпляр Watcher, визуализировать дом и выполнить его смонтированным; экземпляр vue смонтирован, и соответствующие данные в доме успешно отображены;
beforeUpdate: после рендеринга dom, после выполнения смонтированного хука, когда данные обновятся, выполнить beforeUpdate;
обновлено: проверьте текущий список наблюдателей, чтобы увидеть, есть ли наблюдатель, чьи данные в настоящее время обновляются, и если есть, выполните обновление;
beforeDestroy: проверьте, был ли он удален, если он был удален, верните его напрямую, в противном случае выполните beforeDestroy;
уничтожено: стереть все следы себя;

git общие команды

git clone:  下载初始化
Git add:添加
Git commit -m ‘ ’ :提交 带消息
Git push：推送
Git pull： 拉取

Фронтенд-интервью 1W

Пожалуйста, отметьте источник для перепечатки.Спасибо ~ Если вы считаете, что это полезно, пожалуйста, обведите его, и я время от времени буду публиковать передовые знания позже.