Цветы в мае, не пропустите только что выпущенный интерфейс | Nuggets Technical Papers

опрос

предисловие

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

Я выпускница 2020 года выпуска этого года.У меня уже есть опыт стажировки один год.Крупные заводы не могут зайти,а маленькие заводы давят цены.Я фронтенд инженер в действующей команде 15 человек в компании, а также осуществлять совместную разработку и самостоятельную доработку проектов компании. Каждый день после работы я думаю о дальнейшем развитии, и первоначальный план смены работы тоже нарушила история с летучей мышью. Причина идеи сменить место работы в том, что сейчас бизнес компании и мой рост достигли момента, когда нам нужно найти прорыв.Кроме того, сам город не очень развит с Интернетом, а экономика не очень зажиточный. Я постепенно вошел в контакт с некоторыми телефонными интервью, но из-за моего диплома в колледже у меня не было много хороших возможностей. Моя цель проста, найти компанию со своим продуктом и бизнес-планом. Но, к сожалению, такова реальность. Дело не в том, что вы недостаточно хороши, а в том, что вы недостаточно хороши, чтобы позволить другим заметить вас. Цель в 2020 году — найти компанию с собственной продукцией на переднем крае, чтобы стабилизироваться и урегулировать ситуацию.

Детали состава

Все в случае допроса или допроса. Интервью было сделано хорошо. Похоже, тогда Рю был убит шелковой кровью. Время ожидания — 2 часа 15 минут, три чашки воды и тарелка пирожных.

процесс собеседования

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

письменный экзамен

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

1. Реализуйте макет DIV, фиксированный слева и адаптивный справа.

// DOM 结构
<div class="container">
  <div class="aside">left</div>
  <div class="section">right</div>
</div>

// Style样式
.container {
  display: flex;
}
.container .aside {
  flex: 0 0 200px;
}
.container .section {
  flex: 1;
}

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

// DOM结构
<div class="container">
  <div class="box"></div>
</div>

// 方案一：flex方案

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box {
  background: red;
  min-width: 100px;
  min-height: 100px;
}

// 方案二：position方案
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.container .box {
  background: red;
  min-width: 100px;
  min-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3. Как добавить стили к элементам, отличным от начала и конца списка

// 考察了css伪类的使用

// DOM
<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
</ul>

// Style

.list > .item:not(:first-child):not(:last-child) {
  /* ... style */
}

4. Какие типы данных есть в JavaScript?

Ответ: JavaScript делится на основные типы и ссылочные типы, а именно:

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

5. Каково выходное значение функции foo ниже

// @function foo
function foo(i) {
  try {
    if (i === 1) {
      return i
    }
  } catch (error) {
    return 0
    
  } finally {
    ++i
    return i
  }
}

// @console
console.log(foo(1))

Ответ: 2

6. Учитывая массив, расположите его в соответствии с правилами возрастания и убывания.

Исходный массив: [1, 4, 10, 2, 5, 18, 14] отвечать:

// @function bubble
function bubble(arr, state) {
  const len = arr.length
  let template
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (state === 'up') {
        if (arr[i] < arr[j]) {
          template = arr[i]
          arr[i] = arr[j]
          arr[j] = template
        }
      }
      if (state === 'down') {
        if (arr[i] > arr[j]) {
          template = arr[i]
          arr[i] = arr[j]
          arr[j] = template
        }
      }
    }
  }
  return arr
}

// @console
console.log(bubble([1, 4, 10, 2, 5, 18, 14], 'down'))

7. Что получится в результате выполнения следующего кода

var name = 'zangsan';
(function () {
  console.log(name)
  name = 'Lisi'
  console.log(window.name)
  var name = 'wangwu'
  console.log(name)
})();

Ответ: undefined> zangsan> wangwu

8. В чем разница между циклом for и циклом forEach?

отвечать:

  • Цикл for является нативным синтаксическим сахаром и не имеет контекста, а forEach — это метод в Array.
  • Цикл for может выйти из цикла на полпути через break и continue, но forEach не может.

9. Сколько времени занимает выполнение следующей асинхронной функции?

// @promise function
function speed() {
  return new Promise(resolve => {
    setTimeout(resolve, 3000)
  })
}

// @async function
async function foo() {
  let mySpeed = speed()
  await mySpeed
  await mySpeed
  await mySpeed
  await speed()
  await speed()
  await speed()
}

foo()

Ответ: это около 12 с, но время превышает 12 с.

10. Не могли бы вы реализовать простую функцию защиты от сотрясений?

отвечать:

// @function shake
function shake(fun, time) {
  let timeController = null
  return (...args) => {
    timeController !== null && clearTimeout(timeController)
    timeController = setTimeout(() => {
      fun.apply(this, args)
    }, time)
  }
}

// @test function
function myText() {
  console.log('text......')
}

// @output
shake(myText, 3000)

11. В чем разница между localStorage, sessionStorage и файлами cookie?

Ответ. Все эти методы хранения используются для сохранения данных.

  • Файлы cookie хранятся на стороне клиента и будут потеряны при закрытии браузера. Размер хранилища 4K
  • sessionStorage: действует только для этого сеанса, будет недействительным при закрытии браузера или страницы, размер хранилища > 4M
  • localStorage: Хранится локально в браузере, если не очищается вручную или непредвиденными обстоятельствами, как правило, не теряется. Размер хранилища 4M

12. Не могу вспомнить некоторые темы...

опрос

Закончив вопрос, прочтите его внимательно. Убедившись в отсутствии явных проблем, передайте его HR рядом с ним. Предполагается, что он будет доставлен в технический отдел для оценки. Лично я считаю письменный тест довольно сложным. В реальной разработке практически нет контакта с некоторыми письменными тестовыми вопросами. Поэтому на каждом собеседовании нужно тратить много времени на изучение точек знаний и проверку на наличие пробелов. Примерно через 5-6 минут HR Сяокай отвел меня в отдельный офис для интервью. Внутри уже сидят два человека, один похож на менеджера, а другой должен быть фронтендом. Когда я села, мое резюме уже было у них в руках. Я думаю, вы уже видели это. После того, как мелочь вышла и закрыла дверь (напала вся армия), началась очередь:

Самостоятельное введение

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

  • Кто я, майор ХХХХ школы, мой майор.
  • Он работал веб-дизайнером в двух компаниях и работал полный рабочий день, имеет более 1 года опыта работы и в основном использует технологическую систему Vue в качестве инфраструктуры проекта. Последовательно участвовал в 4 проектах, включая совместную разработку крупномасштабных проектов управления фоном, независимую разработку внутреннего предприятия компании WeChat H5 и программу обслуживания небольших программ.
  • В свободное время он любит читать книги, изучать новые технологии, писать проекты с открытым исходным кодом и вести блоги. ... на самом деле это не имеет большого значения. У кого-нибудь есть хороший шаблон, который может спасти меня от этого старого несчастного парня.

Представившись, мы начали задавать вопросы.

1. Какие новые функции вы часто используете в ES6 и как вы их используете?

отвечать:

  • Первый — это новый метод определения переменных блочного уровня, let & const, который я использую по умолчанию в проекте.constдля определения моих переменных, и только когда речь идет о назначениях переменных, я объявляю их какlet.
  • Вторая — это строка шаблона, которая использовалась в прошлом.+ а такжеtoStringЧтобы выполнить некоторую конкатенацию строк, напримерURL. Читаемость после склейки очень плохая. Как только появились строки шаблонов ES6, я начал использовать их в своих проектах.
  • Деструктурирование присваивания — очень мощная функция Vue, независимо от того,methods ещеcomputdбудет задействовано большое количествоdataРеактивная переменная читается, тогда я могу использовать VuethisРазбери его, он понадобится.data methods... деконструированы, чтобы избежать существования большого количестваthis.XXXИзбегайте этого плохого стиля кода.
  • Стрелочные функции сильно укороченыfunctionписьменность, обычно используемая вcallback, вызовы функций могут быть сделаны быстро. Такие какforeach,mapи другие методы.
  • Set & Map часто используется в моих проектах, потому что задействован шаблон таблицы. Поскольку формат данных таблицы не является фиксированным, я часто планирую вернуть формат данных в фоновом режиме к формату, который я загрузил, обычно какkey value, чтобы значение возвращалось мне в фоновом режиме, я могу через Map залить его в пару ключ-значение и отрендерить в таблице. Потому что картаkeyТип хранимых данных потрясающий. Объект не может этого сделать.
  • Promise и асинхронная асинхронная обработка Он разрешил предыдущий ад асинхронных обратных вызовов и улучшил асинхронный опыт JavaScript. Обычно запросы данных в Vue извлекаются асинхронно в виде промисов.

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

2. Вы только что упомянули Promise, знаете ли вы его API?

отвечать:

  • resolve
  • reject
  • then
  • catch
  • finally
  • all

3. Знакомы ли вы с API-интерфейсом Promise?

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

4. Как Axios отправляет несколько запросов одновременно?

отвечать: Сам Axios на самом деле является промисом, который может выполнять несколько запросов Axios через Promise.all. Axios также предоставляет метод Axios.all, который используется так же, как и Promise.all.

5. Как вы решили междоменный запрос на запросы внутренних данных.

отвечать: Лично я склонен использовать схему CORS.Стандарт CORS добавляет новый набор полей заголовков, которые позволяют серверу объявлять, какие исходные сайты имеют разрешение на доступ к каким ресурсам. Это требует, чтобы серверная часть сотрудничала. Другой — использовать переадресацию прокси-сервера Nginx.

Я не очень хорошо ответил на этот вопрос. Если вы не понимаете, вы можете просмотреть междоменное решение браузера.

6. Разница между v-show и v-if во Vue

отвечать: Инструкция v-if будет активно игнорировать связанный DOM в визуализируемом представлении View, он не будет загружаться в виртуальный DOM и, естественно, не будет отображаться в ViewDOM. Директива v-show добавитdisplay: noneстиль для достижения функции скрытия и отображения.

7. Можете ли вы рассказать мне о вычислениях и часах?

отвечать: вычисление является отдельным свойством и не может дублировать имя значения в методах/данных. У него есть возможность кэширования.Когда вычисленное значение, на которое вы полагаетесь, не изменяется, вычисленное сохранит текущее значение без изменений. Асинхронность не поддерживается часы могут только наблюдатьdataЗначение в , и функция может контролировать только одно. В основном используется для выполнения операции прослушивания значения.

8. Какие изменения Vue3 внес в реактивное связывание и почему?

отвечать:

  • 1.Vue2 использует объект. defineProperty используется для захвата данных, а Vue3 заменяется новым Proxy API: Object.defineProperty может только перехватывать свойства объекта, а Proxy может напрямую проксировать объекты наблюдения.
  • Object.defineProperty имеет слабое наблюдение за свойствами объекта.Когда объекты добавляются и изменяются свойства, необходимо повторно указать Observe, в противном случае это, вероятно, вызовет слепые зоны Observe. Напротив, поддержка прокси-объектов Proxy очень удобна и поддерживает перехват наиболее распространенных операций.

9. Каковы средства защиты маршрутизации компонента VueRoute?

отвечать:

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

10. Какие существуют режимы VueRoute и чем они отличаются?

отвечать: Существует два режима маршрутизации, а именноhash history,

  • В хеш-режиме URL будет содержать#Нет, в истории нет.
  • Если бэкэнд-развертывание не изменит страницу, указывающую на маршрут истории, возникнет проблема обновления и перехода на 404, но хеш-маршрут не изменится.
  • Маршрутизация хэшей относительно совместима с историей.

11. Можете ли вы рассказать мне о пространстве имен модулей в Vuex?

отвечать: По экспорту Экспортировать настройки модуляnamespaced: trueЧтобы открыть пространство имен, чтобы у модуля было собственное владение модулем, например: в модуле A есть действие с именем test, тогда мы можем пройтиa/testчтобы найти его и избежать конфликтов с модулями Vuex.

12. В чем разница между мутацией и действием в Vuex

отвечать: Мутация в основном используется для изменения данных в состоянии, поэтому она в основном действует как посредник. Он не поддерживает асинхронность, поэтому Vue может прослушивать его, а инструменты разработки могут синхронизировать его записи. Если он асинхронный, вполне вероятно, что инструменты разработки не смогут синхронизироваться при его изменении. Наш общий метод заключается в отправке мутации через действие, поскольку действие — это асинхронный процесс, поэтому выполнение этого не только обеспечивает логический асинхронный вызов, но и не уничтожает хорошую репутацию мутации. Разработчикам удобно отлаживать. По сути, это процесс обмена данными.

13. Забыл последние несколько вопросов

проект

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

Q: Учитывая, что проект вашей компании использует webSocket, почему вы должны его использовать?

A: Поскольку некоторые важные сообщения в моем проекте должны быть получены в режиме реального времени, если пользователь не обращается к интерфейсу сообщений в течение длительного времени, будет очень проблематично, если будет пропущен важный сигнал тревоги. Это так же логично, как и игра Meituan Rider Smile Action.

В: Поскольку используется webSocket, можете ли вы рассказать нам о часто используемых API webSocket?

A: API webSocket делится на

  • onopen(), открыть канал и подключить ws
  • Отправить (), отправить сообщение
  • onmessage(), обратный вызов сообщения ws
  • onerror(), ошибка подключения ws
  • onclose(), соединение ws закрыто

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

A: Я делаю обычную операцию ping, здесь это становится: "ответ сердцебиения", как люди судят, живы они или мертвы. На самом деле, самый быстрый путь — это собственное сердцебиение, пока оно еще бьется, значит, вы все еще живы. Поэтому я использую ws.send() для отправки бессмысленного сообщения ping через равные промежутки времени. Скажи фону, что я все еще на связи. Получив его в фоновом режиме, он продолжит отправлять сообщение. И если сообщение ping неверно. Тогда это означает, что ws может неожиданно прерваться, тогда будет использован метод onerror(), в это время я могу разбудить его с самого начала. Таким образом, я могу поддерживать постоянное относительное соединение с webSocket.

В продолжении я не буду говорить о проектах компании, но на самом деле это сессия вопросов и ответов.Вы должны четко понимать, какие модули вы делаете. (●'◡'●), про свой личный проект я спрашивал позже, чего скрывать нечего.

Q: Вы владеете внедрением библиотеки компонентов пользовательского интерфейса?

О: Да, я практикую почерк, когда возвращаюсь с работы. Всего 22 компонента, и документация не обновлена ​​до последней версии.

В: Общий стиль компонента разработан вами?

A: Я написал это, основываясь на своих ощущениях, но некоторые размеры были разработаны со ссылкой на AntD Vue of Ant.Цветовая схема и стиль были созданы мной из воздуха, ха-ха.

Q: Можете ли вы рассказать мне, как реализована ваша всплывающая подсказка?

A: Этот компонент всплывающей подсказки реализован с использованием псевдоклассов.Через содержимое в псевдоклассах до и после динамическое значение может быть получено с помощью функции attr (атрибута) CSS для привязки, а затем отрисовано путем позиционирования. Ядром является псевдокласс CSS, attr (всплывающая подсказка), позиционирование позиции и другое использование CSS.

В: Я понимаю, большинство ваших компонентов реализуют только простые функции. Вы проделали какую-то глубокую работу?

A: Это долгосрочное обслуживание проекта, начиная только с практики, упаковано с более опытными, перед функцией сравнения будет очень мало, поэтому последующая Vue3 будет переписана. Оптимизированная структура кода.

В: Вы посмотрели под модальную коробку, я чувствую себя очень интересно, и я могу сказать, что под ним?

A: Хорошо, идея дизайна этого модального окна исходит из диалогового окна системы Mac. Я подумал, что это было очень интересно в то время, поэтому я решил переместить его в библиотеку компонентов, а затем переосмыслил его. , а сейчас так.. Однако большинство API в нем общеупотребительные, а кастомизированных функций больше нет.

Вопрос:......

А:......

Опускаю следующее, я смотрю на проект, и если он мне покажется интересным, я кое-что спрошу.

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

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

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

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

Добро пожаловать, чтобы вытолкнуть меня на берег:

  • Расположение: Шанхай-Ханчжоу Шэньчжэнь-Гуанчжоу
  • Зарплата: 8K - 12K
  • отказаться от аутсорсинга

мой гитхаб:Перейти немедленно

Библиотека компонентов пользовательского интерфейса:Немедленно перейти на китайский сайт

Категории