Всем привет, я фронтенд Сяобай Сиси, давайте запишем несколько вопросов из недавнего интервью! Это интервью с котирующейся на бирже технологической компанией в Чэнду. Давайте сначала поговорим о результатах. Оно закончено. Я не буду много говорить и сразу перейду к теме.
1. Часть интервью о перечисленных технологиях в Чэнду (в конце статьи есть письменные вопросы)
одна сторона
Когда я вошел в офис зарегистрированной компании, меня затащили в маленькую комнату и ждали со смешанными вкусами, как будто я играл в адские дела.Было слишком поздно, когда я сказал это, и красивая молодая леди шла in. Да, он был моим интервьюером (это немного интересно, это был первый раз, когда я встретил девушку для интервью, хахах~), а потом начал скучное представление себя...
1. Основной стек технологий это Vue, да?Расскажите про принцип двухсторонней привязки?
通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终
利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新。在
初始化vue实例时，遍历data这个对象，给每一个键值对利用Object.definedProperty
对data的键值对新增get和set方法，利用了事件监听DOM的机制，让视图去改变数据。
2. Использовали ли вы keep-alive и расскажите, как вы это понимаете?
keep-alive — это встроенный компонент Vue, который может сохранять состояние включенных компонентов и избегать повторного рендеринга.Он имеет следующие функции:
1. Обычно он используется в сочетании с маршрутизацией и динамическими компонентами для кэширования компонентов.
2. Обеспечьте атрибуты включения и исключения, оба из которых поддерживают строки или регулярные выражения, включение означает, что совпадают только имена Совпадающие компоненты будут кэшированы, а исключение означает, что любые компоненты, чьи имена совпадают, не будут кэшироваться, где исключение имеет более высокий приоритет, чем включать высокие.
3. В соответствии с двумя активированными и деактивированными функциями крюка, когда компонент активирован, активирована функция крюка, Когда компонент удаляется, срабатывает деактивированная функция крюка.
3. Почему данные являются функцией в компоненте?
data() {
return {
message: "123",
}
}
原因：因为组件是需要被复用的，所以必须是一个函数，如果是一个对象，作用域没有分开，子组件
的data属性值会相互影响。是一个函数的话那么每个实例可以维护一份被返回对象的独立的拷贝，组
件之间的 data 属性值不会互相影响。
4. Почему данные в новом Vue могут быть объектами?
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
})
原因：因为JS里的对象是引用关系，而且new Vue是不会被复用的，所以不存在引用对象的问题。
В это время я мельком взглянул на барышню, а она задумчиво посмотрела на мое резюме (подумав, что этому парню уже больше года не нравится) Опыт, он притворяется нежным? )
5. Программный вопрос, написанный Мисс Сестрой на обороте моего резюме.
var a=?;
if(a==1&&a==2&&a==3){
console.log('小样儿！');
}
问：当a等于什么的时候，if条件成立，并打印？
Я мог видеть след гордости в глазах молодой леди, я думал, что это не сработает, верно? Вы ошеломлены? Ва хахаха...
Я быстро и молниеносно дописала, да еще и другим методом (потому что я видела этот классический вопрос хи хи хи хи), Мисс Сестричка не могла усидеть на месте...
Он должен быть таким же, как и я.Когда я только увидел этот вопрос, я действительно почувствовал, что он странный, и почувствовал, что он не соответствует логике программы. Проанализируйте это
догадка:
Когда я впервые увидел этот вопрос, я подумал, что a=true или a=!0 должны работать, просто возьмите клавиатуру и просто сделайте это.
Из этого видно, что до меня еще не дошло чудо мира кода...
правильный:
Первый: используйте тип объекта для изменения
var a={
num:1,
toString:function(){
return a.num++;
}
}
if(a==1&&a==2&&a==3){
console.log("恭喜答对啦！");
}else{
console.log("还是错了小子！");
}
принцип:
a==1&&a==2&&a==3, это логический оператор И с коротким замыканием, который означает, что суждение будет продолжаться вправо, когда левое условие истинно, в противном случае все суждение будет немедленно закорочено, поэтому первое значение a должно быть Если a == 1 истинно, он будет продолжать оценивать справа a == 2. Из этого можно сделать вывод, что значение a или значение после типа преобразования в порядке.Самостоятельный ростДа, при сравнении значений разных типов в JavaScript они попытаются привести их к одному типу, а затем сравнить по правилам преобразования типов. Например, когда тип объекта сравнивается с типом числа, тип объекта будет преобразован в тип числа. Преобразование в попытается вызвать Object.valueOf и Object.toString, чтобы получить соответствующий числовой тип примитива.
В приведенном выше коде логическое преобразование сначала вызывает метод valueOf, а затем вызывает метод toString(), если возвращаемый объект все еще является объектом. При каждом сравнении сначала будет выполняться переписанный объектный метод toString(), который возвращает значение атрибута num, а затем увеличивает его. Когда выполняется суждение a==1, объект a вызывает метод toString(), чтобы вернуть значение атрибута num, равное 1. В это время сравнение между ними, конечно, равно. Аналогично, a==2 выполняется так же, как и a==3. Как это не очень умно?
Два: использовать значение массива и преобразование типа
var a=[1,2,3,4];
a.join=a.shift;
if(a==1&&a==2&&a==3){
console.log("恭喜答对啦！");
}else{
console.log("还是错了小子！");
}
принцип:
На первый взгляд, не кажется ли этот подход более элегантным? словоабсолютно, так как же он это сделал, причина в том, что мы все знаем, что все в JavaScript является объектом, поэтому Array также является потомком класса объектов, он также наследует от Obj valueOf() и toString() и переписывает toString( ) метод .Все подняли головы, посмотрите на это предложение a.join=a.shift,Он имеет в виду, что когда массив вызывает метод toString() и косвенно вызывает метод соединения, метод shift() заменяет метод соединения, что эквивалентно перехвату первого элемента массива и его возврату каждый раз. Следовательно, при оценке a==1 он фактически перехватывает значение первого элемента из исходного массива и возвращает его, так что исходный массив становится [2,3,4], а затем аналогично выполняется оценка a==2 Эксплуатация и так далее, как это очень умно! (Есть много способов добиться этого, проверьте сами).
две стороны
Барышня задумалась, но я не мог догадаться, о чем она думает, она встала и сказала: «Подождите немного, подождите, пока начальник придет и увидит вас снова...» Через некоторое время постепенно стал доноситься четкий звук туфель на высоких каблуках... Вошла еще одна барышня, толкнув дверь, и барышня тоже вошла, что? ? ? Это.. Это.. Я хочу присоединиться к этой компании. У меня в то время была идея (что я думаю.. Ха-ха, шучу, я человек, который может выдержать испытание)
Очередное представление себя, как и планировалось...
6. Поговорите о рукопожатии три раза и размахивая четыре раза? (требуется)
Симуляционное рукопожатие :( B пожалуйста ешьте, мне было так понятно)
1、客户端发送一个SYN码给服务器，要求建立数据连接；（甲：来我家吃饭，给你一张SYN门卡）
2、服务器拿到SYN和自己处理一个SYN（标志）；叫SYN+ACK（确认包）；发送给客户端，可以建立连接；（乙：我收到你的门卡了，我也给你一张叫ASK的卡）
3、客户端再次发送ACK向服务器，服务器验证ACK没有问题，则建立起连接；（甲：来了啊进来吧！乙：出示你的ASK卡，我看看走错没，甲：这不是吗？快进来吧）
волна:
1、客户端发送FIN(结束)报文，通知服务器数据已经传输完毕；（甲：小声嘀咕..这货吃完了吧？该走了吧）
2、务器接收到之后，通知客户端我收到了FIN,发送ACK(确认)给客户端，数据还没有传输完成（乙：我听到你说的话了，你确定赶我走吗？但是我还没吃完哎！）
3、服务器已经传输完毕，再次发送FIN通知客户端，数据已经传输完毕（乙：我吃完了，别解释了，果然不爱了，我走了）
4、客户端再次发送ACK,进入TIME_WAIT状态；服务器和客户端关闭连接；（甲：把你的ACK还给你，把我家米都吃空了）
Неа, смеяться уже сил нет, когда это пишу... Но мне кажется, для нас это более интуитивно понятно и понятно, если это все какие-то профессиональные термины, то может быть непонятно еще долго. Большие ребята, пожалуйста, не думайте, что это наивно, просто напишите это для некоторых студентов, которые только начали.
7. Почему установление соединения — трехстороннее рукопожатие, а разъединение — четырехстороннее рукопожатие?
建立连接的时候， 服务器在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个
报文里发送给客户端。而关闭连接时，服务器收到对方的FIN报文时，仅仅表示对方不再发送数据了
但是还能接收数据，而自己也未必全部数据都发送给对方了，所以己方可以立即关闭，也可以发送一
些数据给对方后，再发送FIN报文给对方来表示同意现在关闭连接，因此，己方ACK和FIN一般都会分
开发送，从而导致多了一次。
8. В чем разница между map и forEach?
Тот же пункт:
都是循环遍历数组中的每一项，forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是
item（当前每一项）、index（索引值）、arr（原数组），需要用哪个的时候就写哪个，匿名函数
中的this都是指向window，只能遍历数组。
разные:
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。(原数组进行处理之后
对应的一个新的数组),map()方法不会改变原始数组map()方法不会对空数组进行检测forEach()
方法用于调用数组的每个元素，将元素传给回调函数.(没有return，返回值是undefined，forEach
对于空数组是不会调用回调函数的。)
9. Говорите о прототипах и цепочках прототипов?
прототип:
把所有的对象共用的属性全部放在堆内存的一个对象中（共用属性组成的对象），然后让每一个对象的
__proto__存储这个（共用属性组成的对象）的地址。而这个共用属性就是原型。原型出现的目的就是
为了减少不必要的内存消耗。
Цепь прототипа:
而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object
的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回undefined，终点是null。
10. Что произошло после ввода URL-адреса соответствующей страницы?
Этот вопрос слишком широк, и на него дается несколько аспектов.Пожалуйста, см. Брат Саньюань здесь.(1.6w слов) Вопрос души браузера, сколько вы можете обрабатывать?
11. Использовали ли вы единый вход? Вы знаете, как он это сделал?
Честно говоря, я этого не делал, но я видел несколько технических блогов о едином входе, и общие принципы таковы:
концепция:
简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，
用户只需要登录一次就可以访问所有相互信任的应用系统。
列如：淘宝、天猫都属于阿里旗下的产品，当用户登录淘宝后，再打开天猫，系统便自动帮用户
登录了天猫，这种就是用单点登录实现的。
обработать:
1、用户访问A系统，系统A发现用户未登录，跳转至sso认证中心，并把自己的地址作为参数。
2、sso认证中心发现用户未登录，则引导用户到登录页面。
3、用户输入用户名和密码提交登录。
4、sso认证中心验证用户信息，创建用户->sso之间的会话（全局会话），同时创建授权令牌。
5、sso认证中心带着令牌跳转到A系统
6、系统A拿到令牌，去sso认证中心校验令牌是否有效。
7、sso认证中心校验令牌，返回有效，注册系统A。
8、系统A使用该令牌创建与用户的会话（局部会话），返回请求资源。
9、用户访问系统B。
10、系统B发现用户未登录，跳转至sso认证中心，也将自己的地址作为参数。
11、sso认证中心发现用户已登录，跳转到系统B，并附上令牌。
12、系统B拿到令牌，去sso认证中心校验令牌是否有效。
13、sso认证中心校验令牌，返回有效，注册系统B。
14、系统B使用该令牌创建与用户的局部会话，返回请求资源。
Уведомление:
1、局部会话存在，全局会话一定存在
2、全局会话存在，局部会话不一定存在
3、全局会话销毁，局部会话必须销毁
12. Каков основной процесс рендеринга в браузере?
将html代码按照深度优先遍历来生成DOM树。css文件下载完后也会进行渲染，生成相应的CSSOM。
当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。接下来，
浏览器就会进入Layout环节，将所有的节点位置计算出来。最后，通过Painting环节将所有的节
点内容呈现到屏幕上。
Затем я задал несколько вопросов по проекту.Следующими тремя сторонами было лицо начальника.Чего я не ожидал,так это женщину.Позже я узнал,что в компании только что была создана команда фронтенда,всего пять человек и четыре барышни (вау ка ка ка... ), начальник познакомился с моим бэкграундом и опытом, поговорил о зарплате, поболтать было неплохо, зарплатой остался доволен, а в итоге жалко ! Вступить в зарегистрированную компанию действительно проблематично. Говорят, что это займет около трех недель. Я только что переехал из Шэньчжэня в Чэнду. Я не могу ждать так долго, поэтому я, наконец, отказался от этого (очень огорчен...)
Написание тестирования
Мне потребовалось полчаса, чтобы написать все эти вопросы, и вы можете попробовать их!