前言

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

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

希望大家除了在看如何回答面试题的基础上，还是建议大家可以系统性的、更加确切的去了解各个面试点要考的知识点，去了解到底这个是干什么的，而不是这道题要回答什么。

正文

象征性的开头

先问了一下学历，介绍了一下之前做过的项目，还有用了哪些技术栈、感觉自己项目当中遇见比较复杂的功能

这里大家根据自己的情况，只要回答的清晰就可以

前端技术问题

1、vue 生命周期有哪些？

beforeCreate（初始化界面前）
created（初始化界面后）
beforeMount（渲染dom前）
mounted（渲染dom后）
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 从输入按下回车键，到页面展示出来，都经历了什么？

首先，在输入网址按下回车以后，这个时候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 ，并调用该访问的资源文件，展示对应的内容。

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

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

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

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

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

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

由于我们做的产品，会涉及到很多的音频和视频，但是音频和视频文件是不允许同时播放的，每次只能播放一个；

比如我现在播放了一个 音频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；

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

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

我们都知道，js是单线程的，虽然现在有 worker 的存在，但是也只是可以进行运算，并不能操作 dom；

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

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

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

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

7、说一说 xss 攻击

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

如果我们自己去写这种攻击防御的方式，最简单的就是利用表单提交的内容，去做处理，不允许提交 script 标签内容等；

平时在实际项目当中，提交请求一般会用 axios，它对 xss 攻击已经做了拦截，我们不需要去在特意的做这方面的处理；

8、== 和 === 的区别

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

9、vue 当中，on 事件可以监听多个事件吗？

可以

职业发展和未来的规划

1、你自己是如何对自己未来定位的，你想向什么方向发展

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

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

如果抛开产品的方向的话，只考虑开发的话，我会想着把我的前端学精，毕竟前端涉及到的知识点有很多，虽然现在很多前端都要懂后端，这个我是赞同的，但是我觉得作为一个前端，还是把自己的本职工作做到一个极致，再去研究别的语言；

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

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

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

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

在以前，我是很少写这方面的东西，不喜欢写，懒，后来接触到一个朋友，他说你可以试着写一下，总结总结自己，然后我就开始去尝试着写了；

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

接着就是有一些点介绍的很不清楚，或者说理解有一定的问题，通过网友的评论，我也可以知道我自己的短板在哪里；

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

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

结束语

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

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

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