微信号:JavaScriptcn

介绍:面向JavaScript爱好人员提供:前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js等一系列教程和经验分享.

10.26 酷狗音乐校招前端一面经历

2018-10-31 08:35 BlueYuFisher

酷狗一面

1. 如何实现三栏布局(左右两边固定宽度,中间自适应)?

  1. 使用flex布局: 父元素设置 display: flex,左右两边设置固定宽度,中间设置 flex-grow: 1

  2. 使用浮动布局:左右两边设置固定宽度,而且分别设置 float:leftright,这个方法有一个需要注意的是在HTML中,中间栏需要和右边栏进行对调;

  3. 使用绝对定位布局:左右两边设置固定宽度和 position:absolute,而且分别设置 left: 0和 right: 0,中间栏只要设置左右margin为左右栏的宽度就可以了(需要注意的是左右两边需要设置 top: 0,不然右边会被订下来)

补充

其实还有表格布局,网格布局和圣杯布局,详细请看三栏布局的5种解决方案及优缺点

2. 如何实现弹窗水平垂直居中?

3. ==和 === 的区别

===为恒等符:当等号两边的值为相同类型的时候,直接比较等号两边的值,值相同则返回true,若等号两边的值类型不同时直接返回false。

==为等值符: 当等号两边的值为相同类型时比较值是否相同,类型不同时会发生类型的自动转换,转换为相同的类型后再作比较。
a、如果一个是null、一个是undefined,那么[相等]。
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻 烦,我也不大懂)
e、任何其他组合,都[不相等]。

4. 30 == '30' 的过程是怎样的?

  1. 30为数值类型,而'30'未字符串类型,因此等号两边的数据类型不相等,需要进行转换类型;

  2. 由于一个是数值,另一个字符串,所以需要将字符串转换成数值再进行比较,即 '30' => 30;

  3. 这时等号两边同样为数值型数据,即 30 == 30,所以返回 true

5. 以下代码输出的是什么?为什么呢?

 
           
  1. for (var i=0; i<5; i++) {

  2. setTimeout( function timer() {

  3. console.log(i);

  4. }, 0 );

  5. }

6. 你有使用过闭包吗?

7. 模块化的异步加载怎样做?

8. window.onload执行时间?

9.图片加载完的时候会执行吗?

10. 了解JS继承吗?

11. 利用原型链的继承有什么缺点吗?

12. 知道如何修改this的指向吗?

修改this指向的办法有三种: apply、 call和 bind
apply、 call:通过传入需要指向的对象,从而改变 this的指向,指向传入的第一个参数;
bind:它会创建一个函数的实例,其this值会被绑定到传给bind()函数的值。

 
           
  1. window.color = 'red';

  2. var o = { color:'blue' };

  3. function sayColor(){

  4.    console.log(this.color);

  5. }

  6. var globalSaycolor = sayColor;

  7. var objectSaycolor = sayColor.bind(o);

  8. globalSaycolor();  // red

  9. objectSaycolor();  // blue

补充

其实还有一种:new关键字改变this指向
因为在 new的过程中,其中有一个步骤为将构造函数内部的 this指向实例对象,所以通过 new关键字也可以改变 this的指向。

13. apply和 call的区别?

相同点:可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

不同点:实际上, apply和 call的功能是一样的,只是传入的参数列表形式不同。
apply:最多只能有两个参数——新 this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果 argArray不是一个有效的数组或 arguments对象,那么将导致一个 TypeError。如果没有提供 argArray和 thisObj任何一个参数,那么Global对象将被用作 thisObj,并且无法被传递任何参数。

call:它可以接受多个参数,第一个参数与 apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供 thisObj参数,那么 Global 对象被用作 thisObj

14. 有一个按钮是异步生成的,怎样对它进行事件绑定?

由于按钮是异步生成的,所以我选择将事件绑定在按钮生成的父元素上,通过事件委托的机制,利用事件冒泡,把事件绑定在父元素上,可以通过判断 event.target按钮是否已经生成,从而实现相应的事件。

科普补充:
事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到 document对象;
事件捕获则跟事件冒泡相反,事件会从 document对象开始发生,直到最具体的元素;

15. 跨域有处理过吗?

我处理过的跨域有两种情况:

  1. 一种是在页面中嵌入了一个iframe,因此父子iframe间产生了跨域,要解决这个问题,只需要把 document.domain设置成相同的值就可以在两个页面里进行相应的操作了;

  2. 另外一种情况是用Vue开发涉及到的跨域问题,这个问题只需要修改config文件夹下的index.js中的dev:{}部分中修改proxyTable参数即可,相当于对跨域的url进行了代理,从而可以顺利访问。

另外说了一下自己比较熟悉的一种跨域解决方案:JSONP
JSONP解决跨域问题的本质其实就是 <script> 标签可以请求不同域名下的资源,即 <script> 请求不受浏览器同源策略影响。

面试官听到JSONP立刻提出了一个问题:JSONP是否可以支持 POST方法?为什么?

JSONP只支持 GET的请求方法,上面也提到了JSONP原理其实就是利用 <script> 标签发送了一个 URL给服务器,其实与 ajax XMLHttpRequest协议无关了,相当于输入了一个 url而已,所以必然只能为 GET请求方法。

16. 既然提到 POST和 GET,说说两者的区别?

  1. 大小: GET提交的数据最大为2k(原则上url长度无限制,可是浏览器通常限制url长度在2k左右); POST理论上没有限制大小(实际上IIS4中最大量为80KB,IIS5中为100KB)。

  2. 发送方式: GET请求数据放在url上,即HTTP协议头中,其格式为: url?key=value&key2=valuePOST把数据放在HTTP的包体中(Request Body)。

  3. 安全性: GET请求可被缓存,请求保存在浏览器历史记录中; POST则不能被缓存。与 POST相比, GET的安全性较差,因为发送的数据是URL的一部分。

  4. 发送TCP包:对 GET请求只产生一个TCP包,浏览器会把 http header和 data一并发送出去,服务器响应 200(返回数据);对于 POST请求产生两个TCP数据包,浏览器先发送 http header,服务器确认权限正确响应 100(continue)返回浏览器,浏览器收到 100确认继续请求,再次发送 data,服务器响应 200(返回数据)。

17. 听到你提到浏览器,你了解浏览器缓存的方式吗?

18. 看你有用过Promise,知道Promise有几种状态?

19. 你知道 pending状态可以停止吗?

20. 那XMLHttpRequest 的 pending状态可以停止吗?

21. 知道Promise和setTimeout的执行顺序吗?

22. vue中生命周期中的钩子函数用过哪些?

23. 为什么不把数据放在created函数中?

24. 对Vue的数据双向绑定有了解吗?

25. 了解重绘和回流吗?页面的加载顺序?

26. 如何减少回流、重绘?怎样控制只有一部分回流?

27. 了解什么算法?快排?

28. 还了解什么排序算法?

29. 了解二叉查找树吗?

30. 有了解什么后端语言吗?知道面向对象的特性吗?

31. 知道数据库连接池吗?

32. 未来前端的规划?

酷狗二面

在面完第一面之后,本来以为终于结束了,没想到迎来的是第二技术面,后面面试官介绍说其实本来是应该两个人同时面我的,因为有一个面试官没空,所以就错开了,就有了"二面"了,其实本质上还是一面而已。

1. 自我介绍

2. 问了一下笔试的时候不应该错的题

3. 理解的HTTP状态码有哪些?

4. 正则的题目,对比 /^[a-z0-9][a-z]+$/和 /^[a-z0-9][a-z]*$/的区别?

5. display:none 和 visibility:hidden的区别?

6. CSS选择器的理解,你知道多少选择器?

7. CSS3布局,移动端有用过rem吗?布局的话一般怎样布局?

8. Flex布局和传统的其他布局有什么优点?

9. Flex的居中方式有哪些?其他方式有哪些?

10. display设置inline-block的话,多个之间有间隔应该怎样处理? (父节点font-size: 0)

11. 更熟悉那方面的技术栈?

12. 对自己项目是怎样设计和选型的?

13. 有用到vuex吗?

14. 组件之间的通讯怎样做到?

15. 真的学习前端是什么时候开始?

16. 方向是选择全栈还是只做前端?

17. 有没有在nodeJS上做过什么?

18. 有没有在npm上面做过开源的学习?

19. 对毕业之后的学习规划?

END

作者:BlueYuFisher 
https://segmentfault.com/a/1190000016828125

 
JavaScript 更多文章 你为什么用或不用框架? 为什么前后端分离了,你比从前更痛苦? 看懂英文技术文档,每天只需要10分钟做这件事… 前端视界:Chrome71Beta、Node.js11、Reactv16.6.0、RN0.57.4、Angular7.0.1.. 程序员35岁以后有3大出路!
猜您喜欢 腾讯大数据面试及参考答案[2017] DaoCloud Microservices Platform 全新上线,助力企业实现业务从&nb draw.io - 免费的流程图绘制工具 《锦绣蓝图》阅读笔记 CBD商圈人群分析——北上广深商圈人群画像分析