jisuanke面经

CSS

手写一个布局

用float写出来了。

那用flex怎么实现？

不会（囧）

BootStrap用过吗？有什么特点？用BootStrap写一个三列的div。你知道BootStrap的网格布局是怎么实现的吗？

答：响应式，组件化。col-md-3。使用百分比

为什么有的网站一到移动端就不自适应了？就是尺寸什么的都不对（不知道怎么表达）……

答：没加那个标签

用过less或者sass吗？

看过less的文档，没真正用过

你觉得这类CSS预处理语言有什么特点？

支持变量和函数式书写样式（嵌套）

input（type）的默认值（就是那种灰色的字）怎么实现，如果用脚本呢？

用placeholder那个属性

大概想了一下，思路是onload的时候给一个初始值，然后onfocus清空，onblur的时候检测一下文本值，如果是空的，那么再赋值初始值，如果不是空的那么不用改动

JS

怎样理解闭包？

老生常谈，不罗嗦了……

前端性能优化？

一方面，自动化处理工具、插件；另一方面，代码规范

知道循环事件吗 loopEvents？

不知道（囧），

很重要

，不知道的小伙伴快去看一下

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

看不懂就看这个视频（2014JSConf上的一个小哥，深入浅出）

http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html

说一下bower, yeoman, grunt, webpack的区别？

bower是包管理工具，yeoman算是一个工具箱吧，帮助快速构建项目搭建“地基”，grunt/gulp的话算是标准意义上的自动化工具，提供的插件挺多，功能blahblah……webpack/browserify的话就是帮你分析静态资源之间的依赖关系然后进行整合。

介绍一下ES6的新特性？你用什么来写ES6？

箭头函数、块级作用域、模块依赖import/export、Promise对象……

Babel。

IE和其他浏览器的监听事件的方法有什么不同？那怎么在脚本中判断用哪种方法呢？

IE用的是attachEvent()，其他用的是addEventListener()

当时想的是用window的navigator对象获取浏览器的版本信息，但是其实只用一条简单的兼容测试就好了（好蠢，这都忘了）：

if(this.attachEvent)

以下代码会输出什么？

var foo = function () {
for (var i = 0; i < 10000; i++) {}
console.log(1)
}
var bar = function () {
console.log(2)
}
setTimeout(foo, 0)
setTimeout(bar, 0)
//1， 2

答成2，1了，因为不知道Eventloop所以没答上来，其实foo和bar是在一个queue里的，只能顺序执行，其他的命令默认是在stack里

以下代码有何不同？

var a = b = 2;
// ———————————
var a = 2;
var b = 2;

一开始回答没区别，后来面试官提示b的作用域，答案是第一种写法的b有全局作用域

可以看一下stackoverflow上这个问题，挺有意思的：

http://stackoverflow.com/questions/27329444/why-a-is-undefined-while-b-is-3-in-var-a-b-3/27329477

如何实现一个每次被调用时会返回被调用次数的函数？

// foo() // return 1

// foo() // return 2

function foo () {
var count = 0;
return function () {
return ++count;
};
}
var bar = foo();
bar();    //1
bar();    //2

考察用闭包保存count的值。

foo的函数我写出来了 但是使用的时候一定要先赋值给一个变量bar，否则会每次都刷新count，这样是不对的：

//Wrong!
foo()();//1
foo()();//1

写一个times函数，使调用 (n).times( func ) 时可以循环执行该函数 n 次？（写法固定，必须这么写）

想到了用this，但是没想出来怎么取得前面n的值，而且这个还牵扯到基本类型原型绑定函数，看来自己还是NAIVE

function times (fn) {
var count = this.valueOf();
//也可以这么写
//var count = parseInt(this);
for (var i = 0; i < count; i++) {
fn();
};
}
Number.prototype.times = times;    //绑定

如何实现类和继承？

不详细说了，反正就是组合继承那一套，先在子类的构造函数里用apply调用父类的构造函数然后再把父类的实例复制给子类的原型。

```

function Parent () {

//constructor

}

function Child () {

//constructor

Parent.apply(this);

}

Child.prototype = new Parent();

```

那怎么在子类中实现重载？（先调用父类的方法然后调用自己的新方法）

我是这么想的：

//子类里（Child）
function Child(){
this.foo = function () {
Parent.foo.apply(this);
//自己的新方法
...
}
}

好像不对？

数据结构/算法：

1.介绍一下你知道的数据结构。线性表、链表、队列、栈、图、树blahblah

2.链表比线性表有什么好处？插入和删除元素只需要改动两个指针

3.怎么在JS中模拟队列和栈？栈：push pop 队列：shift unshift

4.反转字符串

```

function reverseStr (str) {

var strArr = str.split(“”);

var newArr = [];

for (var i = strArr.length - 1; i >= 0; i—) {

newArr.push(strArr[i]);

}

var newStr = newArr.join(“”);

return newStr;

}

```

这个主要考察字符串操作，之前在CodeWar做过一个类似的，所以很快就写出来了。

5.斐波那契数列

悔得我肠子都绿了，光记得用递归，然后具体竟然忘了怎么写……

function fibonacci (n) {
if(n === 1 || n === 2) {
return 1;
}
return fibonacci(n-1) + fibonacci(n-2);
}

肠子都绿了啊！！！！！

React相关的：

1.介绍一下React

大体提了一下核心概念，V的一个框架，VirtualDOM，props,state…

2.知道什么是单项数据流吗？

一开始听错了，还以为是双向绑定什么之类的。

后来答出来了，就是React里props的单向传递

3.你说到了Virtual DOM，那你知道Virtual DOM有什么好处吗？

性能优化（具体到有利于后端进行页面渲染没答出来，这个真不知道）

其他

HTTP协议的request包含什么内容？

请求行，RequestHeader和body

HTTP的状态码有哪些？304知道吗？

只知道404和5XX，304不知道（有缓存，内容暂未修改）

1XX 提示信息 - 表示请求已被成功接收，继续处理

2XX 成功 - 表示请求已被成功接收，理解，接受

3XX 重定向 - 要完成请求必须进行更进一步的处理

4XX 客户端错误 - 请求有语法错误或请求无法实现

5XX 服务器端错误 - 服务器未能实现合法的请求

HTTP方法有哪些？有什么区别？

GET，POST，PUT，DELETE

区别:GET：查询；POST：改动、更新；PUT：增加；DELETE:删除

https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

什么是语义化？你说到了有利于SEO优化，你做过这方面的优化吗？

机器理解的html标签，有利于SEO优化。

没做过（囧）

事后查了一下：

title：只强调重点即可，重要关键词出现不要超过2次，而且要靠前，每个页面title要有所不同。

description：把网页内容高度概括到这里，长度要合理，不可过分堆砌关键词，每个页面description要有所不同

重要内容不要用JS输出。爬虫不会读取JS里的内容，所以重要内容必须放在HTML里。

尽少使用iframe框架。搜索引擎不会抓取到iframe里的内容，重要内容不要放在框架中。

为图片加上alt属性。

http://uxc.360.cn/archives/984.html

那你知不知道你谷歌结果的标题为什么是这个？

不知道，回来看了一下其实就是里的内容

接触过函数式编程吗？建议你去学一下

大体了解，没自学过…@.@

怎样判断两个矩形是否存在重合部分（考虑旋转）

这个问题当时没答出来，可能是因为时间比较紧而且有点紧张。

其实两个矩形存在重合部分的充要条件就是“其中一个矩形的有至少一个顶点在另外一个矩形内”

剩下的问题就是怎么判断一个点是不是在矩形内了，考虑到有旋转所有牵扯到坐标系转换的问题，用三角函数就OK了。

总结

面试官是从知乎上认识的一个前端的前辈，敬仰已久，聊了一个半小时，对我的评价是还需要加强基础和算法……哎，一直觉得自己基础还行，然后今天啪啪打脸了……回来之后拿出了那本尘封已久的《权威指南》，继续加油吧

​