Отчет о предварительном интервью в мае | Шанхай

интервью
Отчет о предварительном интервью в мае | Шанхай

Отчет о предварительном интервью в мае | Шанхай

create by db on 2020-5-14 22:37:37
Recently revised in 2020-6-8 22:29:17

предисловие

  Хоулан, ты установил киоск?

 С июня по июнь влияние новой короны постепенно уменьшалось.

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

 Позвольте мне сначала рассказать о моей ситуации: Координация в Шанхае, трое не-бакалавров (без двойного первого класса, не специализирующихся на компьютерах), старый новичок в области фронтенда, работающий в небольшой компании, технологический стек Vue + ElementUI. Изначально планировал сменить место работы через год, но эпидемия вынудила его к середине года. К собеседованиям я начала готовиться 1 мая, основным каналом доставки был Boss, спустя почти месяц я прошла собеседование в семи компаниях (не считая телефонных) и получила три предложения. Я дам вам отчет об интервью здесь, который также является кратким изложением моего собственного выступления.

текст

 Сначала напишите свой опыт интервью и вопросы интервью, а затем некоторые из ваших собственных ответов. Пожалуйста, проверьте по требованию.

Компания А

ситуация в компании:

 Дачанг

  Можно только сказать, что я посмелее - наткнулся на голову нового БАТ в начале. Это рекомендует хедхантер. Я сделал некоторые приготовления, но, конечно же, он все еще был посажен. С одной стороны видео-интервью. Интервьюер очень приятный. Он задаст несколько вопросов, основываясь на своем резюме. У него больше базовых знаний и ему нужно писать код! Код вручную! Код вручную!

проблема:

  1. Реализация и преимущества и недостатки трехколоночной верстки

  2. Текстовый однострочный/трехстрочный дисплей

  3. Перерисовка и перекомпоновка

  4. Рукописная последовательность Фибоначчи и ее оптимизация

  5. Глядя на вывод кода, что такое макрозадачи и микрозадачи и что они включают?

  6. Напишите функцию глубокого клонирования javascript deepClone

  7. Два режима маршрутизации Vue, представляющие их принципы, преимущества и недостатки

  8. Написать функцию привязки событий js

  const Event = {
    on() {} // 绑定
    off() {} // 解绑
    trigger() {} // 触发事件
};
  1. рукописная функция дедупликации
 const arr = [1, '1', '1', 'NaN',NaN,'NaN', {a: 1}, '{a: 1}', {a: 1}]
  1. Алгоритм миксина/пользовательской директивы/v-if/diff в Vue

результат:

Пока

награда:

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

Усвоенный урок таков: вы не можете быть просто программистом (инженером CV?), вы должны знать причину, фундамент очень важен, понимание очень важно, и самое главное — уметь ясно выражать то, что вы делаете. хочу сказать.

Компания Б

ситуация в компании:

 Бизнес-отделу аутсорсинговой компании, занимающемуся собственными проектами, требуется реализация front-end и back-end среднего и высокого уровня (самого front-end нет)

одна сторона:

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

проблема:

  1. HTML-семантика

  2. Новые возможности CSS3

  3. Перерисовка и перекомпоновка

  4. Замыкания и их приложения

  5. Новые функции ES6, вопросы о let, promise, class и т. д.

  6. Кратко опишите элементы конфигурации webpack

  7. Алгоритмы сортировки, которые вы знаете, и как их реализовать

  8. Несколько способов передачи параметров в компоненты Vue

...и множество API для js-объектов

Вторая сторона:

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

  1. Зачем прыгать с корабля

  2. Основываясь на требованиях проекта, как исследовать потребности, выбрать подходящую структуру и схему и подробно описать процесс.

  3. Зачем нужно сдавать экзамен PMP по технологиям

  4. Какая самая сложная проблема на работе?

  5. Вы привели команду

  6. планирование будущей карьеры

HR сторона:

  Потом я пошла к HR, HR — милая дама (в маске, и я не могу видеть свое лицо)

  1. Когда я могу получить работу

  2. Ожидаемая зарплата

... слюни

результат:

  Предложение поступило, но зарплата не соответствовала ожиданиям, поэтому я отказался

награда:

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

Компания С

ситуация в компании:

 Небольшая компания, занимающаяся собственным проектом, имеет два фронтенда (оба молодые), предполагается, что будет набран фронтенд лидер, но JD не написал

интервью:

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

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

результат:

 Может быть, они не особо довольны друг другом, не более

награда:

  Очень плохой опыт собеседования.

Компания Д

ситуация в компании:

 Компания среднего размера, занимающаяся государственными проектами

одна сторона:

Это также не был особенно приятным опытом интервью.

 Собеседование было назначено на два часа дня, поэтому я пришел на десять минут раньше. Однако там 1 фронтенд, 3 теста и 6 бэкендов из одного блока (много давления) — их HR так кто-то забронировал одновременно? ! Затем на стойке регистрации попросили всех выстроиться в очередь, чтобы получить форму личной информации, и распечатать вопросы интервью на месте ... Прошло 20 минут работы, а затем полчаса, чтобы ответить на вопросы, а затем ждать интервью. . .

 Меня уведомили, что у меня может быть собеседование почти до четырех часов — все пришли, давайте встречаться — выходите на собеседование и будьте в хорошем настроении. Затем последовала самая раздражающая операция, HR отвел меня в небольшой кабинет, в котором был всего один компьютер——Интервьюер проводит удаленное собеседование. В то время в моем сердце пробежало 10 000 травяных и грязевых лошадей... Но все они пришли...

проблема:

  1. Представьтесь

  2. Процесс входа пользователя в систему и определение полномочий, хранение информации о пользователе

  3. Прыжок маршрута, как обновить страницу

  4. Расскажите об обычном рабочем содержании и процессе

  5. Расскажите о личном опыте работы

  6. Отправлен вопрос закрытия, чтобы увидеть результат

  7. Будет ли это Реакт

  8. Что ты хочешь спросить меня

 Сообщите HR первым делом после личной встречи - если есть два лица и вам нужно быть удаленным, пожалуйста, позвоните заранее (я так вежлив (⊙o⊙)…)

Вторая сторона:

 Вторая сторона — видеоинтервью дома после работы ночью (групповой чат WeChat)

 В 8 часов интервьюер опоздал на десять минут. HR сказал мне, что это собеседование с боссом, я думал, что буду говорить о проекте,похвастаться БГоворя об идеалах (в принципе, я не спрашивал многого), я встретил очень приземленного босса.

проблема:

  1. Разговор о типе и различии модели коробки

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

  3. Как написать перетаскиваемый div и как перетаскивать его на другие узлы

  4. Жизненный цикл Vue

  5. Защита маршрута Vue

  6. Параметры передачи компонента Vue

  7. Рисуем на месте трехрядную трехколоночную адаптивную верстку

результат:

  Получил предложение, но отказался из-за восприятия компании и удаленности от работы

награда:

  Очень странный опыт собеседования, многолетний опыт.

Компания Э

ситуация в компании:

 Средние и крупные компании (слышали название), занимаются внутренними проектами, JD требуется старший

интервью:

  Очень комфортное интервью (возможно я мазохист).

 HR — красивый парень (много и красивых HR — редкость), в компании много людей, и немного шумно. Интервью проводилось прямо у небольшой стойки регистрации у входа. Интервьюер на самом деле молодец, очень сильный, и вопросы очень подробные, от поверхностных до глубоких — в основном все фронтенд-знания разобраны.

проблема:

  1. HTML-семантика

  2. Используются некоторые теги HTML5

  3. Роль и разница между импортом и импортом

  4. Классификация и различие блочных моделей

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

  6. Определение BFC/действие/условие срабатывания

  7. отображать свойства

  8. приоритет селектора

  9. Макет с тремя колонками

  10. Синтаксис ES6: обещание/стрелочная функция/класс

  11. Использование и объем замыкания

  12. Цепочка прототипов, методы реализации наследования

  13. Асинхронность и ее решения, макрозадачи и микрозадачи и их процессы

  14. перекрестный домен

  15. Реализовать глубокое копирование

  16. выполнять обещания

  17. Разница между GET и POST кода http/status

  18. GET и POST http

  19. Жизненный цикл Vue/связь компонентов/реактивная реализация/шаблон маршрутизации/защита маршрутизации

  20. Упакованный принцип webpack, часто используемый загрузчик и плагин, а также некоторая общая конфигурация

  21. Асинхронные операции в node.js

  22. Знание ТайпСкрипта

  23. Внедрение интерфейсных микросервисов

  24. Вы привели команду

  25. В чем ты лучше всего

 前面回答基本没问题，但到后面webpack、node、微服务那一块，就有些捉襟见肘了。不过面试官很有耐心，每个回答都是记录，不清楚的也很耐心的解释。经过沟通发现，他这几天面了很多人了。 . .

  Один интервьюер дал мне хорошую оценку (возможно, бонус от односельчан), но мне, к сожалению, сообщили, что второй интервьюер не успел. . .

результат:

Пока

награда:

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

Компания Ф.

ситуация в компании:

 Малые и средние культурно-творческие компании

интервью:

 Интервьюер:Вы принимаете 996?

 я: Каков бюджет найма вашей компании?

результат:

 Это самое короткое интервью, которое у меня когда-либо было.

награда:

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

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

Компания G (последняя запись)

ситуация в компании:

Стартапы

Телефонное интервью:

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

одна сторона:

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

Вторая сторона:

 С другой стороны, он должен быть техническим директором.Основной вопрос касается обычной учебы (я сказал об этом в своем вступлении), каких-то обычных путей обучения, личных планов развития и ожиданий.

Три стороны:

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

результат:

  Оферту получил на следующий день, очень нравится атмосфера в компании, все доброжелательные. С нетерпением жду приема на работу.

награда:

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

Суммировать

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

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

Нынешний уровень физических лиц примерно средний +.В Шанхае зарплата крупных заводов будет относительно выше, но и требования к основам и алгоритмам тоже выше, для небольших компаний требования к алгоритмам не высокие, а браузерные принципы и JS и ES составляют большую часть, за ними следует фреймворк, и лучше всего иметь некоторый опыт упаковки проектов.

 Я написал этот блог, в основном самводный блогСделайте подведение итогов, если это может помочь всем, это лучше всего.

предположение

 Напоследок несколько предложений для друзей:

  1. Обычное накопление очень важно: Мы можем записать некоторые проблемы, возникшие в работе, и пути их решения, а также уделить время подведению итогов. Лучше всего найти платформу для ведения блога, Nuggets, GitHub, blog garden, CSDN — все это хорошо, хорошая память не так хороша, как плохое письмо, писать самому гораздо лучше, чем читать снова. Онлайн-блог нелегко проверить самостоятельно, и если вы столкнетесь с точкой знаний, которую вы не можете четко вспомнить в интервью, вы все равно можете поговорить об этом - я резюмировал ее в своем блоге.

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

  3. Подготовьтесь перед собеседованием: Собеседование — это экзамен, и мы должны пересмотреть к экзамену. Система знаний фронтенда по-прежнему очень понятна — страницы, стили, JS, фреймворки, упаковка проекта и построение, сначала освойте то, в чем вы хороши, а потом устраняйте белые пятна.

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

  5. Не будь голым! Не будь голым! Не будь голым!: Я три раза сказал важные вещи.Если у вас есть ипотека или автокредит, будет очень тяжело бросить работу и найти работу - у вас есть еда в руках, и вы не паникуете. Конечно, местные тираны на свободе...

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

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

приложение

Справочная документация

Отчет о промежуточном интервью за май | Otaku King - Nuggets

1. Реализация и преимущества и недостатки трехколоночной верстки

План размещения выполнить преимущество недостаток
Плавающая компоновка Есть три столбца слева и справа, левый столбец перемещается влево, правый столбец перемещается вправо, а средний столбец устанавливает левое и правое поля. Проще и совместимее Плавающие элементы отделены от потока документов, и вам нужно только обратить внимание на очистку флота при их использовании.
ПозицияМакет Левый, средний и правый три столбца (без порядка), напрямую задайте положение каждого дочернего элемента в соответствии с атрибутом позиционирования. Быстрая и простая настройка Элементы отделены от потока документов, а дочерние элементы также отделены от потока документов.Когда высота неизвестна, будут проблемы, а валидность и удобство использования относительно плохие.
Макет таблицы Левый, средний и правый три столбца, отображение родительского элемента: таблица, отображение дочернего элемента: таблица-ячейка, дочерний элемент по центру без ширины Простота в использовании, никаких проблем с совместимостью ①Невозможно установить поля столбца; ②Это не подходит для SEO; ③Когда высота одной из ячеек превышает высоту, ячейки с обеих сторон также становятся выше вместе
Гибкая компоновка Левый, средний и правый три столбца, отображение родительского элемента: flex, установка ширины с обеих сторон, центральный дочерний элемент flex: 1; более совершенный Существует проблема совместимости с IE, и он может поддерживать только IE9 и выше.
Макет сетки Три столбца слева, посередине и справа, отображение родительского элемента: сетка; реализовано с помощью сетки Самый мощный и простой Совместимость плохая, поддерживается в IE10+, поддерживаются только некоторые свойства.

2. Текстовый однострочный/трехстрочный дисплей

Одна строка текста, скрытая переполнением, становится...

 p {
    /* 隐藏元素溢出内容 */
    overflow: hidden;
    /* 单行显示 */
    white-space: nowrap;
    /* 溢出显示省略号 */
    text-overflow: ellipsis;
  }

Скрытие переполнения многострочного текста становится...

  p {
    overflow: hidden;
    /* 将对象作为弹性伸缩盒子模型显示 。 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数，即行数设置 */
    -webkit-line-clamp: 3;
    /* 规定框从上向下垂直排列子元素 */
    -webkit-box-orient: vertical;
  }

3. Перерисовка и перекомпоновка

переплавка: когда часть (или все) дерева рендеринга необходимо перестроить из-за изменений размера, макета, скрытия и т. д. элементов. Это называется reflow (на самом деле я думаю, что проще и понятнее будет называть это re-layout). Каждой странице требуется как минимум одна перекомпоновка, то есть при первой загрузке страницы.

перерисовать: когда некоторым элементам в дереве рендеринга необходимо обновить свойства, эти свойства влияют только на внешний вид и стиль элемента, но не на макет, например цвет фона. Это называется перекраска.

разница

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

Например: добавление или удаление видимых элементов DOM, изменение положения элемента, изменение размера элемента — поля, отступы, границы, ширина и высота, изменение содержимого.

  • Перекомпоновка часто сопровождается изменениями макета, которые обходятся дорого:

  • Перерисовка — это просто изменение стиля, а не структуры:

4. Рукописная последовательность Фибоначчи и ее оптимизация

Что такое последовательность Фибоначчи: Последовательность Фибоначчи, также известная как последовательность золотого сечения, была введена математиком Леонардодой Фибоначчи на примере кролиководства, поэтому ее также называют «кроличьей последовательностью». Относится к такой последовательности: 1, 1, 2, 3 , 5, 8, 13, 21, 34, ... В математике последовательность Фибоначчи определяется рекурсивно следующим образом: F(0)=1, F(1)=1, F(n)=F(n-1 )+F(n-2) (n>2, n∈N*), эта последовательность начинается с третьего элемента, каждый элемент равен сумме двух предыдущих

function Fibonacci (n) {
  if ( n <= 1 ) {return 1};
  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Этот метод наименее кодовый и простой для понимания, но при большом n быстро происходит переполнение стека, причина в том, что слишком много "вызывных фреймов" и браузер приостанавливает анимацию. Подробнее см.Оптимизация хвостового вызова расширения функции - Руан Ифэн.

  1. Рекурсия (оптимизированная версия)
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};
  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

Этот метод написан после оптимизации хвостового вызова функции (параметр по умолчанию поддерживается ES6 и более поздними версиями, а ES5 должен использовать обычный метод записи значения по умолчанию) Он немного сложен для понимания, но он не вызовет переполнения стека. рекомендуется использовать его.

  1. версия нормального цикла
function Fibonacci3(n) {
  if (n===1 || n===2) {
        return 1;
    }
    var n1 = 1, n2 = 1, sum;
    for (let i = 2; i < n; i++) {
        sum = n1 + n2
        n1 = n2
        n2 = sum
    }
    return sum
}

Лучше всего понятен циклический вариант, то есть дать начальное значение, а затем продолжить накапливать

  1. Разрушающая версия присвоения
var Fibonacci4 = function (n) {
  if (n===1 || n===2) {
        return 1;
    }
    let n1 = 1; n2 = 1;
    for (let i = 2; i < n; i++) {
        [n1, n2] = [n2, n1 + n2]
    }
    return n2
}

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

5. Проверьте вывод кода, что такое макрозадачи и микрозадачи и что они включают?

  setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

вывод:

2
3
5
4
1

задача макроса

# браузер Node
setTimeout √ √
setInterval √ √
setImmediate x √
requestAnimationFrame √ x

микрозадачи

# браузер Node
process.nextTick x √
MutationObserver √ x
Promise.then catchfinally Async/Await √ √

исполнительный механизм:

  1. Сначала выполнить основной поток
  2. При обнаружении очереди макросов (макрозадачи) поместите ее в очередь макросов (макрозадачу)
  3. При встрече с микроочередью (микрозадачей) поместите ее в микроочередь (микрозадачу)
  4. Основная ветка завершена
  5. Выполнить микроочередь (микрозадачу), выполняется микроочередь (микрозадача)
  6. Выполнить задачу в очереди макросов (макросаска) один раз и завершить выполнение
  7. Выполнить микроочередь (микрозадачу), выполнение завершено
  8. цикл по очереди. . .

6. Напишите функцию глубокого клонирования javascript deepClone

// 深拷贝
/**
 * 深拷贝对象，可以正确序列化日期
 * @param {*} obj
 */
export const DEEP_CLONE = function (obj) {
  let objClone = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 判断ojb子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === 'object') {
          // 深拷贝日期类型
          if (obj[key] instanceof Date) {
            objClone[key] = new Date(obj[key].valueOf())
            // console.log('deepClone', objClone[key])
          } else {
            objClone[key] = DEEP_CLONE(obj[key])
          }
        } else {
          // 如果不是，简单复制
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
}

7. Два режима маршрутизации Vue

hash

принцип

  • Реализация ранней внешней маршрутизации основана на location.hash, а значение location.hash — это содержимое после # в URL-адресе.

Принцип реализации заключается в отслеживании содержимого позади #, чтобы инициировать Ajax-запрос на частичное обновление без обновления всей страницы.

  • Используйте событие hashchange для отслеживания изменений URL-адреса. Следующие изменения URL-адреса вызовут событие hashchange: браузер меняет URL-адрес вперед и назад, тег a меняет URL-адрес, а window.location меняет URL-адрес.

преимущество

Совместимость с браузерами более ранних версий, Angular1.x и Vue по умолчанию используют хеш-маршрутизацию.

Только содержимое до символа # будет включено в запрос и отправлено на серверную часть, то есть, даже если серверная часть не полностью покрывает маршрут, она не вернет ошибку 404. Изменение хэш-значения добавит запись в историю доступа браузера, поэтому вы можете управлять переключением хэша с помощью кнопок браузера «назад» и «вперед». Переопределяет функциональность закрепленных за якорем элементов

недостаток

Это не очень красиво.Если данные, передаваемые потом, будут сложными, то будут проблемы.

history

принцип

  • history предоставляет два метода pushState и replaceState для записи состояния маршрутизации. Эти два метода изменяют URL-адрес, не вызывая обновления страницы.
  • history предоставляет событие popstate, аналогичное событию hashchange, но событие popstate немного отличается: событие popstate запускается, когда URL-адрес изменяется в браузере вперед и назад, а событие popstate не запускается при изменении URL-адреса через pushState. /replaceState или тег. К счастью, мы можем перехватить вызов pushState/replaceState и событие щелчка тега a для обнаружения изменений URL-адреса, поэтому мониторинг изменений URL-адреса может быть достигнут, но это не так удобно, как hashchange.
  • И pushState(state, title, url), и replaceState(state, title, url) могут принимать одни и те же три параметра.

преимущество

Простой в использовании, более красивый

Новый URL-адрес, заданный функцией pushState(), может быть любым URL-адресом того же происхождения, что и текущий URL-адрес, а хэш может изменить содержимое только после #, поэтому можно установить только URL-адрес того же документа, что и текущий URL-адрес.

Когда URL-адрес, установленный функцией pushState(), точно совпадает с текущим URL-адресом, он также будет добавлен в стек истории, а содержимое после hash# должно быть изменено, чтобы добавить его в новый стек.

pushState() может добавлять в запись данные любого типа через параметр stateObject, тогда как hash может добавлять только короткие строки pushState() может дополнительно установить атрибут title для последующего использования

недостаток

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

Из-за History API браузеры более ранних версий имеют проблемы с совместимостью.

Два разных сценария использования

  • Как видно из вышеприведенного, URL-адрес будет иметь # в режиме хеширования.Если вы хотите, чтобы URL-адрес был более элегантным, вы можете использовать режим истории.
  • При использовании режима истории вам нужно обратить внимание на добавление ресурса-кандидата, который охватывает все ситуации на стороне сервера: если URL-адрес не соответствует ни одному из статических ресурсов, вы должны вернуть ту же страницу index.html, которая является вашей страницей. приложение зависит от.
  • Когда вам нужна совместимость с браузерами более ранних версий, рекомендуется использовать хеш-режим.
  • Когда вам нужно добавить в запись данные любого типа, вы можете использовать режим истории.

8. Напишите функцию привязки событий js

  const Event = {
    on() {} // 绑定
    off() {} // 解绑
    trigger() {} // 触发事件
};

class Event {
  constructor() {
    // 为了查找迅速使用了对象
    this._cache = {};
  }
  // 绑定事件
  on(eventName, callback) {
    /* 为了查找方便和节省空间, 把同一类型事件放到数组中
     *  因为数组是有序的, 逻辑上是队列, 先绑定先触发
     * */
    // 如果有就放入, 没有就新建, 然后再看下是否有放入函数,没有就加入
    let fns = (this._cache[eventName] = this._cache[eventName] || []);
    // 如果事件方法没有的话就放入到字典进去
    if (fns.indexOf(callback === -1)) {
      fns.push(callback);
    }
    return this;
  }
  // 触发事件
  trigger(eventName, data) {
    // 看下字典里有没有这个函数名字， 有的话就触发它
    let fns = this._cache[eventName];
    if (Array.isArray(fns)) {
      // 有的话就对立面的每一个function传入参数data
      fns.forEach(fn => {
        fn(data);
      });
    }
    return this;
  }
  /*解绑， 看下字典里如果有这个事件名字就去
   * 看下要删除什么
   * */
  off(eventName, callback) {
    let fns = this._cache[eventName];
    if (Array.isArray(fns)) {
      if (callback) {
        let index = fns.indexOf(callback);
        if (index !== -1) {
          fns.splice(index, 1);
        }
      } else {
        // 全部清空
        fns.length = 0;
      }
    }
    return this;
  }
}
const event = new Event();
event.on("test", a => {
  console.log(a);
});
event.trigger("thet", "hello world"); // 绑定后就输出

event.off("test");
event.trigger("test", "hello world"); // 解绑后就不显示了

9. Функция рукописной дедупликации

  const arr = [1, '1', '1', 'NaN',NaN,'NaN', {a: 1}, '{a: 1}', {a: 1}]


// 利用for嵌套for，然后splice去重（ES5中最常用）
function unique2(arr) {
   for (var i = 0; i < arr.length; i++) {
     for (var j = i + 1; j < arr.length; j++) {
       if (arr[i] == arr[j]) {         //第一个等同于第二个，splice方法删除第二个
         arr.splice(j, 1);
         j--;
       }
     }
   }
   return arr;
 }

  // 利用hasOwnProperty
  function unique7(arr) {
   var obj = {};
   return arr.filter(function (item, index, arr) {
     return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
   })
 }


// 利用filter
function unique4(arr) {
   return arr.filter(function (item, index, arr) {
     //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
     return arr.indexOf(item, 0) === index;
   });
 }

10. mixin/пользовательские директивы/v-if/v-ssd/diff алгоритм

11 Рукописный аякс

// 手写ajax
function get(){  
  var req = new XMLHTTPRequest();  
  if(req){  
      req.open("GET", "http://test.com/?keywords=手机", true);  
      req.onreadystatechange = function(){  
          if(req.readyState == 4){  
              if(req.status == 200){  
                  alert("success");  
              }else{  
                  alert("error");  
              }  
          }  
      }  
      req.send();  
  }  
}

12 Функция привязки событий + делегирование событий

function delegate(element, eeventType, selector, fn) {
  element.addEventListener(eventType, e => {
    let el = e.target
  })
}

13 Экземпляр обещания

// Promise
function fn(){ 
  var promise = new Promise(function(resolve,reject){
    // ... some code
    if(/*异步操作成功*/) {
    resolve(value) // 成功调用resolve 往下传递参数 且只接受一个参数
    }else {
    reject(error)  // 失败调用reject  往下传递参数 且只接受一个参数
    }   
  });
  return promise
}

fn.then(function (r) {
  console.log('成功: ' + r);
}).catch(function (reason) {
  console.log('失败: ' + reason);
});
// 全部成功调用
Promise.all([promise1,promise2]).then(sucess1,fail1)
// 有一个成功就调用
Promise.race([promise1,promise2]).then(sucess1,fail1)

14 Самостоятельное выполнение обещаний

class MyPromise{
    constructor(executor) {
        this.status = "pending";     // 初始化状态为pending
        this.value = undefined;      // 初始化返回的成功的结果或者失败的原因
        
        // 这里是resolve方法，成功后执行，将状态改变为resolved，并且将结果返回
        let resolve = result => {
            if(this.status !== "pending") return;  // 状态一旦改变，就不会再变
            this.status = "resolved";
            this.value = result;
        }
        
        // 这里是reject方法，异常时执行，状态改为rejected，并且将失败的原因返回
        let reject = reason => {
            if(this.status !== "pending") return;
            this.status = "rejected";
            this.value = reason;
        }
        // try、catch捕获异常，如果错误，执行reject方法
        try {
            executor(resolve, reject)
        } catch(err) {
            reject(err)
        }
    }
}

15 Принцип и использование VueX

16 Реализация маршрутизации разрешений Vue

Сводка реализации маршрутизации разрешений Vue

17 js для оценки объектов и массивов

Объект суждения или массив

18 Что именно делает new() в js?

19 Сорт

Передовой

20 Параметры маршрутизации Vue -------- разница между параметрами и запросом

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

  1. params может использовать только имя для импорта маршрутов, запрос использует путь для импорта
  2. params похож на post, а query больше похож на передачу параметров get в нашем ajax.Проще говоря, первый не отображает параметры в адресной строке браузера, а второй отображает, так что передавать относительно безопасно значения через параметры.
  3. Использование значения похоже на это.route.params.nameиthis.route.params.name и это.маршрут.имя.запроса.
  4. Как только значение params обновляется, оно исчезает, а обновление значения запроса все еще существует.
this.$router.push({
path:"/detail",
params:{
name:'nameValue',
code:10011
}
});
this.$router.push({
path:'/xxx'
query:{
id:id
}
})

Резюме: этот метод можно использовать для небольшого количества параметров, если есть большой объем общедоступных данных, можно использовать Vuex или локальное хранилище.

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

Документ Соглашение

知识共享许可协议
dbбиблиотека документацииЗависит отdbиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеgithub.com/danygitgitСоздание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.

Категории