面试篇 - 京东（商城用户体验设计部 - 前端架构组）

前言

很荣幸，以前接到了 京东集团-京东商城-商城用户体验设计部-前端开发部-前端架构组 的面试。

接下来的内容，我会结合问题给出一个正确的答案，其中有一些问题，正好在我以前的专栏当中有涉及到，因此有些问题的回答，我会附上我写的专栏的连接。

但愿你们除了在看如何回答面试题的基础上，仍是建议你们能够系统性的、更加确切的去了解各个面试点要考的知识点，去了解到底这个是干什么的，而不是这道题要回答什么。

正文

象征性的开头

先问了一下学历，介绍了一下以前作过的项目，还有用了哪些技术栈、感受本身项目当中碰见比较复杂的功能

这里你们根据本身的状况，只要回答的清晰就能够

前端技术问题

一、vue 生命周期有哪些？

• beforeCreate（初始化界面前）
• created（初始化界面后）
• beforeMount（渲染dom前）
• mounted（渲染dom后）
• beforeUpdate（更新数据前）
• updated（更新数据后）
• beforeDestroy（卸载组件前）
• destroyed（卸载组件后）

注：平时在工做当中，咱们其实能够很清楚的知道有这些生命周期方法，可是呢，若是你们还想了解一下每一个生命周期执行前，都作了什么，请跳转：详解 Vue 生命周期实现

二、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 源码解析（实例化前） - 响应式数据的实现原理

四、一个 url 从输入按下回车键，到页面展现出来，都经历了什么？

首先，在输入网址按下回车之后，这个时候DNS服务器会经过当前的网址去解析网址的 ip；

在查找到真的 IP 之后，这个时候浏览器会向 web 服务器发起一个 tcp 链接请求（三次握手）：

第一次：创建连接时，客户端发送 syn 包到服务器，并进入SYN_SENT（传输控制协议）状态，等待服务器确认；

第二次：服务器收到 syn 包，必须确认客户的 syn ，同时本身也发送一个 ack 包，即 syn + ack 包，此时服务器进入 SYN_RECV （服务端被动打开后，接收到了客户端的 syn 而且发送了 ack 时的状态） 状态；

第三次：客户端收到了服务器的 syn + ack 包，向服务器发送确认包 ack ，此包发送完毕，客户端和服务器进入 ESTABLISHED （tcp 链接成功） 状态，完成三次握手；

当三次握手结束后，客户端和服务器就创建好了链接，这时候 tcp 协议断开；

开始访问当前服务器下默认的 index.html ，并调用该访问的资源文件，展现对应的内容。

五、你是怎么理解面向对象的，什么是面向对象，用面向对象作过什么

面向对象有三大特性：封装 、 继承 、多态 ，其实还有一个特性，就是 抽象 ，只不过咱们平时不多说这一点；

面向对象有两个概念：类 和 实例；

面向对象的优点：可扩展，易维护，高内聚，低耦合；

面向对象的劣势：因为它的特色致使了它的总体体积会很大，哪怕拆分红了不一样的类，这一点和 函数式编程 相比，是它的劣势，由于函数式编程有一个特色就是，每一个函数只作一件事情；

在项目当中，用面向对象作的东西不少，印象最深入的有两个，一个是 即时通信 的功能封装，还有一个就是 音频视频播放 的统一处理，即时通信涉及的功能比较多，也比较繁琐，我拿 音频视频播放 这个功能点来举例：

因为咱们作的产品，会涉及到不少的音频和视频，可是音频和视频文件是不容许同时播放的，每次只能播放一个；

好比我如今播放了一个 音频a，当我接下来点击播放 音频b，那么这个时候 音频a 是要暂停的，而不是清空状态，下次点击是从新播放；

并且若是我再播放状态当中，一直去进行更新个人 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:'',
            ...
        }
    }
}
复制代码

这样就知道了大概的一个意思，好比我要每次点击媒体文件的时候，要去对比是否是同一个，由于有不一样的id；

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

六、刚才你提到了事件流（event loop），能简单的说一下，什么是事件流吗？

咱们都知道，js是单线程的，虽然如今有 worker 的存在，可是也只是能够进行运算，并不能操做 dom；

js最一开始执行的线程，是主线程，而后主线程执行完毕后，是微队列 microtask 的循环执行，微队列执行完毕后，在执行宏队列 macrotask；

宏队列的方法：setTimeout 、setInterval 、setImmediate 、I/O 、UI rendering

微队列的方法：promise.then、process.nextTick 、Object.observe(已废弃)

正好以前写过这方面的文章，想详细的理解这一块的知识，跳转：性能优化篇 - js事件循环机制（event loop）

七、说一说 xss 攻击

其实就是一种利用脚本把代码植入到提供给其余用户使用的页面中，通常就是利用表单提交；

若是咱们本身去写这种攻击防护的方式，最简单的就是利用表单提交的内容，去作处理，不容许提交 script 标签内容等；

平时在实际项目当中，提交请求通常会用 axios，它对 xss 攻击已经作了拦截，咱们不须要去在特地的作这方面的处理；

八、== 和 === 的区别

== 会自动转换类型进行对比，=== 是强制性不会转换

九、vue 当中，on 事件能够监听多个事件吗？

能够

职业发展和将来的规划

一、你本身是如何对本身将来定位的，你想向什么方向发展

个人本职工做，是一个前端，可是我对产品也很感兴趣，作了这么久的前端，我发现了一些前端和产品沟通直接存在的一些问题，可能互相表达的意思是同样的，可是术语不同，沟通成本的提高，从而致使了互相直接会出现必定的摩擦；

并且若是每一个人站在本身的角度去考虑问题的话，都会有必定的局限性，包括产品，我虽然是一个程序员，可是我会站在一个用户的角度去考虑咱们的产品存在的问题，还有我是一个用户，我想要什么样的产品，什么样的产品符合个人需求，要搞清楚产品经理要设计什么样的产品，和用户须要什么样的产品，这是两个概念；

若是抛开产品的方向的话，只考虑开发的话，我会想着把个人前端学精，毕竟前端涉及到的知识点有不少，虽然如今不少前端都要懂后端，这个我是赞同的，可是我以为做为一个前端，仍是把本身的本职工做作到一个极致，再去研究别的语言；

我说的极致不是很好的完成手头的工做，而是要针对这个领域，去不断的学习和追踪，对新知识要有很强的嗅觉；

平时我会对本身了解到的知识、新技术的探索，还有一些比较大型的框架的源码进行解读而后写成文章发布到博客上；

二、你有提到你会写博客，这是你以前公司的要求吗？

不是的，是我以我的的名义去写的；

在之前，我是不多写这方面的东西，不喜欢写，懒，后来接触到一个朋友，他说你能够试着写一下，总结总结本身，而后我就开始去尝试着写了；

起初写第一篇的时候，感受就是这样的，按照个人想法去写了一篇文章，可是这样的文章，发现第一排版格式就有问题，看起来很不方便，很乱；

接着就是有一些点介绍的很不清楚，或者说理解有必定的问题，经过网友的评论，我也能够知道我本身的短板在哪里；

时间长了，就养成了这种习惯，喜欢分享，喜欢写文章，和你们一块儿进步，其实写博客还有一个好处，就是你写博客时间长了，表达能力也会有必定的提高；

技术好，不会表达，是很难一块儿合做的，那样只能单兵做战，只有把你说的让全部人都懂了，能够接受了，说明你在团队里能够起到很大的做用，有时候，技术好不如会沟通表达的好；

结束语

后来两个面试官出去了半天，后来进来跟我说，感受很合适，是这几天面试的最合适的一个，可是由于52原则，他们去找了技术总监商量，技术总监说可能hr那边过不了，后来问了一个我以前的同事如今在京东，他说若是要这种不符合52原则的进来，是须要面试官到技术总监之间全部人担责任，保证我能够在京东待够两年；

也许是我能力仍是不足，可是上面都是个人回答，只不过以博客的形式写出来，写的更详细了些，还有可能就是后者，若是是后者的话，那就冤了；

最后把我推荐到了一个无人驾驶的公司，面了3轮技术，等hr通知。