在上一次失败的经历之后，本菜鸟非常努力的梳理羽毛（整理知识点），在两天后参加了堆糖的视频面试。这次面试经历总体来说比较好，可能是查漏补缺起到了效果，大部分的题目都能大体回答出来，加上面试官很nice~~~
Anyway，还是把面试过程整理出来。

首先还是从CSS开始，有遇到与上次面试类似题目的请参考今日头条前端实习生面试

CSS题目

1.如何实现一个三栏布局

三栏布局，问到的时候我以为是左右固定，中间自适应，后来发现他就是想考我float。

1
2
3
4
5
6
7
8
9
10
*{
	margin: 0;
	padding: 0;
}
.left,.right,.middle{
	float:left;
	border: solid 1px #777;
	width: 30%;
	margin:1.55%;
}

然后面试官问我，这三个元素float了之后，对下面的元素有影响要怎么处理。

清除浮动问题我发现是前端面试CSS方面经常问的一个问题，详细可参考文章：那些年我们一起清除过的浮动。

主要的方法有添加多余标签，然后clear: both一下

1
2
3
4
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="clear"></div>

然后CSS改一下

1
2
3
.clear{
	clear: both;
}

第二个方法是在父层容器添加overflow:auto属性

1
2
3
4
5
<div class="overflow">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div>
1
2
3
.overflow{
	overflow: auto;
}

第三个方法是用伪类::after

1
2
3
4
5
<div class="clearfix">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div>

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

1
2
3
4
5
6
7
8
9
.clearfix::after{
	display: block;
	content: "";
	visibility: hidden;
	clear: both;
}
.clearfix{
	*zoom:1;
}

2.position的几种属性

我发现这个面试官的问题都不算刁钻，position也是在学布局的时候一定要接触到的。常用的position有static、fix、absolute和relative。

position:static
这个static是默认的，对块级框的块格式化，对行级框的行格式化，元素按照块格式化上下文或行格式化上下文正常排版。

position:relative
相对定位，元素正常排版，并可以用top left right bottom进行位置的偏移，然而后面的元素不会调整位置去适应这个相对定位的元素。

position:absolute
绝对定位，元素脱离正常排版，使用top left right bottom相对于第一个非static的父层定位。

position:fixed
与absolute类似，不过使用top left right bottom定位是在视口的固定位置上。

3.如何实现一个响应式布局

这个是一个经验题。我原以为他要问我对Bootstrap等类库的使用，加之我从没接触过移动端，对于除了使用过Bootstrap和使用百分比宽度没再尝试过别的。

面试官说明是要自己写响应式，然后我就说我就是用百分比设置宽度。然后他问半分比相对于谁？

所以说还是基础硬伤，因为自己做的时候没注意过相对于谁，而且大多是外框，所以就说相对于窗口。面试官一笑，窗口？我说好吧，我再查查。。。顺便查了一下盒模型设置的各个百分比都是相对于谁的。

CSS中：width、margin和padding百分比是相对于包含块的！
一般情况下包含块是父元素，当position: fixed的时候，包含块为视口；当position: absolute的时候，包含块为最近的position不是static的祖先。

除此之外，响应式布局的方法还有：
CSS3 Media Query

通过在里面插入这段内容，使分辨率在小于1024分辨率的情况下和大于1024分辨率的情况下能响应不同的css文件。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

设置原始缩放比例和视窗的大小

1
2
3
<link rel="stylesheet" type="text/css" href="common.css" media="all" />
<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

同样，可以在样式表中镶嵌@media，文章推荐参考响应式布局这件小事

Javascript题目

1.Jquery中$(‘’).click()和$(‘’).on(‘click’)的分别

我为了学基础，学原生的Javascript，已经很久没碰Jquery了。问到这个问题的时候，我只能很诚实的说我没有考虑过这个问题，如果让我说的话，可能是原生的JS中onclick事件与addEventListener(“click”)的区别。

在面试完之后，我立刻又上网查了这两个的分别，其实在效果上作用不大，就是说下列代码在实现上并没有很大差距。

1
2
3
$("#myDiv").click(function(){
    alert("clicked");
})
1
2
3
$("#myDiv").on("click",function(){
    alert("clicked");
})

不同的是，on()方法可以实现动态绑定。可以将所有的点击事件绑在一个父层元素上，也可以用off()方法解绑定。

1
2
3
4
5
$("body").on("click","button",function(){
    var btnValue = this.val();
    alert(btnValue+"clicked");
});
//为每一个按钮绑定点击事件
1
$("#myDiv").off("click");//解除点击事件绑定

2.JS实现一个类

我发现，这个问题也是面试常会问到的，而且我觉得这也是我在学习JS的时候遇到的一个难点。
说起类，就要提起原型链的问题，这里直接上例子。对于原型，可以直接参考我大神男友的博文Javascript 面向对象特性(1)——抛弃类、Javascript 面向对象特性(2)——找回类。

《Javascript高级程序设计》中讲到继承的时候提到了六种方式：原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式集成。

原型链方式的具体用法是创建一个构造函数，然后创建继承这个构造函数的引用类型，将这个引用的原型指向构造函数。在原型链的问题是，Student的原型为Person的实例，那么所有Student的实例会共享它引用类型的属性，所以实例在修改这个属性的时候会导致其他实例的实例都被修改。

1
2
3
4
5
6
7
8
9
10
11
function Person(name,age){
	this.name=name;
	this.age=age;
    this.sayName=function(){
        alert(this.name);
    }
}
function Student(school){
	this.school=school;
}
Student.prototype= new Person();

借用构造函数的用法是在一个引用类型中调用构造函数，使用apply()和call()方法可以在函数内部调用构造函数。问题是，对于Student的实例找不到哪些是Person中定义的。

1
2
3
4
5
6
7
8
9
10
11
function Person(name,age){
	this.name=name;
	this.age=age;
}
Person.prototype.sayName=function(){
	alert(this.name);
}
function Student(name,age,school){
	Person.call(this,name,age);
	this.school=school;
}

组合方式是综合了原型链与借用构造函数两种方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Person(name,age){
	this.name=name;
	this.age=age;
}
Person.prototype.sayName=function(){
	alert(this.name);
}
function Student(name,age,school){
	Person.call(this,name,age);
	this.school=school;
}
Student.prototype= new Person();
Student.prototype.constructor=Student;

Student.prototype.saySchool=function(){
	alert(this.school);
}
var instance1=new Student("Kathy","23","UQ");
var instance2=new Student("Visper","24","KMUST");

instance1.saySchool();//UQ
instance2.sayName();//Visper

原型式继承，方法是通过一个现有的对象创建一个新的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
//引自《Javascript高级程序设计》
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
        name: "Kathy",
        age: "23"
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Visper";
anotherPerson.age = "24";

寄生式继承的方法是将原型式继承封装在一个方法内，然后再用工厂式的创建对象的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//引自《Javascript高级程序设计》
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: "Kathy",
    age: "23"
};
function createPerson(original){
    var clone=object(original); 
    clone.sayName=function(){
        alert(this.name);
    };
    return clone;
}
var anotherPerson = createAnother(person);
anotherPerson.name = "Visper";
anotherPerson.age = "24";

2.如何统计一个字符串中哪个字母出现的次数最多

这个问题又是算法题，而算法题是我相当不擅长的。。。不过有上次选取“字符串中第一个只出现一次的字符”的经验，这次也是比较快的想出了一个方法。不过，也还是不知道这个问题的最快解决办法是什么。

思路还是将字符串变成数组，然后再sort()排序，之后为每一组字符计算数字，将目前出现次数最多的字符以及其次数记下来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function maxCountValue(string){
	var letterArray=Array.prototype.slice.apply(string);
	var sortArray=letterArray.sort();
	var arrayLen=letterArray.length;
	var countNow=0,count=0,value=sortArray[0],maxCountValue="";
	for(var i=0;i<arrayLen;i++){
        //判断是否进入下个字符组
		if(value==sortArray[i]){
			countNow=countNow+1;
            //判断是否为最后一组并且判断当前次数以及目前最大次数
			if(i==arrayLen-1&count<countNow){
				maxCountValue=value;
			}
		}
		else{
            //如果当前次数大于目前最大次数
			if(count<countNow){
				count=countNow;
				maxCountValue=value;
			}
			value=sortArray[i];
			countNow=0
			countNow=countNow+1;
		}
	}
	alert(maxCountValue);
}

HTTP题目以及新技术题目

HTTP题目继续问到了AJAX的问题，上一篇面试题中有整理。

面试官紧接着有问到form提交和ajax提交的区别？
Form在提交的时候，会跳转页面或者原页面刷新。而AJAX是异步的，无需页面刷新而只是部分刷新。
Form提交时，JS不是必需的，而且数据按照表单结构提交。AJAX需要JS来实现，而且数据也要用程序处理。

之后面试官问到开发环境问题：

1、目前的开发环境是什么
曾用PC开发，使用EverEdit；这几个月转用Mac，使用HBuilder

2、shell操作 命令行用过什么
简单的前进到文件目录cd
列出当前文件夹内的文件 ls -li
改变所有人权限 chown
该文件读写模式 chmod

3、chrome的调试方法
Elements中查询元素结构、以及元素的样式
Network中查看每个资源的请求反馈时间
Sources中调试程序，在左栏程序文件上打断点，并在右侧输入变量名查看变量值的变化
Resource中查询Session、Cookie、本地存储及缓存的状态
Console中执行函数并查看错误行号或错误代码

4、代码管理工具使用过么？做哪些操作呢？
使用过Git：建立远程仓库，拉取本地仓库，更改之后submit，之后push到远程仓库。曾经Fork过别人的，然后修改过后也是submit再push。
说实话我做的个人项目比较多，对于GitHub的使用仅限于提交推送更新代码。所以也是大概的说了一下我的使用情况。

新技术题目

接触过什么比较前沿的技术？js框架、模块化 、自动化工具、预编译语言？
呃。。呃。。呃。。。

当时我的反应好尴尬，不过也是实话实说我没接触过什么，只不过听说过angular.js、backbone.js之类的。其余的都没太听说过。。。汗

不过我有表示我以后会努力学习，迎头赶上！

最后问道面试官对我的印象：1、经验不足，2、新技术接触的太少。

因为我目前时间有限，只有每天晚上整理面试题，所以这短短的几个题整理了接近一个星期，很多问题也期待大神们的补充。。。目前也算是找到了工作，今后会继续努力，让我的羽翼丰满起来！

前端面试