Я пишу это резюме после интервью с 50 людьми.

опрос

Весенний фестиваль в 2019 году кажется очень ранним.После нового года я считаю, что многие детские туфли начинают двигаться.Автор обобщил ряд руководств, объединив мой обычный опыт интервью, и организовал этот документ, надеясь помогите каждому удивиться переднему знанию.слепое пятно. Статья очень длинная, очень длинная, очень длинная. . . . (рекомендуется сначала собрать,技术大佬请Ctrl+F4，面向基础)

Организовать не просто, надеюсь все обратят внимание на паблик номер【前端壹读】, вас ждет больше фронтенд оригинальных хороших статей.

1. ССЦ

коробочная модель

   Блочная модель CSS — это, по сути, блок, который инкапсулирует окружающие элементы HTML, включая: поля, границы, отступы и фактическое содержимое. Блочная модель позволяет размещать элементы в пространстве между другими элементами и границами окружающих элементов.

Box-Model.jpg

box-sizing: content-box(блочная модель W3C, также известная как стандартная блочная модель): ширина и высота элемента выражаются как размер содержимого.box-sizing: border-box(блочная модель IE, она же странная блочная модель): ширина и высота элемента выражаются как размер содержимого + отступ + граница. Фон простирается до внешнего края границы.

Что нового в CSS3

  • перенос слов перенос слов
  • Как отображать переполнение текста, когда оно выходит за пределы указанного контейнера
  • text-decoration рендеринг текста
  • тень текста тень текста
  • эффект градиента
  • переход эффект перехода transition-duration: продолжительность перехода
  • трансформировать растяжение, сжатие, поворот, смещение и другие преобразования
  • анимация анимация

Разница между переходом и анимацией:

Большинство свойств анимации и перехода одинаковы. Они оба изменяют значения свойств элементов с течением времени. Основное различие между ними заключается в том, что для перехода необходимо инициировать событие для изменения свойств, в то время как анимация не должна запускаться. любые события меняться во времени.Значение атрибута,и переход 2 кадра,от от....до,и анимация может быть кадр за кадром.

Селекторы CSS и их приоритеты

  • !important
  • Стиль встроенного стиля = ""
  • Селектор идентификатора #id
  • селектор класса/селектор атрибутов/селектор псевдокласса.class.active[href=""]
  • Селектор элементов/селектор отношений/селектор псевдоэлементов html+div>span::after
  • селектор подстановочных знаков*

BFC

Контекст форматирования BFC (Block Formatting Context) — это режим рендеринга CSS макета блочной модели на веб-страницах, который относится к независимой области рендеринга или изолированному независимому контейнеру. 

Приложение BFC

  • Предотвратить перекрытие полей
  • очистить внутренний поплавок
  • Отзывчивый макет с двумя (многоколонками)
  • предотвратить перенос шрифта

Запустить условие BFC

  • корневой элемент
  • Значение float не равно none
  • Значение переполнения не видно
  • Значение display: inline-block, table-cell, table-caption.
  • Значение position абсолютное, фиксированное

Характеристики БФК

  • Внутренние коробки будут размещены одна за другой в вертикальном направлении.
  • Расстояние по вертикали определяется запасом
  • Область bfc не перекрывает область элемента float.
  • При расчете высоты бфц в расчете также участвуют плавающие элементы
  • BFC — это независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы.

div по центру по горизонтали

  1. встроенный элемент
.parent {
    text-align: center;
}
  1. элемент блочного уровня
.son {
    margin: 0 auto;
}
  1. гибкий макет
.parent {
    display: flex;
    justify-content: center;
}
  1. Абсолютное позиционирование
.son {
    position: absolute;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}
  1. Абсолютная переменная ширина позиционирования
.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
  1. left/right: 0
.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}

div с центрированием по вертикали

  1. встроенный элемент
.parent {
    height: 高度;
}
.son {
    line-height: 高度;
}
  1. table
.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
  1. flex
.parent {
    display: flex;
    align-items: center;
}
  1. Фиксированная высота абсолютного позиционирования
.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}
  1. Абсолютное позиционирование переменной высоты
.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}
  1. top/bottom: 0;
.son {
    position: absolute;
    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

Абсолютное и относительное позиционирование

  • absoluteАбсолютное позиционирование Относительно ближайшего позиционированного элемента-предка существует позиционированный (ссылающийся на элемент, позиция которого не статична) элемент-предок, и ближайший элемент-предок используется в качестве эталона. Если нет позиционированных элементов-предков, элемент body используется в качестве ссылки смещения, полностью отклоняясь от стандартного потока документов.

  • fixedЭлемент с фиксированным положением позиционируется относительно области просмотра, что означает, что он остается в той же позиции даже при прокрутке страницы. Элемент с фиксированным положением не сохраняет пространство, которое в противном случае было бы на странице.

Общий момент: изменение способа представления встроенных элементов находится вне потока документа; отличие: «корневой элемент» absolute может быть установлен, а «корневой элемент» fixed закреплен за окном браузера.

гибкий макет

Элементы в макете Flex, называемыеFlex 容器(гибкий контейнер), именуемый «контейнером». Все его дочерние элементы автоматически становятся членами контейнера, называемымиFlex 项目(гибкий элемент), именуемый «элемент».

flex.jpeg

  1. свойства родительского элемента
Имя свойства значение атрибута Примечание
display flex Определяет flex-контейнер, прямые дочерние элементы которого примут flex-окружение.
flex-direction row,row-reverse,column,column-reverse Определяет ориентацию главной оси
flex-wrap nowrap,wrap,wrap-reverse Как завернуть если одна ось не подходит
flex-flow [flex-direction] , [flex-wrap] даflex-directionсвойства иflex-wrapСокращение для свойства, по умолчаниюrow nowrap
justify-content flex-start,flex-end,center,space-between,space-around Устанавливает или возвращает выравнивание элементов flexbox в основном (горизонтальном) направлении
align-items flex-start,flex-end,center,baseline,stretch Устанавливает или возвращает выравнивание элементов flexbox в поперечном (вертикальном) направлении
  1. атрибуты дочернего элемента
Имя свойства значение атрибута Примечание
order [int] По умолчанию порядок flex будет представлен в соответствии с порядком записи, который можно изменить через свойство order.Меньшее значение находится впереди, а также может быть отрицательным числом.
flex-grow [number] Устанавливает или извлекает коэффициент расширения flexbox и выделяет оставшееся пространство в соответствии с коэффициентом расширения, установленным элементом flexbox как отношение
flex-shrink [number] Устанавливает или извлекает коэффициент сжатия flexbox и сжимает пространство в соответствии с коэффициентом сжатия, установленным элементом flexbox в качестве отношения
flex-basis [length], auto Установить или получить базовое значение масштабирования flexbox
align-self auto,flex-start,flex-end,center,baseline,stretch Установите или извлеките выравнивание элемента flexbox в направлении боковой оси (вертикальной оси), что может переопределить настройку элементов выравнивания родительского контейнера.

заставить элемент исчезнуть

видимость: скрыта, отображение: нет, z-index=-1, непрозрачность: 0

  1. opacity: 0, элемент скрыт, но не изменяет макет страницы, и если элемент связан некоторыми событиями, такими как событие щелчка, также может быть запущено
  2. видимость: скрыто, элемент скрыт, но не изменит макет страницы, но и не вызовет событие, к которому был привязан элемент
  3. display:none, скрывает элемент и меняет макет страницы, что можно понимать как удаление элемента на странице
  4. z-index=-1 размещается ниже других элементов

очистить поплавок

  1. добавить после плавающего элементаclear:bothпустой элемент div,
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>
  1. добавить к родительскому элементуoverflow:hiddenИли автоматический стиль, активируйте BFC.
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
    zoom:1;   /*IE6*/
}
  1. При использовании псевдоэлементов это также достигается добавлением точки в конце элемента с атрибутом clear: Both.
<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

рекомендоватьПри третьем способе на страницу не будет добавляться новый div, а структура документа будет более четкой.

функция вычисления

Функция calc — это новая функция в CSS 3. Вы можете использовать calc() для вычисления таких свойств, как граница, поля, отступы, размер шрифта и ширина для установки динамических значений.

#div1 {
    position: absolute;
    left: 50px;
    width: calc( 100% / (100px * 2) );
    //兼容写法
    width: -moz-calc( 100% / (100px * 2) );
    width: -webkit-calc( 100% / (100px * 2) );
    border: 1px solid black;
}

будь осторожен:

  • Следует отметить, что перед оператором и после него необходимо резервировать пробел, например: width: calc(100% - 10px);
  • Функция calc() поддерживает операции "+", "-", "*", "/";
  • Для браузеров, не поддерживающих calc(), все выражение значения свойства будет игнорироваться. Но мы можем использовать фиксированное значение в качестве запасного варианта для браузеров, не поддерживающих calc().

мобильный терминал

rem официально определяет «Размер шрифта корневого элемента», который является размером шрифта корневого элемента. rem — это относительная единица CSS, 1rem равен размеру шрифта в элементе html. Следовательно, мы можем изменить размер, представленный 1rem, если мы устанавливаем размер шрифта в html.

(function () {
    var html = document.documentElement;
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

Мобильный 1 пикс.

Вообще говоря, в браузерах на стороне ПК соотношение пикселей устройства (dpr) равно 1, и 1 пиксель CSS соответствует 1 физическому пикселю; но на экранах Retina dpr обычно равно 2 или 3, а 1 пиксель CSS больше не равен 1. равен 1 физическому пикселю, поэтому он выглядит намного толще, чем на самом деле.

  1. Псевдоэлемент + масштаб
<style>
    .box{
        width: 100%;
        height: 1px;
        margin: 20px 0;
        position: relative;
    }
    .box::after{
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        transform-origin: 0 0; 
        background: red;
    }
</style>

<div class="box"></div>
  1. border-image
div{
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}

Трехколоночный макет с фиксированной шириной с обеих сторон и адаптивной посередине.

Схема «Святой Грааль» и схема «двойное летающее крыло» — это важные методы компоновки, которые инженеры-разработчики должны осваивать ежедневно. Функции у них одинаковые, обе для достижения трехколоночного макета с фиксированной шириной с обеих сторон и адаптивной средней шириной.

Макет Святого Грааля

<style>
body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}
</style>
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

Layout.gif

Двухстворчатая компоновка

<style>
body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px;
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}
</style>
<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

Псевдоклассы и псевдоэлементы

CSS представляет концепцию псевдоклассов и псевдоэлементов для форматирования информации за пределами дерева документа. То есть и псевдоклассы, и псевдоэлементы используются для оформления частей, которых нет в дереве документа.

before-after.jpg

псевдокласс

Назначение псевдокласса — найти информацию через селекторы, которых нет в дереве DOM, и информацию, которую нельзя получить с помощью обычных селекторов CSS.

  1. Получить информацию, которой нет в дереве DOM. Например, теги: ссылка, посещение и т. д., эта информация не существует в древовидной структуре DOM и может быть получена только с помощью селекторов CSS;
  2. Получите информацию, которую нельзя получить с помощью обычных селекторов CSS. Например: чтобы получить первый дочерний элемент, мы не можем получить его с помощью обычных селекторов CSS, но мы можем получить его с помощью :first-child.

weilei.png

псевдоэлемент

Псевдоэлементы используются для создания и оформления некоторых элементов, которых нет в дереве документа. Например, мы можем использовать :before, чтобы добавить текст перед элементом и добавить стили к тексту. Хотя пользователь может видеть текст, он фактически не находится в дереве документа. Общие псевдоэлементы:::before,::after,::first-line,::first-letter,::selection,::placeholderЖдать

Следовательно, разница между псевдоклассами и псевдоэлементами заключается в том, что вне дерева документа не создается ни один элемент.

Разница между ::after и :after

В реальной разработке мы увидим, как кто-то пишет псевдоэлементы как:after, что на самом деле вызвано разницей между старыми и новыми стандартами CSS2 и CSS3.

Псевдоэлементы в CSS2 используют одно двоеточие, а в CSS3, чтобы отличить псевдоэлементы от псевдоэлементов, для псевдоэлементов указывается использование двух двоеточий. Итак, для старых псевдоэлементов стандарта CSS2, таких как:first-line,:first-letter,:before,:after, запись двоеточия также может быть распознана браузерами, но для новых псевдоэлементов стандарта CSS3, таких как ::selection, вы должны написать 2 двоеточия.

CSS нарисовать круг, полукруг, веер, треугольник, трапецию

div{
    margin: 50px;
    width: 100px;
    height: 100px;
    background: red;
}
/* 半圆 */
.half-circle{
    height: 50px;
    border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{
    border-radius: 100px 0 0;
}
/* 三角 */
.triangle{
    width: 0px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{
    width: 50px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}

2. JS

JS-типы данных

JS в основном имеет 5 простых типов данных: String, Number, Boolean, Null, Undefined. Справочные типы данных: Объект, Массив, Функция.

Как определить тип данных

При написании бизнес-логики часто используется оценка типа данных JS, и оценка типа данных также используется для глубокого и поверхностного копирования общих случаев в интервью.

typeof

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof undefined);       // undefined
console.log(typeof []);              // object 
console.log(typeof {});              // object
console.log(typeof function(){});    // function
console.log(typeof null);            // object

Преимущества: Возможность быстро различать основные типы данных Недостаток: невозможно различить объект, массив и нуль, все возвращают объект

instanceof

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

Преимущества: может различать массив, объект и функцию, подходит для оценки объектов экземпляра пользовательского класса. Недостатки: числовые, логические, строковые базовые типы данных не могут быть оценены

Object.prototype.toString.call()

var toString = Object.prototype.toString;
 
console.log(toString.call(2));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('str'));                  //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]

Преимущества: точное определение типа данных Недостатки: Метод записи громоздкий и сложный для запоминания, рекомендуется использовать его после инкапсуляции.

Разница между var, let и const

letдляES6Добавлена ​​новая команда объявления переменных, похожая наvar, но со следующими отличиями:

  • varОбласть объявленной переменной находится внутри функции, в которой находится оператор, и существует явление подъема переменной.
  • letОбласть объявленной переменной находится в пределах блока кода, в котором находится оператор, и продвижение переменной отсутствует.
  • constОбъявленная переменная не разрешается модифицировать

Разница между нулем и неопределенным

Тип Undefined имеет только одно значение, undefined. Когда объявленная переменная не была инициализирована, значение переменной по умолчанию не определено. Применение:

  • Когда переменная объявлена, но ей не присвоено значение, она равна неопределенной.
  • При вызове функции параметр, который должен быть предоставлен, не предоставляется, и параметр равен undefined.
  • У объекта нет назначенного свойства, и значение свойства не определено.
  • Когда функция не возвращает значение, по умолчанию она возвращает неопределенное значение.

Тип Null также имеет только одно значение — null. null используется для представления объекта, который еще не существует, и часто используется для обозначения того, что функция пытается вернуть несуществующий объект. Применение

  • В качестве аргумента функции это означает, что аргумент функции не является объектом.
  • как конец цепочки прототипов объектов.

Как определить функцию

  1. объявление функции
//ES5
function getSum(){}
function (){}//匿名函数
//ES6
()=>{}
  1. функциональное выражение
//ES5
var getSum=function(){}
//ES6
let getSum=()=>{}
  1. Конструктор
const getSum = new Function('a', 'b' , 'return a + b')

Понимание области действия JS

Область действия в JS делится на два типа: глобальная область действия и область действия функции. Переменные, определенные в области действия функции, могут быть вызваны только внутри функции, и доступ к внешнему миру невозможен. Нет области на уровне блока, которая приводит к тому, что переменные, определенные в логическом операторе IF или FOR, доступны для внешнего использования, поэтому команды LET и const добавляются к объявлению области на уровне блока.

Дополнительные сведения об областях см.Область JS

Понимание замыканий

Проще говоря, замыкание — это объявление функции внутри функции, по сути, это построение моста между внутренней и внешней частью функции, чтобы дочерняя функция могла получить доступ ко всем локальным переменным в родительской функции, но не наоборот. наоборот, это просто замыкание Одна из функций, а другая, это защита переменной от внешнего загрязнения, чтобы она всегда существовала в памяти.Лучше использовать меньше замыканий в нашей работе, потому что замыкания потребляют слишком много памяти.

Дополнительные сведения о замыканиях см.Закрытие JS

Дедупликация массива

let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];
function unique1(arr){
	let result = [arr[0]];
	for (let i = 1; i < arr.length; i++) {
		let item = arr[i];
		if(result.indexOf(item) == -1){
			result.push(item);
		}
	}
	return result;
}
console.log(unique1(arr));

Дополнительные методы дедупликации JSДедупликация массива JS

Разница между вызовом, применением и привязкой

Роль трех функций заключается в привязке функции к контексту, который используется для изменения точки this в функции; разница между тремя заключается в различии синтаксиса.

fun.call(thisArg[, arg1[, arg2[, ...]]])
fun.apply(thisArg, [argsArray])

такapplyа такжеcallРазница в том,callМетод принимает несколько списков параметров, иapplyReceived — это массив с несколькими параметрами.

Принимая во внимание, что метод bind() создает новую функцию, которая при вызове устанавливает ключевое слово this в предоставленное значение, а при вызове новой функции предоставляет заданную последовательность аргументов перед любым предоставленным.

var bindFn = fun.bind(thisArg[, arg1[, arg2[, ...]]])
bindFn()

Демо:

var name = 'window';
var sayName = function (param) {
    console.log('my name is:' + this.name + ',my param is ' + param)
};
//my name is:window,my param is window param
sayName('window param')

var callObj = {
    name: 'call'
};
//my name is:call,my param is call param
sayName.call(callObj, 'call param');


var applyObj = {
    name: 'apply'
};
//my name is:apply,my param is apply param
sayName.apply(applyObj, ['apply param']);

var bindObj = {
    name: 'bind'
}
var bindFn = sayName.bind(bindObj, 'bind param')
//my name is:bind,my param is bind param
bindFn();

Разница между == и ===

  • ==, когда типы значений на обеих сторонах различаются, сначала следует выполнить преобразование типов, а затем выполнить сравнение.
  • ===, не делайте преобразование типов, разные типы должны быть разными.

==Процесс преобразования типов:

  1. Если типы разные, выполните преобразование типов
  2. Определяет, является ли сравнение нулевым или неопределенным, и если да, то возвращает true .
  3. Определите, являются ли эти два типа строкой и числом, если да, преобразуйте строку в число.
  4. Судите, является ли одно из них логическим, если да, преобразуйте логическое значение в число, а затем оцените
  5. Определить, является ли один из них объектом, а другой строкой, числом или символом, если да, преобразовать объект в примитивный тип и затем судить

Классические вопросы на собеседовании: [] == ![] почему верно

Шаги преобразования:

  1. Оператор ! имеет наивысший приоритет,![]преобразуется в false, поэтому выражение принимает вид:[] == false
  2. Согласно правилам паралий (4) выше, если один логичен, поверните логию на номер, поэтому выражение становится:[] == 0
  3. В соответствии с приведенным выше правилом (5) преобразуйте массив в исходный тип и вызовите метод массива toString(),[]в пустую строку, поэтому выражение принимает вид:'' == 0
  4. В соответствии с приведенным выше правилом (3) типы данных с обеих сторон являются строковыми и числовыми, а пустая строка преобразуется в 0, поэтому выражение принимает вид:0 == 0
  5. Обе стороны имеют одинаковый тип данных, 0 == 0 верно

глубокая копия и мелкая копия

мелкая копия

function simpleClone(obj) {
    var result = {};
    for (var i in obj) {
        result[i] = obj[i];
    }
    return result;
}

Глубокая копия, перебирающая каждое свойство в объекте

function deepClone(obj) {
    let result;
    if (typeof obj == 'object') {
        result = isArray(obj) ? [] : {}
        for (let i in obj) {
            //isObject(obj[i]) ? deepClone(obj[i]) : obj[i]
            //多谢"朝歌在掘金"指出，多维数组会有问题
            result[i] = isObject(obj[i])||isArray(obj[i])?deepClone(obj[i]):obj[i]
        }
    } else {
        result = obj
    }
    return result
}
function isObject(obj) {
    return Object.prototype.toString.call(obj) == "[object Object]"
}
function isArray(obj) {
    return Object.prototype.toString.call(obj) == "[object Array]"
}

Стабилизация и троттлинг

debounce_throttle.png

Стабилизатор

function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}

дросселирование

function throttle(fn, cycle) {
  let start = Date.now();
  let now;
  let timer;
  return function () {
    now = Date.now();
    clearTimeout(timer);
    if (now - start >= cycle) {
      fn.apply(this, arguments);
      start = now;
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, cycle);
    }
  }
}

куки, sessionStorage и localStorage

  • Файлы cookie используются для сохранения информации для входа в систему, и их размер ограничен примерно 4 КБ.
  • localStorage — новое дополнение к Html5. Используется для локального хранения данных. Сохраненные данные не имеют срока действия. Как правило, размер браузера ограничен 5 МБ.
  • Метод интерфейса sessionStorage похож на localStorage, но сохраненные данные будут сохранены только в текущем сеансе и будут очищены после закрытия страницы.
имя продолжительность жизни предельный размер общаться с сервером
cookie Как правило, генерируется сервером, время истечения срока действия может быть установлено. Если файл cookie создается на стороне браузера, по умолчанию срок его действия истекает после закрытия браузера. 4KB Он будет каждый раз передаваться в заголовке HTTP. Если вы используете файлы cookie для сохранения слишком большого объема данных, это вызовет проблемы с производительностью.
localStorage Постоянный, если не очищен 5MB Сохранение только в браузере, без связи с сервером
sessionStorage Действует только для текущего сеанса, очищается после закрытия страницы или браузера 5MB Сохранение только в браузере, без связи с сервером

Как быть с 0,1+0,2!=0,3

Обновите вычисляемое число (умножьте на n-ю степень 10) до целого числа, которое может быть точно распознано компьютером, а затем понизьте (делите на n-ю степень 10) после завершения вычисления, а именно:

(0.1*10 + 0.2*10)/10 == 0.3 //true

Для получения дополнительной информации об обработке точности с плавающей запятой см.Проблема точности с плавающей запятой в JS

JS реализует наследование

Сначала создайте родительский класс

// 定义一个动物类
function Animal(name, color) {
    // 属性
    this.name = name || 'Animal';
    this.color = color || ['black'];
    // 实例方法
    this.sleep = function () {
        console.log(this.name + '正在睡觉！');
    }
}
// 原型方法
Animal.prototype.eat = function (food) {
    console.log(this.name + '正在吃：' + food);
};

Наследование цепочки прототипов

Новый пустой объект, этот пустой объект указывает на Animal, а Cat.prototype указывает на этот пустой объект, это наследование на основе цепочки прототипов.

function Cat(name) {
    this.name = name || 'tom'
}
Cat.prototype = new Animal()

var cat = new Cat()
cat.color.push('red')
cat.sleep() //tom正在睡觉！
cat.eat('fish') //tom正在吃：fish
console.log(cat.color) //["black", "red"]
console.log(cat instanceof Animal) //true
console.log(cat instanceof Cat) //true
var new_cat = new Cat()
console.log(new_cat.color) //["black", "red"]
  • Особенности: Основываясь на цепочке прототипов, это одновременно экземпляр родительского класса и экземпляр подкласса.
  • Недостатки: 1. Множественное наследование невозможно 2. Все новые экземпляры будут иметь общие свойства экземпляра родительского класса.

Структура унаследована

function Dog(name) {
    Animal.call(this)
    this.name = name || 'mica'
}
var dog = new Dog()
dog.color.push('blue')
dog.sleep() // mica正在睡觉！
dog.eat('bone') //Uncaught TypeError: dog.eat is not a function
console.log(dog.color) //["black", "blue"]
console.log(dog instanceof Animal) //false
console.log(dog instanceof Dog) //true
var new_dog = new Dog()
console.log(new_dog.color) //["black"]
  • Особенности: Может быть реализовано множественное наследование (множественные вызовы), что решает проблему, заключающуюся в том, что все экземпляры совместно используют атрибуты экземпляра родительского класса.
  • Недостатки: 1. Может наследовать только свойства и методы экземпляра родительского класса 2. Не может наследовать свойства и методы прототипа.

наследование композиции

function Mouse(name){
    Animal.call(this)
    this.name = name || 'jerry'
}
Mouse.prototype = new Animal()
Mouse.prototype.constructor = Mouse

var mouse = new Mouse()
mouse.color.push('yellow)
mouse.sleep() //jerry正在睡觉！
mouse.eat('carrot') //jerry正在吃：carrot
console.log(mouse instanceof Animal)//true
console.log(mouse instanceof Mouse)//true
var new_mouse = new Mouse()
console.log(new_mouse.color) //["black"]
  • Особенности: Вы можете наследовать свойства/методы экземпляра, а также свойства/методы прототипа.
  • Недостаток: конструктор родительского класса вызывается дважды, и создаются два экземпляра.

3. Вью

понимание mvc и mvvm

MVC

MVC — это контроллер представления модели, короче говоря, он манипулирует данными уровня модели посредством управления контроллером и возвращает их на уровень представления для отображения.

mvc.png

  • View принимает запросы взаимодействия с пользователем
  • Представление перенаправляет запрос контроллеру для обработки.
  • Контроллер управляет моделью для обновления и сохранения данных
  • После сохранения обновления данных Модель уведомит представление об обновлении.
  • Просматривайте данные об изменениях обновлений, чтобы дать пользователям обратную связь

MVVM

MVVM — это Model-View-ViewModel, которая абстрагирует состояние и поведение View, позволяя нам разделить пользовательский интерфейс и бизнес-логику. Преимущества MVVM — низкая связанность, возможность повторного использования и независимая разработка.

mvvm.jpg

  • Представление получает запросы взаимодействия с пользователем
  • View перенаправляет запрос в ViewModel
  • Операция ViewModel Обновление данных модели
  • После того, как модель обновила данные, уведомите ViewModel об изменении данных.
  • Обновления ViewModel Просмотр данных

Шаблон MVVM чем-то похож на MVC, но со следующими отличиями:

  • ViewModel заменяет контроллер ниже уровня пользовательского интерфейса
  • ViewModel предоставляет данные и объекты инструкций, которые ему нужны, для представления.
  • ViewModel получает данные от модели

Подводя итог, MVVM разработан из MVC черезModelснова и сноваViewДобавление невизуального компонента ниже будет происходить изModelданные сопоставляются сViewсередина.

Принцип ответа

Vue использует перехват данных в сочетании с моделью издатель-подписчик.Object.definePropertyПерехватывайте установщик и получатель свойства данных, публикуйте сообщения подписчикам при изменении данных и запускайте соответствующий обратный вызов слушателя.

функция жизненного цикла

  • beforeCreate (перед созданием) Элемент монтирования $el экземпляра vue и данные объекта данных не определены и не были инициализированы.
  • созданные (после создания) данные инициализация данных завершена, эл не инициализирован
  • beforeMount (перед загрузкой) $el и данные экземпляра vue инициализируются, и соответствующая функция рендеринга вызывается в первый раз.
  • установленный (после загрузки) Ajax-взаимодействие выполняется во время этого процесса
  • beforeUpdate (до обновления)
  • обновлено (после обновления)
  • beforeDestroy (перед уничтожением)
  • уничтожено (после уничтожения)

Почему данные компонента возвращают функцию

Данные в компоненте записываются как функция, и данные определяются в виде возвращаемого значения функции, так что каждый раз, когда компонент используется повторно, будут возвращаться новые данные. Если он просто написан в виде объекта, все экземпляры компонентов будут совместно использовать данные, что приведет к загрязнению данных.

Vue не отвечает на новую страницу свойств объекта

Поскольку Vue будет выполнять свойства при инициализации экземпляраgetter/setterпреобразования, поэтому атрибут должен быть вdataобъект, чтобы Vue преобразовал его в реактивный. Vue предоставляет метод $set для запуска обновлений представления.

export default {
    data(){
        return {
            obj: {
                name: 'fei'
            }
        }
    },
    mounted(){
        this.$set(this.obj, 'sex', 'man')
    }

}

Разница между v-if и v-show

v-if является истинным условным рендерингом, так как он гарантирует, что обработчики событий и дочерние компоненты внутри условного блока будут правильно уничтожены и воссозданы во время переключения; также лениво: если условие ложно при начальном рендеринге, ничего не произойдет — условный блок победит. t начать рендеринг до тех пор, пока условие не станет истинным в первый раз.

v-show намного проще — элемент всегда отображается независимо от начального состояния и просто переключается на основе свойства CSS display.

Поэтому v-if подходит для сценариев, которые редко меняют условия во время выполнения и не требуют частого переключения условий; v-show подходит для сценариев, требующих очень частого переключения условий.

принцип двусторонней привязки v-модели

v-model по сути является синтаксическим сахаром, v-model внутренне использует разные свойства и выдает разные события для разных элементов ввода.

  • элементы text и textarea используют атрибут value и событие ввода
  • флажок и радио используют проверенный атрибут и событие изменения
  • поле выбора имеет значение как опору и изменение как событие

Таким образом, мы можем переписать v-модель следующим образом:

<input v-model="sth" />
//  等同于
<input :value="sth" @input="sth = $event.target.value" />

Этот синтаксический сахар должен быть фиксированным, то есть атрибут должен быть Value, а имя метода должно быть: Input.

Зная принцип V-модели, мы можем реализовать V-модель на пользовательских компонентах.

//Parent
<template>
    {{num}}
    <Child v-model="num">
</template>
export default {
    data(){
        return {
            num: 0
        }
    }
}

//Child
<template>
    <div @click="add">Add</div>
</template>
export default {
    props: ['value'],
    methods:{
        add(){
            this.$emit('input', this.value + 1)
        }
    }
}

Роль ключа

  1. Пусть Vue точно отслеживает каждый элемент,高效的更新虚拟DOM.
  2. триггерный переход
<transition>
  <span :key="text">{{ text }}</span>
</transition>

При изменении текста ключевой атрибут этого элемента меняется, при рендеринге и обновлении Vue будет думать, что здесь создается новый элемент, а старый элемент будет удален, потому что ключ не существует, тем самым инициируя переход.

эффект атрибута с ограниченной областью действия

В теге стиля в файле Vue есть специальный атрибут scoped. Когда тег стиля имеет атрибут scoped, его стиль css можно использовать только для текущего компонента Vue, чтобы стили компонентов не загрязняли друг друга. Если все теги стилей проекта добавляются с атрибутом scoped, это эквивалентно реализации модуляризации стилей.

Принцип реализации атрибута с областью действия заключается в добавлении уникального динамического атрибута к каждому элементу DOM и добавлении соответствующего селектора атрибута в селектор CSS для выбора DOM в компоненте.

<template>
    <div class="box">dom</div>
</template>
<style lang="scss" scoped>
.box{
    background:red;
}
</style>

Vue переводит код в следующее:

.box[data-v-11c6864c]{
    background:red;
}
<template>
    <div class="box" data-v-11c6864c>dom</div>
</template>

проникновение в стиле прицела

Несмотря на то, что область действия позволяет избежать искажения стилей между компонентами, часто нам нужно изменить стиль в компоненте, но мы не хотим удалять атрибут области действия.

  1. использовать /глубоко/
//Parent
<template>
<div class="wrap">
    <Child />
</div>
</template>

<style lang="scss" scoped>
.wrap /deep/ .box{
    background: red;
}
</style>

//Child
<template>
    <div class="box"></div>
</template>
  1. Используйте два тега стиля
//Parent
<template>
<div class="wrap">
    <Child />
</div>
</template>

<style lang="scss" scoped>
//其他样式
</style>
<style lang="scss">
.wrap .box{
    background: red;
}
</style>

//Child
<template>
    <div class="box"></div>
</template>

Роль рефери

  1. получить элемент домthis.$refs.box
  2. Получить данные в дочернем компонентеthis.$refs.box.msg
  3. вызвать метод в дочернем компонентеthis.$refs.box.open()

Разница между вычислениями и часами

1. Когда некоторые данные на странице зависят от изменения других данных, вы можете использовать вычисляемое свойство вычисляемое.

computed.png

<template>{{fullName}}</template>
export default {
    data(){
        return {
            firstName: 'xie',
            lastName: 'yu fei',
        }
    },
    computed:{
        fullName: function(){
            return this.firstName + ' ' + this.lastName
        }
    }
}

2. Watch используется для наблюдения и мониторинга экземпляров vue на странице.Если вы хотите выполнять асинхронные операции при изменении данных или требуете больших накладных расходов, то watch — лучший выбор.

watch.png

<template>{{fullName}}</template>
export default {
    data(){
        return {
            firstName: 'xie',
            lastName: 'xiao fei',
            fullName: 'xie xiao fei'
        }
    },
    watch:{
        firstName(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName(val) {
            this.fullName = this.firstName + ' ' + val
        }
    }
}

Существует несколько режимов маршрутизации vue.

  1. хэш-режим

То есть символ # в урле адресной строки характеризуется тем, что хотя хеш и появляется в урле, но в HTTP-запросе он не будет включен, на бэкэнд не влияет и не требует фоновой настройки, поэтому при изменении хэша страница не перезагружается.

  1. режим истории

Воспользуйтесь преимуществами новых методов pushState() и replaceState() в интерфейсе истории HTML5 (требуется специальная поддержка браузера). Режим истории изменяет адрес маршрутизации, потому что адрес необходимо настроить в фоновом режиме.

Связь по значению между компонентами

  1. Родительские компоненты передают значения дочерним компонентам через пропсы
  2. Дочерний компонент передает значение родительскому компоненту и запускает обратный вызов через $emit
  3. Связь компонентов Brother, через экземпляр экземпляра vue, eventBus в качестве среды, одноуровневые компоненты для связи друг с другом, все представляют eventBus.
//main.js
import Vue from 'vue'
export const eventBus = new Vue()

//brother1.vue
import eventBus from '@/main.js'
export default{
	methods: {
	    toBus () {
	        eventBus.$emit('greet', 'hi brother')
	    }
	}
}

//brother2
import eventBus from '@/main.js'
export default{
    mounted(){
        eventBus.$on('greet', (msg)=>{
            this.msg = msg
        })
    }
}

Как настроить перехватчик axios

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

4. Браузер

Механизм рендеринга в браузере

  1. Построить дерево DOM (анализ): механизм рендеринга анализирует документ HTML и сначала преобразует теги в узлы DOM в дереве DOM.
  2. Построить дерево рендеринга (построить): проанализируйте соответствующую информацию о файле стилей CSS.
  3. Дерево рендеринга компоновки (перекомпоновка/макет): рекурсивный вызов из корневого узла, вычисление размера, положения и т. д. каждого элемента и задание точных координат, по которым каждый узел должен появиться на экране;
  4. Рисование дерева рендеринга (раскрашивание/перерисовка): пройдитесь по дереву рендеринга и используйте внутренний слой пользовательского интерфейса для рисования каждого узла.

Разница между перерисовкой и перекомпоновкой

Перерисовать (перерисовать или перерисовать): Когда положение, размер и другие атрибуты поля, такие как цвет, размер шрифта и т. д., определены, браузер рисует эти основные цвета в соответствии с их соответствующими характеристиками и отображает содержимое на странице. Перерисовка относится к поведению браузера, вызванному изменением внешнего вида элемента.Браузер перерисовывает элемент в соответствии с новыми свойствами элемента, так что элемент имеет новый внешний вид.

Перерисовка происходит, когда видимый внешний вид элемента изменяется, не затрагивая компоновку. Например, изменить только цвет шрифта элементов DOM (только перекрасить, потому что нет необходимости настраивать макет)

Reflow (рефакторинг/перекомпоновка/перекомпоновка): когда часть (или все) дерева рендеринга необходимо перестроить из-за изменений размера, расположения, скрытия и т. д. элементов, это называется перекомпоновкой. Каждой странице требуется как минимум одна перекомпоновка, то есть при первой загрузке страницы.

Условия для запуска перекомпоновки: Любые изменения в макете страницы и геометрических свойствах вызовут перекомпоновку:

  • Инициализация рендеринга страницы (нельзя избежать)
  • Добавить или удалить видимые элементы DOM
  • Изменение положения элемента или использование анимации
  • Изменения размера элемента - размер, поля, границы
  • Изменение размера окна браузера
  • Изменения отступов, например изменения расчетной ширины и высоты, вызванные изменениями размера текста или изображения.

Перекомпоновки обязательно вызывают перерисовку, но перерисовки не обязательно вызывают перерисовку.

Несколько методов запроса

ПОЛУЧИТЬ, ПОСТАВИТЬ, ГОЛОВУ, ПОСТАВИТЬ, УДАЛИТЬ, ПОДКЛЮЧИТЬ, ВАРИАНТЫ, ТРАССИРОВАТЬ

Разница между get и post

метод запроса GET POST
расположение параметра Параметры присоединяются к задней части URL-адреса. Параметры находятся в теле запроса
размер параметра Ограничено размером URL-адреса браузера, обычно не более 32 КБ. 1G
прием данных сервером Получить 1 раз В зависимости от размера данных он может быть получен несколько раз
Применимая сцена Получить данные со стороны сервера Отправить данные на сервер
безопасность Параметры передаются в URL-адресе, а безопасность низкая. Более высокая безопасность, чем запросы GET

Как решить междоменный

  1. CORS
  2. jsonp
  3. прокси сервера

Дополнительные сведения о CORS см.Тщательно понимать внешний интерфейс CORS для разных доменов.

Принцип JSONP

Из-за ограничений политики браузера в отношении одного и того же источника запросы из разных источников не допускаются; однако теги script, img и iframe на странице являются исключениями и не ограничиваются политикой одного источника.

Jsonp должен использоватьscriptОтметьте запросы междоменных функций.

Принцип JSONP заключается в том, чтобы сначала зарегистрировать функцию обратного вызова глобально, чтобы определить обработку данных обратного вызова, согласовать имя функции обратного вызова с тем же именем с сервером.После того, как сервер получит запрос, он вернет кусок Javascript, который в этом коде Javascript вызывается согласованная функция обратного вызова, а данные передаются в качестве параметра. Эта функция обратного вызова выполняется, когда веб-страница получает этот код Javascript.

Минусы JSONP: поддерживает толькоGETзапрос, но не поддерживаетсяPOSTЗапросы и другие типы HTTP-запросов.

Понимание кэширования

Кэш делится на сильный кеш и кеш согласования. Сильный кеш не может передать сервер, а кеш согласования должен передать сервер.Код состояния, возвращаемый кешем согласования, — 304. Одновременно могут существовать два типа механизмов кэширования, и строгое кэширование имеет приоритет над согласованным кэшированием. При реализации сильного кэширования, если кеш попадает, данные в базе данных кеша будут использоваться напрямую, и согласование кеша выполняться не будет.

  1. Сильный кеш
  • Expires
  • cache-control
  1. Согласовать кеш
  • Last-Modified и If-Modified-Since
  • Etags и If-None-Match

Дополнительные сведения о кэшированном содержимом см.Внешний интерфейс также должен понимать механизм HTTP-кэширования.

Разница между XSS и CSRF

  1. Межсайтовый скриптинг (Cross Site Scripting), чтобы не путать с каскадными таблицами стилей CSS, поэтому атака Cross Site Scripting сокращенно обозначается как XSS. Злоумышленники вставляют вредоносный код Script на веб-страницу. Когда пользователь просматривает страницу, код Script, встроенный в Интернет, будет выполняться, тем самым достигая цели злонамеренной атаки на пользователя.

  2. Подделка межсайтовых запросов (подделка межсайтовых запросов) — это подделка запросов и имитация обычных операций пользователей на сайте. Мы знаем, что большинство веб-сайтов используют файлы cookie и другие средства для идентификации пользователей и их последующей авторизации. Поэтому для подделки нормальной работы пользователя лучше всего использовать XSS или подмену ссылок и т. д., чтобы позволить пользователю инициировать запрос, который пользователь не знает на локальной машине (то есть на стороне браузера с идентификационный файл cookie).

разница:

  • Принцип другой: CSRF — использовать уязвимость сайта А для запроса API сайта А, XSS — внедрить код JS на целевой сайт, а затем выполнить код на JS.
  • CSRF требует, чтобы пользователи сначала вошли на целевой веб-сайт, чтобы получить файлы cookie, в то время как XSS не требует входа в систему.
  • CSRF нацелен на пользователей, XSS — на серверы
  • XSS должен использовать законных пользователей для получения их информации, в то время как CSRF должен подделывать запросы для законных пользователей.

Разница между HTTP и HTTPS

  • URL-адрес HTTP предоставляетсяhttp://Запускается и по умолчанию использует порт 80, в то время как URL-адреса HTTPS задаютсяhttps://Запускает и использует порт 443 по умолчанию
  • HTTP — это протокол передачи гипертекста, информация передается в виде открытого текста, а HTTPS — безопасный протокол передачи с шифрованием SSL.
  • HTTP-соединение очень простое и не имеет состояния.Протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL+HTTP, который может выполнять зашифрованную передачу и аутентификацию личности, что является более безопасным, чем протокол http.

Коды состояния HTTP

1xx указывает, что клиент должен продолжить отправку запроса

2xx указывает на успешный запрос

  • 200 означает OK, нормальная возвращаемая информация
  • 201 означает, что запрос был выполнен успешно и сервер создал новый ресурс
  • 202 означает, что сервер принял запрос, но еще не обработал его.

3xx означает перенаправление

  • 301 означает постоянное перенаправление, запрошенная веб-страница была навсегда перемещена в новое место.
  • 302 означает временную переадресацию
  • 304 означает, что содержимое страницы не изменилось с момента последнего запроса

4xx означает ошибку клиента

  • 401 означает, что сервер не может понять формат запроса
  • 402 означает, что запрос не авторизован
  • 403 означает, что доступ запрещен
  • 404 указывает, что запрошенный ресурс не существует, как правило, указан неверный путь

5xx означает ошибку сервера

  • 500 за наиболее распространенные ошибки сервера
  • 503 означает, что сервер временно не может обработать запрос

5. Оптимизация производительности

  • Используйте CDN
  • gzip-сжатие
  • сжатие текста
  • запрос на слияние
  • Спрайт
  • Ленивая загрузка изображения
  • ресурсы кэша
  • Уменьшите манипуляции с DOM

Для получения дополнительной информации о внешнем интерфейсе, пожалуйста, обратите внимание на общедоступный номер【前端壹读】. Организовать не просто, но смотри и лелеяй.

Если вы думаете, что это хорошо написано, пожалуйста, следуйте за мнойДомашняя страница Наггетс. Для получения дополнительных статей, пожалуйста, посетитеБлог Се Сяофэй

PS: Я видел, что многие студенты в области комментариев критиковали меня за то, что я сказал, что это было слишком просто для организации. В React, webpack и Promise этого не было. Как это можно считать вопросом интервью? Во-первых, спасибо за ваши комментарии. Я буду усерднее работать над организацией углубленных знаний. Во-вторых, на фронтенде много и сложных вещей. На организацию этой статьи у меня ушло около месяца. Возможно, я некоторое время не работал. Я использовал его, поэтому я склонен к основам. Пожалуйста, игнорируйте эту статью.

Еще не все. . .

Ссылаться на

flex

CSS очистить поплавок

Понимание и размышление о макете Святого Грааля и макете двойного крыла

Поймите функцию анти-тряски и функцию дросселирования за секунду

Резюме веб-интервью

Компания требует использования фреймворка vue, и какие вопросы на собеседовании будут заданы

30 вопросов на собеседовании по Vue

Обобщил опыт проведения 100 предварительных интервью с начала 2017 по начало 2018 года.

Обмен интервью: два года опыта работы успешно прошли собеседование с Али P6

Категории