Резюме основных вопросов для фронтенд-интервью

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

1. ES6, с которым вы знакомы

• Разница между использованием let, const и var
  let: эквивалентно var, используется для объявления переменной, действительна на уровне блока (может решить проблему цикла for); не может быть объявлено повторно; без продвижения переменной; без предварительной обработки
  const: используется для определения константы, не может быть изменена, другие характеристики эквивалентны let, используется для сохранения данных, которые не изменяются
• Отличие Карты от обычных объектов
  Объекты JavaScript (Object) по сути представляют собой набор пар ключ-значение (структура Hash), но традиционно в качестве ключей могут использоваться только строки. Это накладывает существенные ограничения на его использование. Чтобы решить эту проблему, ES6 предоставляет структуру данных Map. Он подобен объекту и также представляет собой набор пар ключ-значение, но область действия «ключей» не ограничивается строками, и в качестве ключей могут использоваться различные типы значений (включая объекты). Другими словами, структура Object обеспечивает соответствие "строка-значение", а структура Map обеспечивает соответствие "значение-значение", что является более полной реализацией структуры Hash. Если вам нужна структура данных "ключ-значение", Map больше подходит, чем Object.

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

2. Используемый вами перекрестный домен

Так называемая междоменная проблема ограничена политикой одного и того же происхождения браузера.Если номер порта имени домена протокола отличается, это междоменная проблема.Что касается протокола и порта, внешний интерфейс не может ее решить.
Есть несколько способов решения кроссдоменности:

• Кросс-домен JSONP: Таким образом, кросс-домен заключается в том, чтобы ввести файл js через тег скрипта, и файл js вернет вызов функции js, то есть после запроса результат будет возвращен обратным вызовом.
  преимущество:
  1. Не ограничены политикой одного и того же происхождения
  2. Лучшая совместимость
  3. Поддержка старых браузеров
  Недостаток: поддерживает только запросы на получение
• Перекрестный домен CORS
  Принцип заключается в использовании пользовательского запроса заголовка HTTP для связи между браузером и сервером, чтобы определить, является ли запрос или ответ успешным.
  преимущество:
  1. Поддержите все типы HTTP-запросов
  2. Лучший механизм обработки ошибок, чем jsonp
  3. Поддерживается большинством браузеров
• метод postMessage h5
  Метод window.postMessage(message,targetOrigin) — это новая функция html5. Его можно использовать для отправки сообщений другим оконным объектам, независимо от того, относятся ли оконные объекты к одному или разным источникам. , Chrome, Opera и т. д. Все браузеры уже поддерживают метод window.postMessage. Этот метод не может обмениваться данными с сервером, только между двумя окнами (iframes)
• На самом деле, если вы используете cors cross-domain на работе, междоменная проблема в основном настраивается серверной частью, а передняя часть более беззаботна, даже если ваша внутренняя часть не справляется с этим за вас. , вы также можете использовать междоменные прокси для работы с

3. Код статуса http, который вы знаете

 1** информация, сервер получает запрос, и запрашивающей стороне необходимо продолжить выполнение операции (101, перейти на протокол веб-сокета)
 2** Успех, операция успешно получена и обработана (206, частичное содержание, сегментированная передача)
 3** Перенаправление, для выполнения запроса требуются дополнительные действия (перенаправление 301, 302; попадание в кеш 304)
 4** Ошибка клиента, запрос содержит синтаксическую ошибку или запрос не может быть выполнен (401, требуется аутентификация; 403, сервер понимает потребности клиента, но доступ запрещен)
 5** Ошибка сервера, сервер обнаружил ошибку при обработке запроса

4. Вы можете оценить ajax

• Преимущества Ajax.
  1. Нет запроса на обновление страницы, что делает продукт быстрее, меньше и удобнее
  2. Задачи на стороне сервера передаются в обработку на стороне клиента
  3. Уменьшите нагрузку на браузер и сэкономьте трафик
  4. На основе стандартизированных объектов не требуется устанавливать специальные плагины.
  5. Полностью отделите страницы от данных
• недостаток
  1. Невозможно использовать кнопку «Назад»
  2. Плохо для веб-SEO
  3. Невозможно отправлять междоменные запросы
  -Написать простой запрос ajax

 getList: function () {
    var me = this;
    $.ajax({
    url: '/test',
    type: 'POST',
    data: {
      repaymentId: repaymentId
    },
    xhrFields: {
      withCredentials: true
    },
    success: function (result) {
       if (result.status == 0) {
           console.log('请求成功')
       } else {
            console.log('请求异常')         
       }
     },
    error: function (result) {
         $.toaster({ title: 'info', priority: 'danger', message: '服务器异常，请联系管理员！' });
      }
    })
   }

5. Вы знаете жизненный цикл vue

Чтобы узнать о жизненном цикле vue, обратитесь к этой статье.Ссылка на сайт

6. Вы знаете жизненный цикл реакции

инициализация

• Вызов инициализации componentWillMount, вызываемый только один раз
  render отображает страницу
• ComponentDidMount вызывается после первого визуализации

возобновить

• componentWillReceireProps вызывается при получении новых реквизитов
• shouldComponentUpdate вызывается при изменении состояния или реквизита
• componentWillUpdate вызывается, когда он собирается обновиться, что может изменить значение состояния
  render
• componentDidUpdate вызывается после обновления

удалить

• componentWillUnMount

7. реагировать на объявление реквизитов по умолчанию

Есть два способа установить реквизит по умолчанию

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

static defaultProps = { 
  age: 18
}

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

  Greeting.defaultProps = {    
    name: '我是props的默认值！'
  }

8. Три способа создания компонентов в реакции

1. Функционально определенные компоненты без состояния, подходящие для чистых компонентов отображения, отвечают только за отображение в соответствии с входящим реквизитом и не включают операции с состоянием.Характеристики следующие.

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

function  MyTest1() {
  return <h1>工厂(无状态)函数(最简洁, 推荐使用)</h1>
}

2. es5 собственный способ, которым React.createClass определяет компоненты с отслеживанием состояния

• компонент будет создан
• иметь доступ к жизненному циклу
• метод функции самопривязки

var MyTest2=React.createClass({
  render(){
   return <h1>ES5老语法(不推荐使用了)</h1>
  }
})

3. Компоненты, определенные в extends React.Component в форме es6, используются для создания компонентов реакции в форме ES6, что является настоятельно рекомендуемым способом создания компонентов с отслеживанием состояния в React.

class  MyTest3 extends React.Component{
  render(){
     return <h1>ES6类语法(复杂组件, 推荐使用)</h1>
  }
}

Разница между React.createClass и React.Component

• эта привязка отличается
  Для компонента, созданного React.createClass, this каждой функции-члена автоматически связывается React.Когда вы используете его в любое время, вы можете напрямую использовать this.method, и this в функции будет установлено правильно.
  Функция-член компонента, созданного React.Component, не будет автоматически связывать это, и разработчик должен связать его вручную, иначе он не сможет получить текущий объект экземпляра компонента.
• Тип свойства компонента propTypes и его свойство props по умолчанию defaultProps настроены по-разному.
• Конфигурация начального состояния компонента отличается
• Миксины поддерживаются по-разному

9. Знаете ли вы разницу между http и https

1. Протокол https должен идти в ЦС для подачи заявки на сертификат.Как правило, бесплатных сертификатов мало, поэтому требуется определенная плата.
2. http — это протокол передачи гипертекста, информация передается в виде открытого текста, а https — безопасный протокол передачи с шифрованием ssl.
3. http и https используют совершенно разные способы подключения и разные порты, первый 80, а второй 443.
4. Соединение по протоколу http очень простое и не имеет состояния; протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL+HTTP, который может выполнять зашифрованную передачу и аутентификацию личности, что является более безопасным, чем протокол http.

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

• Когда атрибут метода формы установлен на публикацию, отправляется запрос на публикацию, а остальные запросы на получение
• Запрос на получение отправляет параметры запроса через URL-адрес, параметры могут отображаться непосредственно в адресной строке, а безопасность низкая; сообщение отправляет параметры запроса через тело запроса, и параметры не могут отображаться напрямую, что относительно безопасно
• URL-адрес запроса на получение имеет ограничение по длине. В зависимости от браузера ограничение на длину в байтах может быть разным. Для почтового запроса ограничения на длину нет.

11. Что вы знаете о замыканиях

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

12. Передача и получение динамических параметров vue

// 传参
router: {
path: '/test/:id'
}
// 获取
this.$route.params.id
// 通过query
<router-link :to="{path: '/test',query:{name: 'aaa'}}">跳转</router-link>

13. новые свойства h5 и css3

1.H5

• Семантические теги (nav, aside, dialog, header, footer и т. д.)
• canvas
• Перетащите связанный API
• Аудио видео
• Получить географическое положение
• улучшенная проверка ввода
• веб-хранилище (localStorage, sessionStorage)
• webWorkers (аналог многопоточного параллелизма)
• webSocket
  2.CSS3
• Селектор
• Граница (border-image, border-radius, box-shadow)
• фон (фоновый клип, фоновое происхождение, фоновый размер)
• Градиенты (линейные градиенты, радиальные градиенты)
• шрифт (@font-face)
• трансформировать, трансформировать
• переход
• анимация
• флекс-бокс
• Запросы СМИ (@media)

14. Реализовать левую и правую фиксированную ширину, среднюю адаптивную (известная ширина и высота и неизвестная ширина и высота)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css居中的十种方式</title>
  <style>
   .wrap {
       width: 200px;
       height: 200px;
       border: 1px solid red;
       position: relative;
   }
   .size {
       width: 100px;
       height: 100px;
   }
   /*第一种 已知元素宽高下使用position+ 负margin实现 兼容性较好*/
   .box1 {
        background-color: pink;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
   }
   /*第二种 已知元素宽高下使用position+margin auto实现 兼容性较好*/
   .box2 {
        background-color: pink;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
   }
   /*第三种 已知元素宽高下使用position+calc计算实现 考虑c3 calc兼容性 需注意的问题是运算符之间要有空格，否则不生效*/
   .box3 {
        background-color: pink;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
   }
   /*第四种 未知元素宽高下使用position+transform实现 依赖translate2d兼容性*/
   .box4 {
       position: absolute;
       background-color: pink;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   /*第五种 未知元素宽高下使用lineheight实现*/
   .wrap2 {
       line-height: 400px;
       width: 200px;
       text-align: center;
       border: 1px solid red;
   }
    .box5 {
        background-color: pink;
        /*不加以下内容内部div会扩充外部div，且内容居中*/
        display: inline-block; /*不独占一行的块元素*/
        vertical-align: middle; /*垂直方向居中*/
        line-height: initial; /*默认内容行高*/
        text-align: left;
    }
    /*第六种 未知宽高使用writing-mode属性*/
    .wrap3 {
        writing-mode: vertical-lr; /*内容变为垂直分布*/
        text-align: center;
    }
    /*inner 部分宽度100%居中*/
    .inner{
        writing-mode: horizontal-tb;
        text-align: center;
        display:inline-block;
        width: 100%;
        background-color: pink;
    }
    .box6 {
        display: inline-block;
        margin: auto;  
        background-color: rgb(140, 216, 68);
    }
    /*第七种 未知宽高使用table-cell属性*/
    .wrap4 {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box7 {
        background-color: pink;
        display: inline-block;
    }
     /*第八种 未知宽高使用flex属性*/
    .box8{
    background-color: pink;
    }
    .wrap5{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*第九种 未知宽高使用grid, 兼容性较差*/
    .wrap6{
        display: grid;
    }
    .box9 {
        align-self: center;
        justify-self: center;
        background-color: pink;
    }
    /*第十种 使用表格table实现*/
    .wrap7 {
        text-align: center;
    }
    .box10 {
        display: inline-block;
        background-color: pink;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box1 size">知11111</div>
  </div>
  <div class="wrap">
    <div class="box2 size">知2222</div>
  </div>
  <div class="wrap">
    <div class="box3 size">知3333</div>
  </div>
  <div class="wrap">
    <div class="box4">未44444</div>
  </div>
  <div class="wrap2">
    <div class="box5">未55555</div>
  </div>
  <div class="wrap3 wrap">
      <div class="inner">
        <div class="box6">未66666</div>
      </div>
  </div>
  <div class="wrap wrap4">
    <div class="box7">未777777</div>
  </div>
  <div class="wrap wrap5">
    <div class="box8">未88888</div>
  </div>
  <div class="wrap wrap6">
    <div class="box9">未9999</div>
  </div>
  <table>
    <tbody>
        <tr>
            <td class="wrap wrap7">
                <div class="box10">未10101010</div>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

15. Значение передачи родительско-дочернего компонента

• Родитель-ребенок: передается через реквизит
• От ребенка к родителю: передается через $emit
• Между потомками: через промежуточный файл в качестве носителя подкомпоненты передают значения в промежуточный файл, а родительский файл получается в промежуточном файле, избегая пошагового сбора

16. Введите URL-адрес, пока URL-адрес не будет открыт и загружен, что происходит с браузером во время этого процесса.

• Проверить, есть ли кеш в браузере, и если да, то получить доступ к кешу напрямую
• Если срок действия кеша истек или кеша нет, повторно запросите
• Перед отправкой http-запроса требуется разрешение доменного имени для получения соответствующего IP-адреса.
• Браузер инициирует tcp-соединение с сервером и устанавливает трехстороннее рукопожатие tcp с браузером.
• После успешного рукопожатия браузер отправляет http-запрос на сервер, запрашивая пакеты данных
• Сервер обрабатывает полученный запрос и возвращает данные в браузер
• Браузер получает HTTP-ответ
• Чтение содержимого страницы, рендеринг в браузере, разбор исходного кода html

17. Разница между rem и em

rem основан на размере шрифта корня, а em основан на размере шрифта родителя.

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

function copy(arr) {
 var newObj = arr.constructor === Array ? [] : {}
   if (typeof arr === 'object') {
    for (var i in arr) {
      if (typeof arr[i] === 'object') {
        newObj[i] = copy(arr[i])
      }
      newObj[i] = arr[i]
    }
    return newObj
  } else {
    return
  }}

function copy (obj) {
 var newObj = obj.constructor === Array ? [] : {}
 newObj = JSON.parse(JSON.stringify(obj))
 return newObj
}

const RankList = () => import( /* webpackChunkName: "RankList" */ '@/components/RankList')

watch:{
  'a.b': function (val, oldVal) { /* ... */ }
}