Интервью — JD.com (Отдел дизайна пользовательского интерфейса торгового центра — Группа архитектуры интерфейса)

предисловие

для меня большая честь получитьJingdong Group-Jingdong Mall-Mall User Experience Design Department-Front-end Development Department-Front-end Architecture Groupопрос.

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

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

текст

Символическое отверстие

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

Здесь, в соответствии с вашей собственной ситуацией, пока ответ ясен, вы можете

Технические проблемы с интерфейсом

1,vueКаковы жизненные циклы?

beforeCreate(до инициализации интерфейса)
created(после инициализации интерфейса)
beforeMount(перед рендерингом дома)
mounted(после рендеринга дома)
beforeUpdate(до обновления данных)
updated(после обновления данных)
beforeDestroy(перед удалением компонентов)
destroyed(после удаления компонентов)

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

2,vueКак реализован данные ответа?

В официальной документации есть краткое введение, которое основано наObject.definePropertyдостигать;

Но есть одно требование, т.создавать экземплярVueПеред конструктором все данные для двусторонней привязки должны быть вdataВнутри выполнить инициализацию, даже если это нулевое значение;

Потому что при каждом воплощенииVueбудет провереноdata, просматривать и использовать свойство существованияObject.definePropertyследить;

Каждый раз, когда вам нужно судить или отображать текущие данные оперативного мониторинга, например:

<div>{{name}}</div>

new Vue({
    data(){
        return {
            name:'zhangsan'
        }
    }
})

При инициализации я связалnameсобственность, она находится вdivотображается внутри;

когда я былdivдобавить внутрьnameПри отображении, на самом деле, когда шаблон скомпилирован, я получаюnameАтрибуты;

Как упоминалось ранее, я привязываю текущее свойствоObject.defineProperty, поэтому при извлечении я позвонюgetметод;

Перед этим я создал экземплярdepочередь, поставьте каждую выборкуnameатрибут место, сделатьpush;

Когда я хочу выполнить модификацию данных, например, поместитьzhangsanсталlisi, затем вsetВ этом методе я обновляю позицию, в которой очередь моего текущего свойства имеет текущее свойство для прослушивания, и обновляю их все;

Наконец положитьdataИзменить значение атрибута в объекте;

Примечание: Это ответ из интервью, но он недостаточно подробный. Если вы хотите подробно узнать, что вы сделали, перейдите к:Анализ исходного кода Vue (перед созданием экземпляра) — принцип реализации адаптивных данных

4, одинurlЧто произошло с момента входа и нажатия клавиши Enter до отображения страницы?

Во-первых, после ввода URL-адреса и нажатия Enter DNS-сервер будет разрешать URL-адрес через текущий URL-адрес в это время.ip;

найти истинуIPПозже, в это время, браузерwebСервер инициируетtcpЗапрос подключения (трехстороннее рукопожатие):

первый раз: Когда связь установлена, клиент отправляетsynпакет на сервер и введитеSYN_SENT(Протокол управления передачей) статус, ожидание подтверждения сервера;

второй раз: сервер полученsynпакет, должен подтвердить клиентаsyn, а также отправитьackпакет, т.е.syn + ackпакет, сервер входитSYN_RECV(После пассивного открытия сервера он получаетsynи отправилackгосударство) государство;

в третий раз: клиент получает серверsyn + ackПакет, отправить пакет подтверждения на серверack, пакет отправлен, клиент и сервер входятESTABLISHED(tcpсоединение установлено успешно) статус, завершите трехстороннее рукопожатие;

Когда трехстороннее рукопожатие завершено, клиент и сервер установили соединение.tcpсоглашение отключено;

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

5. Как вы понимаете объектно-ориентированное, что такое объектно-ориентированное и что вы сделали с объектно-ориентированным

Объектно-ориентированный имеет три характеристики:упаковка,наследовать,полиморфизм, на самом деле есть еще одна особенность, т.Аннотация, но мы редко говорим это;

Объектно-ориентированный имеет две концепции:Добрыйа такжеПример;

Объектно-ориентированные преимущества: Расширяемый, простой в обслуживании, высокая сплоченность, низкое сцепление;

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

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

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

Я, например, сейчас играюаудио а, когда я в следующий раз нажму кнопку воспроизведенияаудио б, то на этот разаудио аЭто пауза, а не очистка состояния, а следующий щелчок — повторное воспроизведение;

И если я играю среди штатов, мне нужно обновитьdataДанные, полученные от объекта, правильнопоток движка jsЭто тоже повлияет, например, я в это время занимаюсь другими делами и должен быть в потоке событий.event loopстоять в очереди, чего мы не хотим;

Поэтому я использовал класс для этого, используемый шаблон проектированияодноэлементный шаблон;

При первом входе на страницу загружается только файл, а объект не создается;

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

class Media {
    
}

Media.instance = undefined;

Media.getInstance = function(){
    if(!Media.instance){
        Media.instance = new Media()
    }
    return Media.instance;
}

Это простая реализация одноэлементного шаблона;

Затем, если мы хотим выполнить описанную выше операцию с медиафайлом, нам понадобится отдельный атрибут:

class Media {
    constructor(){
        this._onlyMedia = {
            id:'',
            url:'',
            name:'',
            curTime:'',
            duration:'',
            ...
        }
    }
}

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

具体的实现步骤我就不写了，大概的意思表述清楚就好

6. Только что вы упомянули цикл событий, можете вкратце рассказать, что такое цикл событий?

Как мы все знаем, js является однопоточным, хотяworkerсуществует, но он может только работать, а не действоватьdom;

Поток, который js сначала выполняет, является основным потоком, а затем, после выполнения основного потока, это микро-очередь.microtaskПосле завершения выполнения микроочереди выполняется макроочередь.macrotask;

метод очереди макросов:setTimeout,setInterval,setImmediate,I/O,UI rendering

Микроочередь:promise.then,process.nextTick,Object.observe(已废弃)

Я только что написал статью об этом раньше, и если я хочу подробно разобраться в этих знаниях, перейдите к:Оптимизация производительности — механизм цикла событий js (цикл событий)

7. Скажи что-нибудьxssатака

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

Если мы сами напишем этот метод защиты от атак, самый простой способ — использовать контент, отправленный формой, для его обработки и не разрешить отправку.scriptсодержание этикетки и т. д.;

Обычно в реальном проекте для отправки запроса обычно используютaxios, это правильноxssАтака перехвачена, особо заниматься ею не нужно;

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

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

9,vueсреди,onМожет ли событие прослушивать несколько событий?

Могу

Карьерный рост и планы на будущее

1. Как вы позиционируете себя в будущем и в каком направлении хотите развиваться?

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

И если каждый будет рассматривать проблему со своей точки зрения, то будут определенные ограничения, в том числе и продукта.Хоть я и программист, но я буду рассматривать проблемы нашего продукта с точки зрения пользователя, а также Если я пользователь, какие продукты я хочу и какие продукты соответствуют моим потребностям?Необходимо выяснить, какие продукты хочет разработать менеджер по продукту и какие продукты нужны пользователям.Это две концепции;

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

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

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

2. Вы упомянули, что можете вести блог, это требование вашей предыдущей компании?

Нет, я написал это от своего имени;

Раньше я редко писал об этом, не любил писать, лень, а тут я связался с другом, он сказал, что можно попробовать написать, обобщить сам, и тогда я начал пробовать написать;

Сначала, когда я писал первую статью, я чувствовал себя так: я написал статью по своей идее, но для такой статьи я обнаружил, что была проблема с первым форматом набора, который выглядел очень неудобным и грязным;

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

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

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

заключительные замечания

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

Может быть это мои способности или нет, но выше все мои ответы, просто написанные в виде блога, написанные более подробно, может быть последнее, если второе, то это будет неправильно;

Наконец, меня порекомендовали в компанию без водителей, и у меня было 3 раунда техники, ожидание уведомления hr.