предисловие
Недавно я читал некоторые фейсбуки и смотрел вопросы, с которыми другие сталкивались в интервью, а затем разбирал вопросы и ответы каждый раз, когда я читал фейсбук. (Будет обновлено с большой вероятностью в будущем)
Об этой статье
Эта статья написана потому, что я недавно проголосовал за стажировку в Didi, поэтому я проверил опыт Didi на Niu Ke, поэтому я увидел этоДиди сп лицевая сторона, чтобы разобраться в ответах на вопросы в нем. Конечно, если что-то не так или не так, я все же надеюсь, что вы сможете прокомментировать и исправить мои ошибки. (Темы, связанные с React, пока объясняться не будут, а график автора еще не выучил React>_
Didi sp вопросы и ответы
1. Рукописная модель публикации-подписки
Меня ошарашил первый вопрос, если я не понимал, то шел прямо в Наггетс проверять модель публикации-подписки, оказалось, что это знания о шаблонах проектирования. Если знание этого произведения отсутствует, то дополняйте его, потому что я его еще не понял, поэтому подробно объяснять пока не буду.
2. Принцип двусторонней привязки Vue
Vue.js использует перехват данных в сочетании с моделью издатель-подписчик.Object.defineProperty()Чтобы захватить сеттеры и геттеры каждого свойства, публикуйте сообщения подписчикам при изменении данных и запускайте соответствующие обратные вызовы прослушивателя.
- ① Реализовать прослушиватель данных Observer, который может отслеживать все атрибуты объекта данных.Если есть какие-либо изменения, можно получить последнее значение, и подписчики будут уведомлены.
- ② Реализовать парсер инструкций Compile
- ③ Реализуйте Watcher в качестве моста между Observer и Compile, который может подписываться и получать уведомления о каждом изменении свойства, выполнять соответствующую функцию обратного вызова, связанную с инструкцией, и обновлять представление.
- ④ Функция ввода Mvvm, объединяющая три вышеуказанных
3. Разница между Vue и React
"Тот же пункт:"
- ① использовать оба
Virtural Dom - ② Оба используют идею компонентизации, и процесс в основном одинаков
- ③ Существуют зрелые сообщества, поддерживающие рендеринг на стороне сервера.
"разница:"
- ① Компонентная связь отличается
- ② Рендеринг шаблона отличается
- ③ Различные алгоритмы Diff
- ④ Механизм события отличается
- ⑤ Принципы реализации мониторинга изменений данных отличаются
(Надеюсь, вы поможете мне добавить его сюда)
4. Знаете ли вы о Webpack и как это сделать? Разница между лодером и плагином
(1) Что это?
- Webpack — это инструмент для упаковки модулей, который можно использовать для управления зависимостями модулей в проекте и компиляции статических файлов, необходимых выходному модулю. Он может хорошо управлять и упаковывать HTML, CSS, JS и статические файлы, используемые в разработке, что делает разработку более эффективной. Для различных типов зависимостей webpack имеет соответствующие загрузчики модулей и будет анализировать зависимости между зависимостями модулей и, наконец, объединять и генерировать оптимизированные статические ресурсы.
(2) Как это сделать? (основная функция, принцип работы)
- Преобразование кода, оптимизация файлов, разделение кода, объединение модулей, автоматическое обновление, проверка кода, автоматический выпуск
(3) Разница между лодером и плагином
- "loder"Дать веб-пакету возможность загружать и анализировать файлы, отличные от js.
- "plugin"Он может расширить функции веб-пакета и сделать веб-пакет более гибким. Вы можете изменить результат вывода через API веб-пакета во время процесса сборки.
5. Понимает ли Axios? Каков принцип Jsonp?
(1) Что такое Аксиос?
- axios — это HTTP-библиотека на основе обещаний, которую можно использовать в браузерах и node.js.
(2)"В чем особенности Axios"? (расширять)
- Создать из браузера
XMLHttpRequests - Создать http-запрос из node.js
- Поддержка обещания API
- Перехват запросов и ответов
- Может отменить запрос
- Автоматически преобразовывать данные JSON
- Поддержка клиентов для защиты XSRF
(3) Что такое Jsonp? (принцип Jsonp)
- Динамически создавая тег script, его src указывает на URL-адрес другого происхождения и передавая параметр обратного вызова в качестве вызова функции с именем функции и рядом параметров, страница выполняет обратный вызов после получения ответа и обрабатывает данные
6. Рукописный ajax, что означает readyState=1, 2, 3?
(1) Рукописный ajax (простая версия)
function ajax ( url , successFn ){
const xhr = new XMLHttpRequest()
xhr.open( 'GET' , url , true)
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 ){
if( xhr.status == 200 ){
successFn(xhr.responseText)
}
}
}
xhr.send(null)
}
(2) Что такое readyState? Что такое READYSTATE = 1, 2 и 3?
- — это статус HTTP-запроса.При первом создании XMLHttpRequest значение этого атрибута начинается с 0 и увеличивается до 4, пока не будет получен полный HTTP-ответ.
- 0:("Неинициализированный") объект создан, но не инициализирован (метод open не вызывался)
- 1:("инициализация") объект был создан и не вызывался
sendметод - 2:("отправить данные")
sendМетод был вызван, но текущее состояние и заголовки http неизвестны. - 3:("Передача данных") получил некоторые данные, поскольку ответ и заголовок http неполные, то передайте
responseBodyа такжеresponseTextПолучение некоторых данных выдает ошибку - 4:("Заканчивать") данные получены, можно пройти
responseXmlа такжеresponseTextПолучить полные данные ответа
7. Расскажите о глубоком и поверхностном копировании
ссылка здесьПоговорите о глубоком и поверхностном копировании объекта.
Поверхностная копия: создает новый объект с точной копией значений свойств исходного объекта. Если свойство является базовым типом, копируется значение базового типа.Если свойство является ссылочным типом, копируется адрес памяти, поэтому, если один объект изменит этот адрес, это повлияет на другой объект.
"Метод мелкой копии"
Objcet.assign- оператор распространения...
Array.prototype.sliceArray.prototype.concat
Глубокая копия: полная копия объекта из памяти, открытие новой области из кучи памяти для хранения нового объекта и изменение нового объекта не повлияет на исходный объект.
"метод глубокого копирования"
JSON.stringify()- рукописная глубокая копия
8. Рукописная глубокая копия
Старая тема прямо по коду
function deepClone( obj = { } ){
if( typeof obj !== 'object' || obj == null ){
return obj
}
let result
if( obj instanceof Array ){
result = [ ]
} else {
result = { }
}
for( let key in obj ){
if( obj.hasOwnProperty(key) ){
result[key] = deepClone( obj[key] )
}
}
return result
}
9. Как реализован setTimeout? поставить в очередь? Когда вводится код?
Первоначально я думал об этом вопросе как о простой очереди задач и говорил о цикле событий, но я прочитал ответ, написанный владельцем этого интервью, и он такой
❝Он реализован не с помощью очереди, он реализован с помощью хеш-объекта и вставляется только тогда, когда код сталкивается с ним.
❞
--Диди сп лицевая сторона
Я не сразу понял, что это значит, искал соответствующие знания, но не нашел, интересно, может ли кто-нибудь дать мне какую-нибудь научно-популярную информацию.
10. В чем разница между стрелочной функцией и обычной функцией
"Разница в функциях стрелок:"
- ① Нельзя вызвать с новым ключевым словом, нет прототипа
- ② Это связывание не может быть изменено, он определяется наружной функцией без стрелки, поэтому с использованием вызова, применения, привязки не влияют на
- ③ не поддерживает аргументы, поэтому в соответствии с цепочкой областей видимости будут получены аргументы внешней функции
- ④ Параметры с повторяющимися именами не поддерживаются.
- ⑤ Неявный возврат
11. Расскажите о http и https
ссылка здесь«Поиск и заполнение пробелов» для консолидации вашей системы знаний HTTP
HTTP
"Преимущества http":
- ① Гибкость и масштабируемость. Во-первых, грамматически указывается только базовый формат, пробелы — отдельные слова, новые строки — отдельные поля и т. д. Другое дело, что форма передачи может не только передавать текст, Вы также можете передавать любые данные, такие как изображения, видео и т. д.
- ② режим запрос-ответ. Вообще говоря, одна сторона отправляет сообщение, а другая сторона хочет Примите сообщение или ответьте соответствующим образом и т. д.
- ③Надежная передача. HTTP основан на TCP/IP и, таким образом, наследует эту функцию.
- ④ Лица без гражданства. Ответ на этот сценарий
"Недостатки http":
- ① Иногда без сохранения состояния необходимо сохранять информацию, например, системы покупок, информацию о клиентах и т. д. С другой стороны, иногда без сохранения состояния также сокращается доступ к сети. Продажи, такие как индустрия прямых трансляций и т. д., по-прежнему делятся на сценарии.
- ②Передача обычного текста, то есть сообщение в протоколе (в основном, относящееся к заголовку) использует не двоичные данные, а текстовую форму. Это раскрывает информацию о HTTP-сообщении внешнему миру, обеспечивая удобство для злоумышленников.
- ③ Блокировка начала строки, когда http открывает длинное соединение, TCP-соединение используется совместно.Когда запрос занимает слишком много времени, другие запросы могут быть только заблокированы, что является проблемой блокировки начала строки.
HTTPS
У HTTPS больше концепции безопасности, чем у HTTP.На самом деле HTTPS не является новым протоколом прикладного уровня.На самом деле это комбинация протоколов HTTP + TLS/SSL, и гарантия безопасности - это именно то, что делает SSL/TLS.
разница:
- HTTP — это протокол передачи открытого текста, а протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL + HTTP для зашифрованной передачи и аутентификации личности, который является более безопасным, чем протокол HTTP.
- HTTPS более безопасен, чем HTTP, более удобен для поисковых систем и выгоден для SEO.Google и Baidu предпочтительно индексируют HTTPS-страницы.
- Стандартный порт HTTPS 443, стандартный порт HTTP 80
- HTTPS требует SSL-сертификата, а HTTP — нет.
напиши в конце
Это первая статья на эту тему в моем фейсбуке, и я продолжу обновлять ее позже.Если вы считаете, что я пишу неплохо, вы можете поставить мне лайк ^^. После прочтения некоторых личных вопросов и вопросов интервью я все еще чувствую, что мне нужно работать усерднее, потому что есть еще много знаний, которые я еще не полностью освоил.Если интервьюер спросит немного глубже, я, возможно, не смогу ответь, продолжай!
Другие статьи
- Обход бинарного дерева структуры данных
- Резюме обучающего видеоролика проекта Imitation Qunar
- Webpack прост в освоении
- Серия глютена ②—— Стажеры DiDi
В этой статье используетсяmdniceнабор текста